заголовок

2021-05-31 15:18:21 +03:00
parent d71e4ef553
commit e745601063
6 changed files with 121 additions and 12 deletions
--- a/old/01.js
+++ b/old/01.js
@@ -0,0 +1,72 @@
+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({ enableSleeping: true });
+}
+
+function addObjects() {
+  boxes.push(
+    new Box(engine.world, 250, 20, 40, 40, { restitution: 0.8 }),
+    new Box(engine.world, 300, 350, 40, 40, { restitution: 0.8 }),
+    new Box(engine.world, 320, 70, 40, 40, { restitution: 0.8 }),
+    new Box(engine.world, 0, 400, 1200, 60, { isStatic: true }),
+    new Box(engine.world, 260, 50, 40, 40),
+    new Box(engine.world, 330, 300, 40, 40),
+    new Box(engine.world, 350, 170, 40, 40),
+    new Box(engine.world, 160, 150, 40, 40),
+    new Box(engine.world, 190, 300, 40, 40),
+    new Box(engine.world, 250, 270, 40, 40),
+  );
+}
+
+function gameLoop() {
+  // update the physics world
+  Matter.Engine.update(engine, 1000 / 60);
+var sleepingCount = 0;
+  // update the DOM world
+  for (let b of boxes) {
+    b.update();
+if (b.physicsBox.isSleeping)
+{
+    sleepingCount += 1;
+}
+  }
+console.debug("sleeping count:", sleepingCount);
+  requestAnimationFrame(() => this.gameLoop());
+}
+
--- a/old/index.html
+++ b/old/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: red;
+  transform-origin: 20px 20px;
+}
+
+		</style>
+    </head>
+    <body>
+        <script src="01.js"></script>
+    </body>
+</html>