A zombie shooter game, where when you click the screen, it shoots a bullet and a joystick that controls the movement and zombies, have three health, and when they get hit by a bullet they die's game | AI game creator

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

No:33097

36

A zombie shooter game, where when you click the sc..ALL
Developer User15649｜Date and time 24/1/2 16:23:17
Build time 55.813 sec｜Game capacity 5.698KB｜

Sure! Here's an example of a zombie shooter game implemented as a single HTML file using JavaScript. The game includes shooting bullets and a joystick for movement. It uses pictograms and has zombies with three health points, which die when hit by a bullet. Note: This is a simplified version of the game and may require further enhancements for a complete gameplay experience, including animations and scoring.

To play the game, save the above code as a `.html` file and open it in a web browser that supports JavaScript. You can then interact with the game by clicking on the screen to shoot bullets and using the joystick to control the player's movement.

→ 　

0　

0　

[PR]現在の本の売れ筋ランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a zombie shooter game implemented as a single HTML file using JavaScript. The game includes shooting bullets and a joystick for movement. It uses pictograms and has zombies with three health points, which die when hit by a bullet.

Note: This is a simplified version of the game and may require further enhancements for a complete gameplay experience, including animations and scoring.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Zombie Shooter Game</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    #game {
      position: relative;
      height: 100vh;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #player, .bullet, .zombie {
      position: absolute;
      width: 30px;
      height: 30px;
      background: #fff;
      border-radius: 50%;
    }
    
    #player {
      background: #0f0;
    }
    
    .bullet {
      background: #f00;
    }
    
    .zombie {
      background: #f90;
    }
  </style>
</head>
<body>

<div id="game">
  <div id="player"></div>
</div>

<script>
  // Joystick Control
  var joystick = {
    x: 0,
    y: 0,
    element: document.getElementById('game'),
    init: function() {
      this.element.addEventListener('mousedown', this.handleStart.bind(this), false);
      this.element.addEventListener('mousemove', this.handleMove.bind(this), false);
      this.element.addEventListener('mouseup', this.handleEnd.bind(this), false);
      this.element.addEventListener('touchstart', this.handleStart.bind(this), false);
      this.element.addEventListener('touchmove', this.handleMove.bind(this), false);
      this.element.addEventListener('touchend', this.handleEnd.bind(this), false);
    },
    handleStart: function(event) {
      event.preventDefault();
      var touch = event.touches ? event.touches[0] : event;
      this.setPosition(touch.pageX, touch.pageY);
    },
    handleMove: function(event) {
      event.preventDefault();
      var touch = event.touches ? event.touches[0] : event;
      this.setPosition(touch.pageX, touch.pageY);
    },
    handleEnd: function(event) {
      event.preventDefault();
      this.resetPosition();
    },
    setPosition: function(x, y) {
      this.x = x;
      this.y = y;
    },
    resetPosition: function() {
      this.x = 0;
      this.y = 0;
    }
  };
  
  // Bullet Shooting
  var bullets = [];
  var bulletSpeed = 5;
  function shootBullet(x, y) {
    var bullet = document.createElement('div');
    bullet.className = 'bullet';
    bullet.style.left = x + 'px';
    bullet.style.top = y + 'px';
    document.body.appendChild(bullet);
    
    bullets.push({
      element: bullet,
      x: x,
      y: y
    });
  }
  
  function updateBullets() {
    for (var i = 0; i < bullets.length; i++) {
      var bullet = bullets[i];
      bullet.y -= bulletSpeed;
      bullet.element.style.top = bullet.y + 'px';
      
      if (bullet.y < 0) {
        bullets.splice(i, 1);
        document.body.removeChild(bullet.element);
      }
    }
  }
  
  // Zombie
  var zombies = [];
  
  function addZombie() {
    var zombie = document.createElement('div');
    zombie.className = 'zombie';
    zombie.style.left = getRandomPosition() + 'px';
    zombie.style.top = '100%';
    document.body.appendChild(zombie);
    
    zombies.push({
      element: zombie,
      x: parseInt(zombie.style.left),
      y: parseInt(zombie.style.top),
      health: 3
    });
  }
  
  function updateZombies() {
    for (var i = 0; i < zombies.length; i++) {
      var zombie = zombies[i];
      zombie.y -= 1;
      zombie.element.style.top = zombie.y + 'px';
      
      if (zombie.y < 0) {
        zombies.splice(i, 1);
        document.body.removeChild(zombie.element);
      }
    }
  }
  
  // Game Loop
  function gameLoop() {
    var player = document.getElementById('player');
    var playerX = player.offsetLeft + 15;
    var playerY = player.offsetTop + 15;
    
    var joystickX = joystick.x;
    var joystickY = joystick.y;
    
    // Move player with joystick
    if (joystickX !== 0 || joystickY !== 0) {
      player.style.left = joystickX - 15 + 'px';
      player.style.top = joystickY - 15 + 'px';
    }
    
    // Shoot bullet on click
    if (shooting) {
      shootBullet(playerX, playerY);
      shooting = false;
    }
    
    // Check bullet collision with zombies
    for (var i = 0; i < bullets.length; i++) {
      var bullet = bullets[i];
      for (var j = 0; j < zombies.length; j++) {
        var zombie = zombies[j];
        if (
          bullet.y >= zombie.y - 15 &&
          bullet.y <= zombie.y + 15 &&
          bullet.x >= zombie.x - 15 &&
          bullet.x <= zombie.x + 15
        ) {
          zombie.health--;
          
          if (zombie.health <= 0) {
            zombies.splice(j, 1);
            document.body.removeChild(zombie.element);
          }
          
          bullets.splice(i, 1);
          document.body.removeChild(bullet.element);
          break;
        }
      }
    }
    
    updateBullets();
    updateZombies();
    
    requestAnimationFrame(gameLoop);
  }
  
  function getRandomPosition() {
    return Math.floor(Math.random() * window.innerWidth);
  }
  
  // Game initialization
  window.addEventListener('load', function() {
    joystick.init();
    gameLoop();
    setInterval(addZombie, 1500);
  });
</script>
</body>
</html>
```

To play the game, save the above code as a `.html` file and open it in a web browser that supports JavaScript. You can then interact with the game by clicking on the screen to shoot bullets and using the joystick to control the player's movement.