Click here for free DL of the app version that can save data.

No:44893

モンスターが撃ってくる矢をタイミングよく跳ね返して倒す
Developer User19503｜Date and time 24/2/19 16:43:41
Build time 8.596 sec｜Game capacity 1.592KB｜

Script

モンスター撃退ゲーム

スコア: 0

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>モンスター撃退ゲーム</title>
</head>
<body>
<h1>モンスター撃退ゲーム</h1>
<p id="score">スコア: 0</p>
<canvas id="gameCanvas" width="400" height="400"></canvas>

const player = {
    x: canvas.width / 2,
    y: canvas.height - 30,
    width: 20,
    height: 20,
    speed: 5
};

const arrow = {
    x: Math.random() * (canvas.width - 10),
    y: 0,
    speed: 3,
    width: 10,
    height: 10
};

function drawPlayer() {
    ctx.fillStyle = "blue";
    ctx.fillRect(player.x, player.y, player.width, player.height);
}

function drawArrow() {
    ctx.fillStyle = "red";
    ctx.fillRect(arrow.x, arrow.y, arrow.width, arrow.height);
}

function detectCollision() {
    if (arrow.y + arrow.height >= player.y && arrow.y <= player.y + player.height &&
        arrow.x + arrow.width >= player.x && arrow.x <= player.x + player.width) {
        score++;
        arrow.x = Math.random() * (canvas.width - arrow.width);
        arrow.y = 0;
    }
}

function updateGame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    drawPlayer();
    drawArrow();
    
    arrow.y += arrow.speed;
    
    detectCollision();
    
    document.getElementById("score").innerText = `スコア: ${score}`;
    
    requestAnimationFrame(updateGame);
}

document.addEventListener("mousemove", function(event) {
    player.x = event.clientX - canvas.offsetLeft - player.width / 2;
});

updateGame();
</script>
</body>
</html>