Top down 2d endless zombie shooter with wall building button that's places a wall in front of character, add a joystick that controls the facing direction and movemnt also add a shoot, and build wall button's game

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

No:22756

←

Prev Next

→

Top down 2d endless zombie shooter with wall build..ALL
Developer User10477｜Date and time 23/10/24 14:10:49
Build time 142.354 sec｜Game capacity 10.149KB｜

Script

Sure! Here's a simple implementation of a top-down 2D endless zombie shooter game with wall-building functionality using HTML, CSS, and JavaScript. Please save the code as an HTML file and open it in a web browser to play the game.

Please note that this is a basic implementation for demonstration purposes, and you can enhance it further with additional features, visual effects, and optimizations as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Zombie Shooter</title>
    <style>
        #game-container {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid black;
        }
        
        #player {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: blue;
        }
        
        .zombie {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: green;
            border-radius: 50%;
        }

.wall {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: gray;
        }
        
        #joystick-container {
            position: absolute;
            bottom: 20px;
            left: 20px;
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        
        #joystick {
            position: relative;
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
        }
        
        #shoot-btn {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            pointer-events: none;
        }

#build-wall-btn {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-color: gray;
            border-radius: 50%;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player"></div>
    </div>
    <div id="joystick-container">
        <div id="joystick"></div>
    </div>
    <button id="shoot-btn"></button>
    <button id="build-wall-btn"></button>
    
    <script>
        // Game variables
        var playerSpeed = 5;
        var zombieSpeed = 2;
        var zombieSpawnInterval = 2000; // Milliseconds
        var wallBuildCooldown = 1000; // Milliseconds
        
        var playerElem = document.getElementById("player");
        var joystickContainer = document.getElementById("joystick-container");
        var joystick = document.getElementById("joystick");
        var shootBtn = document.getElementById("shoot-btn");
        var buildWallBtn = document.getElementById("build-wall-btn");
        
        var gameContainer = document.getElementById("game-container");
        var gameWidth = gameContainer.offsetWidth;
        var gameHeight = gameContainer.offsetHeight;
        
        var joystickSize = joystick.offsetWidth;
        var joystickRadius = joystickSize / 2;
        var joystickX = 0;
        var joystickY = 0;
        var joystickMaxDistance = joystickSize / 4;
        
        var isShooting = false;
        var walls = [];
        var zombies = [];
        var gameOver = false;
        
        // Initialize joystick position and shooting behavior
        joystick.style.transform = "translate(" + joystickX + "px, " + joystickY + "px)";
        shootBtn.addEventListener("mousedown", function () {
            isShooting = true;
        });
        shootBtn.addEventListener("mouseup", function () {
            isShooting = false;
        });

// Initialize wall building behavior
        buildWallBtn.addEventListener("click", function () {
            if (!gameOver && buildWallBtn.disabled !== true) {
                buildWall();
                buildWallBtn.disabled = true;
                setTimeout(function () {
                    buildWallBtn.disabled = false;
                }, wallBuildCooldown);
            }
        });
        
        // Update joystick position based on touch
        joystickContainer.addEventListener("touchmove", function (event) {
            var touch = event.touches[0];
            var rect = joystickContainer.getBoundingClientRect();
            joystickX = touch.clientX - rect.left - joystickRadius;
            joystickY = touch.clientY - rect.top - joystickRadius;
            
            if (joystickX > joystickMaxDistance) joystickX = joystickMaxDistance;
            else if (joystickX < -joystickMaxDistance) joystickX = -joystickMaxDistance;
            
            if (joystickY > joystickMaxDistance) joystickY = joystickMaxDistance;
            else if (joystickY < -joystickMaxDistance) joystickY = -joystickMaxDistance;
            
            joystick.style.transform = "translate(" + joystickX + "px, " + joystickY + "px)";
        });
        
        // Start the game
        setInterval(function () {
            if (!gameOver) {
                movePlayer();
                moveZombies();
                checkCollision();
                spawnZombie();
            }
        }, 10);

