commit
33342104e3
2 changed files with 94 additions and 0 deletions
Unified View
Diff Options
-
+60 -001.js
-
+34 -0index.html
+ 60
- 0
01.js
View File
| @@ -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()); | |||||
| } | |||||
+ 34
- 0
index.html
View File
| @@ -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> | |||||