ソースを参照

replica

master
コミット
33342104e3
2個のファイルの変更94行の追加0行の削除
  1. +60
    -0
      01.js
  2. +34
    -0
      index.html

+ 60
- 0
01.js ファイルの表示

@@ -0,0 +1,60 @@
class Box {
constructor(world, x, y, w, h, options) {
// add box to physics simulation
this.physicsBox = Matter.Bodies.rectangle(x, y, w, h, options);
Matter.Composite.add(world, this.physicsBox);

// add DOM box at the same coordinates
this.div = document.createElement("box");
document.body.appendChild(this.div);
this.div.style.width = w + "px";
this.div.style.height = h + "px";
this.width = w;
this.height = h;
this.update();
}

update() {
let pos = this.physicsBox.position;
let angle = this.physicsBox.angle;
let degrees = angle * (180 / Math.PI);

let x = this.physicsBox.bounds.min.x;
let y = this.physicsBox.bounds.min.y;
this.div.style.transform = `translate(${x}px, ${y}px) rotate(${degrees}deg)`;

// old uses position
// this.div.style.transform = `translate(${pos.x - this.width / 2}px, ${pos.y - this.height / 2 }px) rotate(${degrees}deg)`;
}
}

let engine;
let boxes = [];

setupMatter();
addObjects();
gameLoop();

function setupMatter() {
engine = Matter.Engine.create();
}

function addObjects() {
boxes.push(
new Box(engine.world, 250, 20, 40, 40),
new Box(engine.world, 300, 350, 40, 40),
new Box(engine.world, 320, 70, 40, 40),
new Box(engine.world, 0, 400, 800, 60, { isStatic: true })
);
}

function gameLoop() {
// update the physics world
Matter.Engine.update(engine, 1000 / 60);
// update the DOM world
for (let b of boxes) {
b.update();
}
requestAnimationFrame(() => this.gameLoop());
}


+ 34
- 0
index.html ファイルの表示

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>mjs</title>
<script src="https://cdn.jsdelivr.net/npm/matter-js@0.17.1/build/matter.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}

body {
height: 100vh;
width: 100vw;
}

box {
margin: 0px;
padding: 0px;
box-sizing: border-box;
position: absolute;
display: block;
background-color: rgba(45, 188, 232, 0.687);
transform-origin: 20px 20px;
}

</style>
</head>
<body>
<script src="01.js"></script>
</body>
</html>

読み込み中…
キャンセル
保存