matter.jsのイベントについて教えてください
いろいろなサイトのサンプルコードを参考にさせていただきながら、matter.jsを使って物理エンジンでの表現を勉強してます。なんとか、20個のボールを生成し、それぞれにラベルで番号をふりました。そのボそのボールをクリックして、どのボールをタッチしたのかをalertで表示させようとしているのですが、以下のコードでうまくいきません。どのようにすればよいでしょうか？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>matter.js demo</title>
<script src="matter.js"></script>
</head>
<body>
<div id="matter"></div>
<script>
const engWidth = 680;
const engHeight = 400;
const wall = 10;
const ball = 20;
var ballSize = 20;
var objs = [];
var engine = Matter.Engine.create(document.getElementById("matter"), {
render: {
options: {
wireframes: false,
width: engWidth,
height: engHeight,
background: "rgba(0, 0, 0, 1)"
}
}
});
objs.push(Matter.Bodies.rectangle(engWidth/2, wall/2, engWidth, wall, {isStatic: true}));
objs.push(Matter.Bodies.rectangle(engWidth-wall/2, engHeight/2, wall, engHeight, {isStatic: true}));
objs.push(Matter.Bodies.rectangle(engWidth/2, engHeight-wall/2, engWidth, wall, {isStatic: true}));
objs.push(Matter.Bodies.rectangle(wall/2, engHeight/2, wall, engHeight, {isStatic: true}));
for (var i = 0; i < ball; i++) {
var x = Math.random()*engWidth;
var y = Math.random()*engHeight;
// ボールに番号のラベルをつける
objs.push(Matter.Bodies.circle(x, y, ballSize, {
label: i,
render:{
fillStyle: "#FFFFFF",
}
}));
}
Matter.World.add(engine.world, objs);
var MouseConstraint = Matter.MouseConstraint;
// マウスドラッグではなく、マウスクリックのイベントを設定する
var mouseclick = MouseConstraint.create(engine, {
element: document.getElementById("matter").childNodes[0],
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
Matter.World.add(engine.world, mouseclick);
// マウスクリックしたボールの番号をalertで表示する
Matter.Events.on(mouseclick, 'mousedown', function(e) {
alert("You clicked on ball number " + e.body.label);
});
Matter.Engine.run(engine);
</script>
</body>
</html>
お礼
とても分かり易く教えていただき有難うございます。 matterが事象全般を指し、problemは質問する者が相手の困っていることを予測できるときに使うんですね。sesame1110さんのように違いが説明できるほど僕もネイティヴにできるようにしたいです。(最後は愚痴になってしまいましたが)