HTML5 Canvas と Javascript を使用してゲームを作成しようとしています。私がやろうとしているのは、てんとう虫を特定の間隔で画面上を移動させることです。テントウムシの上にマウスを置くと間隔が広がり、別の場所にスポーンします。今、私はそれを持っているので、ページを更新するとてんとう虫が別の場所に出現します。独自に更新する方法や、マウスのホバーを検出する方法がわかりません。
前もって感謝します。
これは私がこれまでに持っているものです:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="480"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var posX = (Math.random() * 520) + 1;
var posY = (Math.random() * 400) + 1;
var ladybug = new Image();
var background = new Image();
var velocity = 5;
var FPS = 30;
update();
draw();
background();
function background() {
background.onload = function () {
context.drawImage(background, 50, 50);
}
background.src = 'Images/grass.png';
}
function draw() {
context.clearRect(0, 0, myCanvas.width, myCanvas.height);
context.fillStyle = "black"; // Set color to black
context.font = "bold 16px Arial";
context.fillText("Sup Bro!", posX, posY);
ladybug.onload = function () {
context.drawImage(ladybug, posX, posY);
};
ladybug.src = 'Images/Ladybug.png';
}
function update() {
}
</script>
</body>
</html>