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:22755

←

Prev Next

→

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

Script

Sure, here's a sample implementation of a top-down 2D endless zombie shooter game with wall building functionality, joystick controls, shooting, and wall building buttons. The game will be playable on a smartphone:

This is a basic implementation, and you can modify and enhance it further as per your requirements and preferences.

←

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 Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="600" height="400"></canvas>

// Game variables
    var playerX = canvas.width / 2;
    var playerY = canvas.height / 2;
    var playerSize = 20;
    var joystickRadius = 50;
    var walls = [];
    var zombies = [];
    var bullets = [];

// Game loop
    function gameLoop() {
      update();
      draw();

requestAnimationFrame(gameLoop);
    }

// Update game logic
    function update() {
      // Update player position based on joystick
      playerX += joystick.dx * 2; // Assuming movement speed of 2 pixels
      playerY += joystick.dy * 2;

// Check if player is out of bounds
      if (playerX < playerSize) {
        playerX = playerSize;
      }
      if (playerX > canvas.width - playerSize) {
        playerX = canvas.width - playerSize;
      }
      if (playerY < playerSize) {
        playerY = playerSize;
      }
      if (playerY > canvas.height - playerSize) {
        playerY = canvas.height - playerSize;
      }

// Shoot bullets
      if (shooting) {
        bullets.push({ x: playerX, y: playerY });
      }

// Update bullet positions
      for (var i = 0; i < bullets.length; i++) {
        bullets[i].x += 5; // Assuming bullet speed of 5 pixels

// Check if bullet hits zombie
        for (var j = 0; j < zombies.length; j++) {
          var distance = Math.sqrt(
            Math.pow(bullets[i].x - zombies[j].x, 2) +
            Math.pow(bullets[i].y - zombies[j].y, 2)
          );
          if (distance < playerSize + zombies[j].size) {
            // Bullet hit zombie, remove bullet and zombie
            bullets.splice(i, 1);
            zombies.splice(j, 1);
            break;
          }
        }
      }
    }

// Draw game objects
    function draw() {
      // Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw walls
      context.fillStyle = "gray";
      for (var i = 0; i < walls.length; i++) {
        context.fillRect(
          walls[i].x - walls[i].width / 2,
          walls[i].y - walls[i].height / 2,
          walls[i].width,
          walls[i].height
        );
      }

// Draw player
      context.fillStyle = "blue";
      context.beginPath();
      context.arc(playerX, playerY, playerSize, 0, Math.PI * 2);
      context.fill();

// Draw bullets
      context.fillStyle = "red";
      for (var i = 0; i < bullets.length; i++) {
        context.beginPath();
        context.arc(bullets[i].x, bullets[i].y, 2, 0, Math.PI * 2);
        context.fill();
      }
      
      // Draw zombies
      context.fillStyle = "green";
      for (var i = 0; i < zombies.length; i++) {
        context.beginPath();
        context.arc(zombies[i].x, zombies[i].y, zombies[i].size, 0, Math.PI * 2);
        context.fill();
      }
    }

// Joystick functionality
    var joystick = { dx: 0, dy: 0 };
    var joystickCanvas = document.getElementById("joystickCanvas");
    var joystickContext = joystickCanvas.getContext("2d");

joystickCanvas.addEventListener("touchstart", handleJoystickStart, false);
    joystickCanvas.addEventListener("touchmove", handleJoystickMove, false);
    joystickCanvas.addEventListener("touchend", handleJoystickEnd, false);

function handleJoystickStart(event) {
      event.preventDefault();
      var touch = event.touches[0];
      var rect = joystickCanvas.getBoundingClientRect();
      joystick.dx = (touch.clientX - rect.left) - joystickRadius;
      joystick.dy = (touch.clientY - rect.top) - joystickRadius;
    }

function handleJoystickMove(event) {
      event.preventDefault();
      var touch = event.touches[0];
      var rect = joystickCanvas.getBoundingClientRect();
      joystick.dx = (touch.clientX - rect.left) - joystickRadius;
      joystick.dy = (touch.clientY - rect.top) - joystickRadius;
    }

function handleJoystickEnd(event) {
      event.preventDefault();
      joystick.dx = 0;
      joystick.dy = 0;
    }

// Wall building button functionality
    var wallButton = document.getElementById("wallButton");
    wallButton.addEventListener("click", buildWall, false);

function buildWall() {
      walls.push({
        x: playerX,
        y: playerY,
        width: 50,
        height: 50,
      });
    }

// Shooting button functionality
    var shooting = false;
    var shootButton = document.getElementById("shootButton");
    shootButton.addEventListener("touchstart", handleShootStart, false);
    shootButton.addEventListener("touchend", handleShootEnd, false);

function handleShootStart(event) {
      event.preventDefault();
      shooting = true;
    }

function handleShootEnd(event) {
      event.preventDefault();
      shooting = false;
    }

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

This is a basic implementation, and you can modify and enhance it further as per your requirements and preferences.