make a game like "surviv.io" where you need to survive and k○ll as many zombies as posible with a gun's game

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

No:47027

←

Prev Next

→

make a game like "surviv.io" where you need to sur..ALL
Developer User20375｜Date and time 24/2/27 6:20:21
Build time 14.339 sec｜Game capacity 4.027KB｜

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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zombie Survival Game</title>
<style>
    body { margin: 0; }
    canvas { display: block; }
</style>
</head>
<body>
<canvas></canvas>
<script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    let player = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        size: 20,
        speed: 5,
        direction: 'right'
    };
    
    let bullets = [];
    let zombies = [];
    let score = 0;
    let isGameOver = false;
    
    function drawPlayer() {
        ctx.fillStyle = 'blue';
        ctx.fillRect(player.x - player.size / 2, player.y - player.size / 2, player.size, player.size);
    }
    
    function drawBullets() {
        ctx.fillStyle = 'red';
        bullets.forEach(bullet => {
            ctx.fillRect(bullet.x - 2, bullet.y - 2, 4, 4);
        });
    }
    
    function drawZombies() {
        ctx.fillStyle = 'green';
        zombies.forEach(zombie => {
            ctx.fillRect(zombie.x - zombie.size / 2, zombie.y - zombie.size / 2, zombie.size, zombie.size);
        });
    }
    
    function updatePlayer() {
        if (isGameOver) return;
        
        if (player.direction === 'up') {
            player.y -= player.speed;
        } else if (player.direction === 'down') {
            player.y += player.speed;
        } else if (player.direction === 'left') {
            player.x -= player.speed;
        } else if (player.direction === 'right') {
            player.x += player.speed;
        }
    }
    
    function updateBullets() {
        bullets.forEach(bullet => {
            bullet.x += 10;
        });
    }
    
    function updateZombies() {
        zombies.forEach(zombie => {
            zombie.x -= 1;
        });
    }
    
    function spawnZombie() {
        let zombie = {
            x: canvas.width + 30,
            y: Math.random() * canvas.height,
            size: 20
        };
        zombies.push(zombie);
    }
    
    function checkCollision() {
        zombies.forEach(zombie => {
            if (Math.abs(player.x - zombie.x) < 20 && Math.abs(player.y - zombie.y) < 20) {
                isGameOver = true;
            }
            
            bullets.forEach((bullet, bulletIndex) => {
                if (Math.abs(bullet.x - zombie.x) < 10 && Math.abs(bullet.y - zombie.y) < 10) {
                    zombies.splice(zombies.indexOf(zombie), 1);
                    bullets.splice(bulletIndex, 1);
                    score += 10;
                }
            });
        });
    }
    
    function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        if (!isGameOver) {
            drawPlayer();
            drawBullets();
            drawZombies();
            updatePlayer();
            updateBullets();
            updateZombies();
            checkCollision();
            requestAnimationFrame(gameLoop);
        } else {
            ctx.font = '30px Arial';
            ctx.fillStyle = 'black';
            ctx.textAlign = 'center';
            ctx.fillText('Game Over! Your score: ' + score, canvas.width / 2, canvas.height / 2);
        }
    }
    
    window.addEventListener('keydown', e => {
        if (e.key === 'ArrowUp') {
            player.direction = 'up';
        } else if (e.key === 'ArrowDown') {
            player.direction = 'down';
        } else if (e.key === 'ArrowLeft') {
            player.direction = 'left';
        } else if (e.key === 'ArrowRight') {
            player.direction = 'right';
        } else if (e.key === ' ') {
            let bullet = {
                x: player.x,
                y: player.y,
                speed: 10
            };
            bullets.push(bullet);
        }
    });
    
    setInterval(spawnZombie, 1000);
    gameLoop();
</script>
</body>
</html>