Auto ai space invaders idle main pixel in the middle auto shoots at incoming random color pixels slowly upgrading's game

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

No:48526

←

Prev Next

→

Auto ai space invaders idle main pixel in the midd..ALL
Developer User18896｜Date and time 24/3/2 12:16:41
Build time 10.582 sec｜Game capacity 4.03KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Idle Space Invaders</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        let score = 0;
        let autoShootLevel = 1;
        let autoShooting = false;
        
        const player = {
            x: canvas.width / 2 - 20,
            y: canvas.height - 50,
            width: 40,
            height: 40,
        }
        
        const pixel = {
            x: Math.random() * (canvas.width - 20),
            y: 0,
            width: 20,
            height: 20,
            speed: 1,
            color: `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
        }
        
        function drawPlayer() {
            ctx.fillStyle = 'blue';
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }
        
        function drawPixel() {
            ctx.fillStyle = pixel.color;
            ctx.fillRect(pixel.x, pixel.y, pixel.width, pixel.height);
        }
        
        function updatePixel() {
            pixel.y += pixel.speed;
            if (pixel.y > canvas.height) {
                score++;
                pixel.x = Math.random() * (canvas.width - 20);
                pixel.y = 0;
                pixel.color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
            }
        }
        
        function drawScore() {
            ctx.fillStyle = 'black';
            ctx.font = '24px Arial';
            ctx.fillText(`Score: ${score}`, 10, 30);
        }
        
        function upgradeAutoShoot() {
            autoShooting = true;
            autoShootLevel++;
        }
        
        function autoShoot() {
            setInterval(() => {
                if (autoShooting) {
                    const bullet = {
                        x: player.x + player.width / 2 - 5,
                        y: player.y - 10,
                        width: 10,
                        height: 10,
                        speed: 2,
                        color: 'red',
                    }
                    
                    setInterval(() => {
                        bullet.y -= bullet.speed;
                        if (bullet.y < 0) {
                            autoShooting = false;
                        }
                    }, 10);
                    
                    ctx.fillStyle = bullet.color;
                    ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
                }
            }, 1000);
        }
        
        function collisionDetection() {
            if (pixel.x < player.x + player.width &&
                pixel.x + pixel.width > player.x &&
                pixel.y < player.y + player.height &&
                pixel.y + pixel.height > player.y) {
                score++;
                pixel.x = Math.random() * (canvas.width - 20);
                pixel.y = 0;
                pixel.color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
            }
        }
        
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawPixel();
            updatePixel();
            drawScore();
            collisionDetection();
            requestAnimationFrame(gameLoop);
        }
        
        canvas.addEventListener('mousemove', (event) => {
            player.x = event.clientX - canvas.getBoundingClientRect().left - player.width / 2;
        });
        
        canvas.addEventListener('click', () => {
            if (score >= 10 && !autoShooting) {
                upgradeAutoShoot();
                autoShoot();
            }
        });
        
        gameLoop();
        
    </script>
</body>
</html>