AI game creator

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

No:47430

←

Prev Next

→

Auto space invaders
Developer User18896｜Date and time 24/2/28 3:12:46
Build time 12.451 sec｜Game capacity 2.362KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Auto Space Invaders</title>
    <style>
        #gameCanvas {
            background-color: black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>

const player = {
        x: canvas.width / 2,
        y: canvas.height - 50,
        width: 50,
        height: 50,
        color: 'blue',
        speed: 10
    };

const enemies = [];
    const enemySize = 20;
    const enemySpeed = 2;

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

function drawEnemies() {
        enemies.forEach(enemy => {
            ctx.fillStyle = 'red';
            ctx.fillRect(enemy.x, enemy.y, enemySize, enemySize);
        });
    }

function updateEnemies() {
        enemies.forEach(enemy => {
            enemy.y += enemySpeed;

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

if (isColliding(enemy, player)) {
                alert('Game Over! Your score: ' + enemies.length);
                enemies.length = 0;
            }
        });
    }

function isColliding(rect1, rect2) {
        return rect1.x < rect2.x + rect2.width &&
               rect1.x + rect1.width > rect2.x &&
               rect1.y < rect2.y + rect2.height &&
               rect1.y + rect1.height > rect2.y;
    }

function updateGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        drawPlayer();
        drawEnemies();
        updateEnemies();
    }

setInterval(updateGame, 1000 / 60);

setInterval(function() {
        enemies.push({
            x: Math.random() * (canvas.width - enemySize),
            y: 0
        });
    }, 1000);

</script>

</body>
</html>