A Zombie Tower defense that you place shooters that attack the zombies's game

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

No:12941

←

Prev Next

→

A Zombie Tower defense that you place shooters tha..ALL
Developer User5637｜Date and time 23/8/25 6:54:49
Build time 22.953 sec｜Game capacity 3.854KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Zombie Tower Defense</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        
        #game-container {
            position: relative;
            width: 400px;
            height: 400px;
            border: 2px solid black;
        }
        
        .shooter {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
        
        .zombie {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: green;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>

// Function to create a shooter
            function createShooter(x, y) {
                const shooter = document.createElement('div');
                shooter.className = 'shooter';
                shooter.style.left = x + 'px';
                shooter.style.top = y + 'px';
                gameContainer.appendChild(shooter);
                shooters.push(shooter);
            }

// Function to create a zombie
            function createZombie(x, y) {
                const zombie = document.createElement('div');
                zombie.className = 'zombie';
                zombie.style.left = x + 'px';
                zombie.style.top = y + 'px';
                gameContainer.appendChild(zombie);
                zombies.push(zombie);
            }

// Function to handle shooter attack
            function handleShooterAttack() {
                for (const shooter of shooters) {
                    const shooterRect = shooter.getBoundingClientRect();
                    for (const zombie of zombies) {
                        const zombieRect = zombie.getBoundingClientRect();
                        if (
                            shooterRect.right >= zombieRect.left &&
                            shooterRect.left <= zombieRect.right &&
                            shooterRect.bottom >= zombieRect.top &&
                            shooterRect.top <= zombieRect.bottom
                        ) {
                            zombies.splice(zombies.indexOf(zombie), 1);
                            zombie.remove();
                            break;
                        }
                    }
                }
            }

// Function to update the game logic every frame
            function updateGame() {
                // Move zombies towards the left
                for (const zombie of zombies) {
                    const currentLeft = parseInt(zombie.style.left);
                    zombie.style.left = currentLeft - 1 + 'px';
                }

// Check shooter attack
                handleShooterAttack();

requestAnimationFrame(updateGame);
            }

// Event listener to create a shooter on click
            gameContainer.addEventListener('click', (event) => {
                const rect = gameContainer.getBoundingClientRect();
                const x = event.clientX - rect.left;
                const y = event.clientY - rect.top;
                createShooter(x, y);
            });

// Create initial zombies
            createZombie(400, 200);
            createZombie(400, 250);
            createZombie(400, 300);

// Start game loop
            updateGame();
        });
    </script>
</body>
</html>