|
|
|
@@ -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()); |
|
|
|
} |
|
|
|
|
