commit 33342104e3503e95bfffacc7184eae4b4d70b007 Author: Михаил Капелько Date: Thu May 27 13:59:15 2021 +0300 replica diff --git a/01.js b/01.js new file mode 100644 index 0000000..03a2a3f --- /dev/null +++ b/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()); +} + diff --git a/index.html b/index.html new file mode 100644 index 0000000..4e35225 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + mjs + + + + + + +