Realistic space battle game's game

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

No:49938

←

Prev Next

→

Realistic space battle game
Developer User21173｜Date and time 24/3/6 23:00:43
Build time 10.216 sec｜Game capacity 2.652KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Battle Game</title>
    <style>
        canvas {
            border: 2px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

// Player spaceship
        let player = {
            x: canvas.width / 2,
            y: canvas.height - 50,
            width: 50,
            height: 50,
            color: 'blue',
            speed: 5
        };

// Enemy spaceship
        let enemy = {
            x: Math.random() * (canvas.width - 50),
            y: 10,
            width: 50,
            height: 50,
            color: 'red',
            speed: 3
        };

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

function drawEnemy() {
            ctx.fillStyle = enemy.color;
            ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
        }

function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

function update() {
            clearCanvas();
            drawPlayer();
            drawEnemy();

if (player.x < enemy.x + enemy.width &&
                player.x + player.width > enemy.x &&
                player.y < enemy.y + enemy.height &&
                player.y + player.height > enemy.y) {
                alert("Game Over! Enemy spaceship destroyed your spaceship.");
                window.location.reload();
            }
        }

function movePlayer(event) {
            if (event.key === 'ArrowLeft' && player.x > 0) {
                player.x -= player.speed;
            } else if (event.key === 'ArrowRight' && player.x < canvas.width - player.width) {
                player.x += player.speed;
            }

update();
        }

document.addEventListener('keydown', movePlayer);

function gameLoop() {
            enemy.y += enemy.speed;

if (enemy.y > canvas.height) {
                enemy.y = 10;
                enemy.x = Math.random() * (canvas.width - 50);
            }

update();

requestAnimationFrame(gameLoop);
        }

gameLoop();
    </script>
</body>

</html>