replica

3年前 · 33342104e3
--- a/01.js
+++ 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());
 }

--- a/index.html
+++ b/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>