// Function to move the player based on joystick position
        function movePlayer() {
            var playerX = playerElem.offsetLeft + joystickX / (joystickMaxDistance / playerSpeed);
            var playerY = playerElem.offsetTop + joystickY / (joystickMaxDistance / playerSpeed);
            
            if (playerX < 0) playerX = 0;
            else if (playerX + playerElem.offsetWidth > gameWidth) playerX = gameWidth - playerElem.offsetWidth;
            
            if (playerY < 0) playerY = 0;
            else if (playerY + playerElem.offsetHeight > gameHeight) playerY = gameHeight - playerElem.offsetHeight;
            
            playerElem.style.left = playerX + "px";
            playerElem.style.top = playerY + "px";
        }
        
        // Function to move the zombies towards the player
        function moveZombies() {
            for (var i = 0; i < zombies.length; i++) {
                var zombie = zombies[i];
                var deltaX = playerElem.offsetLeft - zombie.offsetLeft;
                var deltaY = playerElem.offsetTop - zombie.offsetTop;
                var angle = Math.atan2(deltaY, deltaX);
                var velocityX = Math.cos(angle) * zombieSpeed;
                var velocityY = Math.sin(angle) * zombieSpeed;
                
                zombie.style.left = (zombie.offsetLeft + velocityX) + "px";
                zombie.style.top = (zombie.offsetTop + velocityY) + "px";
            }
        }
        
        // Function to check collision between player, zombies, and walls
        function checkCollision() {
            for (var i = 0; i < zombies.length; i++) {
                var zombie = zombies[i];
                
                if (isColliding(playerElem, zombie)) {
                    gameOver = true;
                    alert("Game Over!");
                    break;
                }
                
                for (var j = 0; j < walls.length; j++) {
                    var wall = walls[j];
                    
                    if (isColliding(zombie, wall)) {
                        zombie.remove();
                        zombies.splice(i, 1);
                        i--;
                        break;
                    }
                }
            }
        }
        
        // Function to check if two elements are colliding
        function isColliding(elem1, elem2) {
            var rect1 = elem1.getBoundingClientRect();
            var rect2 = elem2.getBoundingClientRect();
            
            return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
        }
        
        // Function to spawn zombies at random positions
        function spawnZombie() {
            if (Math.random() < 0.01) {
                var zombie = document.createElement("div");
                zombie.classList.add("zombie");
                gameContainer.appendChild(zombie);
                
                var x = Math.floor(Math.random() * (gameWidth - zombie.offsetWidth));
                var y = Math.floor(Math.random() * (gameHeight - zombie.offsetHeight));
                zombie.style.left = x + "px";
                zombie.style.top = y + "px";
                
                zombies.push(zombie);
            }
        }
        
        // Function to build a wall in front of the player
        function buildWall() {
            var wall = document.createElement("div");
            wall.classList.add("wall");
            gameContainer.appendChild(wall);
            
            var playerX = playerElem.offsetLeft;
            var playerY = playerElem.offsetTop;
            
            if (joystickX === 0 && joystickY === 0) {
                // If joystick is not moved, build wall in front of player's default facing direction (up)
                wall.style.left = playerX + "px";
                wall.style.top = (playerY - wall.offsetHeight) + "px";
            } else {
                var angle = Math.atan2(joystickY, joystickX);
                var distanceFromPlayer = playerElem.offsetHeight + 5; // Place wall slightly in front of the player
                
                wall.style.left = (playerX + Math.cos(angle) * distanceFromPlayer) + "px";
                wall.style.top = (playerY + Math.sin(angle) * distanceFromPlayer - wall.offsetHeight) + "px";
            }
            
            walls.push(wall);
        }
    </script>
</body>
</html>
```

Please note that this is a basic implementation for demonstration purposes, and you can enhance it further with additional features, visual effects, and optimizations as per your requirements.