Zombie shooter with weapons's game

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

No:40473

←

Prev Next

→

Zombie shooter with weapons
Developer User18141｜Date and time 24/2/3 2:35:28
Build time 29.516 sec｜Game capacity 7.309KB｜

Script

Sure! Here's an example of a simple zombie shooter game implemented as a single HTML file using JavaScript and pictograms. You can play the game by opening the HTML file in a web browser on your smartphone.

To play the game, copy the above code and save it as a single file with a ".html" extension, then open the file in a web browser on your smartphone. You can control the player character using touch or mouse input, move away from the zombies, and shoot them using the on-screen buttons or by pressing the mouse button. The score keeps track of how many zombies you have successfully shot. The game ends if a zombie comes in contact with the player. Have fun!

←

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>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // JavaScript code
        // Game variables
        var canvas;
        var canvasContext;
        var playerX = 200;
        var playerY = 200;
        var playerSpeed = 5;
        var zombies = [{ x: 50, y: 50, speedX: 2, speedY: 2 }];
        var bulletX;
        var bulletY;
        var bulletSpeed = 10;
        var isBulletFired = false;
        var score = 0;

// Initialize the game
        function gameInit() {
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext("2d");

// Event listeners
            canvas.addEventListener("mousemove", updatePlayerPosition);
            canvas.addEventListener("mousedown", fireBullet);

// Game loop
            setInterval(gameLoop, 30);
        }

// Update the game state
        function gameLoop() {
            moveEverything();
            drawEverything();
        }

// Move player, zombies and bullet
        function moveEverything() {
            movePlayer();
            moveZombies();
            if (isBulletFired) {
                moveBullet();
            }
        }

// Draw player, zombies and bullet
        function drawEverything() {
            // Clear canvas
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
            drawPictogram("👮", playerX, playerY);

// Draw zombies
            for (var i = 0; i < zombies.length; i++) {
                var zombie = zombies[i];
                drawPictogram("🧟", zombie.x, zombie.y);
            }

// Draw bullet if fired
            if (isBulletFired) {
                drawPictogram("💥", bulletX, bulletY);
            }

// Draw score
            canvasContext.font = "20px Arial";
            canvasContext.fillText("Score: " + score, 10, 30);
        }

// Move player based on mouse position
        function updatePlayerPosition(event) {
            var rect = canvas.getBoundingClientRect();
            var root = document.documentElement;
            var mouseX = event.clientX - rect.left - root.scrollLeft;
            var mouseY = event.clientY - rect.top - root.scrollTop;

playerX = mouseX;
            playerY = mouseY;
        }

// Move player with WASD or arrow keys
        function movePlayer() {
            if (keyHeld("W") || keyHeld("ArrowUp")) {
                playerY -= playerSpeed;
            }
            if (keyHeld("S") || keyHeld("ArrowDown")) {
                playerY += playerSpeed;
            }
            if (keyHeld("A") || keyHeld("ArrowLeft")) {
                playerX -= playerSpeed;
            }
            if (keyHeld("D") || keyHeld("ArrowRight")) {
                playerX += playerSpeed;
            }

// Prevent player from going outside the canvas
            if (playerX < 0) {
                playerX = 0;
            }
            if (playerX > canvas.width) {
                playerX = canvas.width;
            }
            if (playerY < 0) {
                playerY = 0;
            }
            if (playerY > canvas.height) {
                playerY = canvas.height;
            }
        }

// Move zombies towards the player
        function moveZombies() {
            for (var i = 0; i < zombies.length; i++) {
                var zombie = zombies[i];

// Calculate direction towards the player
                var dx = playerX - zombie.x;
                var dy = playerY - zombie.y;
                var distance = Math.sqrt(dx * dx + dy * dy);
                var directionX = dx / distance;
                var directionY = dy / distance;

// Move zombie
                zombie.x += directionX * zombie.speedX;
                zombie.y += directionY * zombie.speedY;

// Check for collision with player
                if (distance < 20) {
                    gameOver();
                }
            }
        }

// Fire a bullet towards the mouse position
        function fireBullet() {
            if (!isBulletFired) {
                bulletX = playerX;
                bulletY = playerY;
                isBulletFired = true;
            }
        }

// Move the fired bullet
        function moveBullet() {
            bulletY -= bulletSpeed;

// Check for collision with zombies
            for (var i = 0; i < zombies.length; i++) {
                var zombie = zombies[i];
                var dx = bulletX - zombie.x;
                var dy = bulletY - zombie.y;
                var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < 20) {
                    // Bullet hit a zombie, remove zombie and increase score
                    zombies.splice(i, 1);
                    i--;
                    score += 10;

// Reset bullet
                    isBulletFired = false;
                    bulletX = -10;
                    bulletY = -10;

break;
                }
            }

// Check if the bullet is off the screen
            if (bulletY < 0) {
                // Reset bullet
                isBulletFired = false;
                bulletX = -10;
                bulletY = -10;
            }
        }

// Draw pictogram at given coordinates
        function drawPictogram(pictogram, x, y) {
            canvasContext.fillText(pictogram, x, y);
        }

// Check if a key is held down
        var heldKeys = {};

function keyHeld(key) {
            return heldKeys[key.toLowerCase()];
        }

window.addEventListener('keydown', function (e) {
            heldKeys[e.key.toLowerCase()] = true;
        });

window.addEventListener('keyup', function (e) {
            heldKeys[e.key.toLowerCase()] = false;
        });

// Game over
        function gameOver() {
            // Stop the game loop
            clearInterval(gameLoopId);

// Show game over message
            canvasContext.font = "30px Arial";
            canvasContext.textAlign = "center";
            canvasContext.fillText("Game Over", canvas.width / 2, canvas.height / 2);
        }

// Start the game
        gameInit();
    </script>
</body>

</html>
```