0
これは私のスクリプトコード..ですブラウザオープン、startGame（）関数が開始されたときにJavaScriptキャンバス内のオブジェクトを使用するイベントをクリックするにはどうすればよいですか？
<body onload= "startGame()">
<script>
var Earth;
var Mercury;
var Venus;
function startGame() {
Earth = new component(152, 183, 'earth.png', 800, 75);
Mercury = new component(122,151, 'mercury.png', 300, 400);
Venus = new component(152, 183, 'venus.png', 520, 240);
GameArea.start();
}
var GameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 1000;
this.canvas.height = 642;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
//make game pieces
function component(width, height, color, x, y) {
this.type = "image";
this.image = new Image();
this.image.src = color;
this.width = width; this.height = height;
this.x = x; this.y = y;
this.update = function() {
ctx = GameArea.context;
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
GameArea.clear();
Earth.update();
Mercury.update();
Venus.update();
}
</script>
</body>
コードがあります。 私はキャンバスを描き、キャンバスに惑星を見せます。 画像を参考にしてください。 This is when javascript on running image. 彼らは地球、水星、金星を持っています。 その惑星はすべて対象です....私が思うなら...
「地球」オブジェクトをクリックしたときにイベントをクリックしたいと思っています。 しかし、私はそれをどうするかわかりません.... 私は何を参照する必要がありますか？ 私に助言してください..！ありがとう。