<!-- -*- coding: utf-8 -*- -->
<!DOCTYPE html>
<html>
<head>
<script src="../../matterjs/matter.min.js"></script>
</head>
<body>
<div id="debug"></div>
<p id="coordinate"></p>
</body>
<script>
const debug = document.querySelector("#debug");
const coord = document.querySelector("#coordinate");
const engine = Matter.Engine.create();
const render = Matter.Render.create({
element: debug,
engine: engine,
});
// 円形の物体
const circle = Matter.Bodies.circle(200, 200, 80, 80);
// 床。長方形の物体、固定されている. isStatic: trueで固定。
const ground = Matter.Bodies.rectangle(400, 600, 800, 30, {isStatic: true});
// mouse操作ができるようにする。
// mouseConstraintを追加するとドラッグアンドドロップでびょんびょんできるようになる。
const mouse = Matter.Mouse.create(debug);
// 普通のaddEventListenerでもいけそー。いけた。
debug.addEventListener('mousemove', () =>
coord.innerText=`x: ${mouse.position.x}, y: ${mouse.position.y}`
);
debug.addEventListener('click', () => {
const circle = Matter.Bodies.circle(mouse.position.x, mouse.position.y, 20);
Matter.Composite.add(engine.world, circle);
});
// 配置 第一引数の場所に第二引数のモノを配置する。モノがいっぱいあるときは配列で指定できる。便利!!
Matter.Composite.add(engine.world, [circle, ground]);
Matter.Runner.run(engine);
Matter.Render.run(render);
</script>
</html>
