2d game with timer how long you survived and when you die it sees Game Over and zombies and levels with controls up down left right's game

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

No:23079

←

Prev Next

→

2d game with timer how long you survived and when ..ALL
Developer User10642｜Date and time 23/10/27 14:51:55
Build time 97.536 sec｜Game capacity 5.336KB｜

Script

Sure! Here's an example of a simple game written in a single HTML file using JavaScript and enclosed in script tags. It's a 2D game where you control a character trying to avoid zombies. The game will display a timer showing how long you've survived, and when you die, it will show "Game Over" on the screen.

To play the game, you can copy and paste the above code into a blank HTML file and save it. Then, open the file in a web browser on your smartphone. The game will start automatically, and you can use the arrow keys or the on-screen controls of your smartphone to move the character (up, down, left, right) and try to avoid the zombies. The game will show a timer indicating how long you've survived, and when you collide with a zombie, it will display "Game Over" on the screen.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Zombie Survival Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

// Character variables
    var characterX = 200;
    var characterY = 150;
    var characterSpeed = 5;

// Zombie variables
    var zombieSpeed = 2;
    var zombiesNumber = 7;
    
    // Control variables
    var upPressed = false;
    var downPressed = false;
    var leftPressed = false;
    var rightPressed = false;

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

// Set up character
      character = {
        x: characterX,
        y: characterY,
        width: 20,
        height: 20
      };

// Set up zombies
      zombies = [];
      for (var i = 0; i < zombiesNumber; i++) {
        zombies.push({
          x: Math.random() * (canvas.width - 30),
          y: Math.random() * (canvas.height - 30),
          width: 20,
          height: 20
        });
      }

// Set up event listeners
      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

// Start the game loop
      gameLoop();
    }

// Handle key down events
    function keyDownHandler(event) {
      if (event.keyCode === 38) {
        upPressed = true;
      } else if (event.keyCode === 40) {
        downPressed = true;
      } else if (event.keyCode === 37) {
        leftPressed = true;
      } else if (event.keyCode === 39) {
        rightPressed = true;
      }
    }

// Handle key up events
    function keyUpHandler(event) {
      if (event.keyCode === 38) {
        upPressed = false;
      } else if (event.keyCode === 40) {
        downPressed = false;
      } else if (event.keyCode === 37) {
        leftPressed = false;
      } else if (event.keyCode === 39) {
        rightPressed = false;
      }
    }

// Update the game state
    function update() {
      if (!gameover) {
        // Update character position based on controls
        if (upPressed && character.y > 0) {
          character.y -= characterSpeed;
        } else if (downPressed && character.y < canvas.height - character.height) {
          character.y += characterSpeed;
        }
        if (leftPressed && character.x > 0) {
          character.x -= characterSpeed;
        } else if (rightPressed && character.x < canvas.width - character.width) {
          character.x += characterSpeed;
        }

// Update zombies position
        for (var i = 0; i < zombies.length; i++) {
          zombies[i].y += zombieSpeed;
          if (zombies[i].y > canvas.height) {
            zombies[i].y = -30;
            zombies[i].x = Math.random() * (canvas.width - 30);
          }

// Check collision with character
          if (
            character.x < zombies[i].x + zombies[i].width &&
            character.x + character.width > zombies[i].x &&
            character.y < zombies[i].y + zombies[i].height &&
            character.y + character.height > zombies[i].y
          ) {
            gameover = true;
          }
        }

// Update timer
        timer++;
      }
    }

// Render the game
    function render() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw character
      context.fillStyle = "#0000ff";
      context.fillRect(character.x, character.y, character.width, character.height);

// Draw zombies
      context.fillStyle = "#ff0000";
      for (var i = 0; i < zombies.length; i++) {
        context.fillRect(zombies[i].x, zombies[i].y, zombies[i].width, zombies[i].height);
      }

// Draw timer
      context.fillStyle = "#000000";
      context.font = "16px Arial";
      context.fillText("Time: " + timer, 10, 20);

// Draw game over message if game is over
      if (gameover) {
        context.fillStyle = "#ff0000";
        context.font = "30px Arial";
        context.fillText("Game Over", canvas.width/2 - 80, canvas.height/2);
      }
    }

// The game loop
    function gameLoop() {
      update();
      render();
      requestAnimationFrame(gameLoop);
    }

// Start the game
    init();
  </script>
</body>
</html>
```