Make a game about shooting zombies's game

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

No:9297

←

Prev Next

→

Make a game about shooting zombies
Developer User4324｜Date and time 23/7/23 4:16:19
Build time 32.16 sec｜Game capacity 5.417KB｜

Script

Sure, I can help you create a simple game about shooting zombies using HTML and JavaScript. Here's an example implementation:

This implementation demonstrates a simple game where the player controls a character (green rectangle) using left and right arrow keys. The objective is to avoid colliding with zombies (red rectangles) that continuously spawn from the top and descend downwards. The game ends when the player collides with a zombie, and the score is displayed on the canvas. You can copy and paste the above code into a single HTML file and open it in a web browser to play the game. Feel free to modify and enhance the game according to your preferences.

←

Prev　Next

→ 　

Back　

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

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

Sure, I can help you create a simple game about shooting zombies using HTML and JavaScript. Here's an example implementation:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Zombie Shooter Game</title>
    <style>
        #game-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background-color: #111;
        }
        
        #canvas {
          border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <canvas id="canvas" width="800" height="400"></canvas>
    </div>

// Game state
            let score = 0;
            let gameOver = false;

// Player object
            const player = {
                x: canvas.width / 2,
                y: canvas.height - 30,
                width: 40,
                height: 40,
                color: "#00ff00",
                draw: function() {
                    ctx.fillStyle = this.color;
                    ctx.fillRect(this.x, this.y, this.width, this.height);
                }
            };

// Zombie object
            class Zombie {
                constructor(x, y, speed) {
                    this.x = x;
                    this.y = y;
                    this.width = 40;
                    this.height = 40;
                    this.color = "#ff0000";
                    this.speed = speed;
                }

draw() {
                    ctx.fillStyle = this.color;
                    ctx.fillRect(this.x, this.y, this.width, this.height);
                }

update() {
                    this.y += this.speed;
                }
            }

// Array to store zombie objects
            let zombies = [];

function spawnZombies() {
                const speed = 1 + score / 10;
                const xPos = Math.random() * (canvas.width - 40);
                zombies.push(new Zombie(xPos, 0, speed));
            }

// Event listener for player's movement
            document.addEventListener("keydown", movePlayer);

// Function to handle collisions between player and zombies
            function detectCollision(zombie) {
                return (
                    player.x < zombie.x + zombie.width &&
                    player.x + player.width > zombie.x &&
                    player.y < zombie.y + zombie.height &&
                    player.y + player.height > zombie.y
                );
            }

// Game loop
            function gameLoop() {
                if (!gameOver) {
                    // Clear canvas
                    ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update and draw player
                    player.draw();

// Spawn zombies at regular intervals
                    if (Math.random() < 0.01) {
                        spawnZombies();
                    }

// Update and draw zombies
                    zombies.forEach((zombie, index) => {
                        zombie.update();
                        zombie.draw();

// Check for collision with player
                        if (detectCollision(zombie)) {
                            gameOver = true;
                        }

// Remove off-screen zombies
                        if (zombie.y > canvas.height) {
                            zombies.splice(index, 1);
                            score++;
                        }
                    });

// Update score
                    ctx.font = "20px Arial";
                    ctx.fillStyle = "#fff";
                    ctx.fillText("Score: " + score, 10, 30);

// Request next animation frame
                    requestAnimationFrame(gameLoop);
                } else {
                    // Display game over message
                    ctx.font = "50px Arial";
                    ctx.fillStyle = "#fff";
                    ctx.fillText("Game Over", canvas.width / 2 - 140, canvas.height / 2 - 20);
                }
            }

// Start the game loop
            gameLoop();
        });
    </script>
</body>
</html>
```

You can copy and paste the above code into a single HTML file and open it in a web browser to play the game. Feel free to modify and enhance the game according to your preferences.