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>
お礼
ありがとうございました！！！