kornerr/mjs
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

replica

Browse Source
This commit is contained in:
Михаил Капелько
2021-05-27 13:59:15 +03:00
commit 33342104e3
2 changed files with 94 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
01.js Normal file
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
index.html Normal file
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>