replica

2021-05-27 13:59:15 +03:00
commit 33342104e3
2 changed files with 94 additions and 0 deletions
--- 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>