5 changed files with 80 additions and 7 deletions
Unified View
Diff Options
-
+12 -200130.платформы.js
-
+9 -501300.пример.json.js
-
+2 -0index.html
-
+34 -0raw/01.js
-
+23 -0raw/index.html
+ 12
- 2
00130.платформы.js
View File
| @@ -10,27 +10,35 @@ | |||||
| задано: {}, | задано: {}, | ||||
| тела: {}, | тела: {}, | ||||
| div: {}, | div: {}, | ||||
| transform: {}, | |||||
| обновить: function() { | обновить: function() { | ||||
| for (var имя in мир.платформы.тела) | for (var имя in мир.платформы.тела) | ||||
| { | { | ||||
| var тело = мир.платформы.тела[имя]; | var тело = мир.платформы.тела[имя]; | ||||
| if (тело.isSleeping) | |||||
| { | |||||
| continue; | |||||
| } | |||||
| var div = мир.платформы.div[имя]; | var div = мир.платформы.div[имя]; | ||||
| let x = тело.bounds.min.x; | let x = тело.bounds.min.x; | ||||
| let y = тело.bounds.min.y; | let y = тело.bounds.min.y; | ||||
| let угол = тело.angle * (180 / Math.PI); | let угол = тело.angle * (180 / Math.PI); | ||||
| //div.style.transform = `translate(${x}px, ${y}px) rotate(${угол}deg)`; | |||||
| div.style.transform = `translate(${x}px, ${y}px) rotate(${угол}deg)`; | |||||
| /* | |||||
| div.style.transform = `rotate(${угол}deg)`; | div.style.transform = `rotate(${угол}deg)`; | ||||
| div.style.left = `${x}px`; | div.style.left = `${x}px`; | ||||
| div.style.top = `${y}px`; | div.style.top = `${y}px`; | ||||
| */ | |||||
| /* | |||||
| var задано = мир.платформы.задано[имя]; | var задано = мир.платформы.задано[имя]; | ||||
| var умолчание = мир.платформы.умолчание; | var умолчание = мир.платформы.умолчание; | ||||
| var ширина = задано["ширина"] ? задано["ширина"] : умолчание["ширина"]; | var ширина = задано["ширина"] ? задано["ширина"] : умолчание["ширина"]; | ||||
| var высота = задано["высота"] ? задано["высота"] : умолчание["высота"]; | var высота = задано["высота"] ? задано["высота"] : умолчание["высота"]; | ||||
| div.style.transformOrigin = `${ширина / 2}px ${высота / 2}px`; | div.style.transformOrigin = `${ширина / 2}px ${высота / 2}px`; | ||||
| */ | |||||
| } | } | ||||
| @@ -93,6 +101,8 @@ console.debug("создать тело", тело); | |||||
| элемент.style.height = `${высота}px`; | элемент.style.height = `${высота}px`; | ||||
| document.body.appendChild(элемент); | document.body.appendChild(элемент); | ||||
| мир.платформы.div[имя] = элемент; | мир.платформы.div[имя] = элемент; | ||||
| элемент.style.transformOrigin = `right bottom`; | |||||
| } | } | ||||
| // Обновить div. | // Обновить div. | ||||
+ 9
- 5
01300.пример.json.js
View File
| @@ -6,19 +6,23 @@ | |||||
| y: 500, | y: 500, | ||||
| ширина: 700, | ширина: 700, | ||||
| высота: 50, | высота: 50, | ||||
| цвет: "#550055", | |||||
| цвет: "#55005555", | |||||
| }, | }, | ||||
| квадрат1: { | квадрат1: { | ||||
| x: 400, | |||||
| y: 300, | |||||
| x: 401, | |||||
| y: 240, | |||||
| ширина: 40, | |||||
| высота: 20, | |||||
| статика: false, | статика: false, | ||||
| цвет: "#aaaaaa", | |||||
| цвет: "#aaaaaa55", | |||||
| }, | }, | ||||
| квадрат2: { | квадрат2: { | ||||
| x: 415, | x: 415, | ||||
| y: 470, | y: 470, | ||||
| ширина: 40, | |||||
| высота: 20, | |||||
| статика: true, | статика: true, | ||||
| цвет: "#aaffaa", | |||||
| цвет: "#aaffaa55", | |||||
| }, | }, | ||||
| }, | }, | ||||
| спрайты: { | спрайты: { | ||||
+ 2
- 0
index.html
View File
| @@ -24,5 +24,7 @@ | |||||
| <script src="00130.платформы.js"></script> | <script src="00130.платформы.js"></script> | ||||
| <script src="01000.пуск.js"></script> | <script src="01000.пуск.js"></script> | ||||
| <script src="01300.пример.json.js"></script> | <script src="01300.пример.json.js"></script> | ||||
| <script src="raw/01.js"></script> | |||||
| </body> | </body> | ||||
| </html> | </html> | ||||
+ 34
- 0
raw/01.js
View File
| @@ -0,0 +1,34 @@ | |||||
| // module aliases | |||||
| var Engine = Matter.Engine, | |||||
| Render = Matter.Render, | |||||
| Runner = Matter.Runner, | |||||
| Bodies = Matter.Bodies, | |||||
| Composite = Matter.Composite; | |||||
| // create an engine | |||||
| var engine = Engine.create({ | |||||
| enableSleeping: true, | |||||
| }); | |||||
| // create a renderer | |||||
| var render = Render.create({ | |||||
| element: document.body, | |||||
| engine: engine | |||||
| }); | |||||
| // create two boxes and a ground | |||||
| var ground = Bodies.rectangle(400, 500, 700, 50, { isStatic: true }); | |||||
| var boxA = Bodies.rectangle(401, 240, 40, 20); | |||||
| var boxB = Bodies.rectangle(415, 470, 40, 20, { isStatic: true }); | |||||
| // add all of the bodies to the world | |||||
| Composite.add(engine.world, [boxA, boxB, ground]); | |||||
| // run the renderer | |||||
| Render.run(render); | |||||
| // create runner | |||||
| var runner = Runner.create(); | |||||
| // run the engine | |||||
| Runner.run(runner, engine); | |||||
+ 23
- 0
raw/index.html
View File
| @@ -0,0 +1,23 @@ | |||||
| <!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; | |||||
| } | |||||
| </style> | |||||
| </head> | |||||
| <body> | |||||
| <script src="01.js"></script> | |||||
| </body> | |||||
| </html> | |||||