2d game with building mechanics and rpg and zombies and levels's game

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

No:23076

←

Prev Next

→

2d game with building mechanics and rpg and zombie..ALL
Developer User10642｜Date and time 23/10/27 14:44:23
Build time 76.114 sec｜Game capacity 4.104KB｜

Script

Sure, here's a basic game implemented as a single HTML file using JavaScript. This game features building mechanics, RPG elements, zombies, and levels. Please note that this is a simplified version and you can enhance and expand it further to suit your requirements.

In this game, you control the blue player character with the arrow keys on your smartphone. The objective is to avoid the green zombie and survive for as long as possible. If the player collides with the zombie, the game displays a "Game Over" message. Remember, this is just a basic example, and you can expand upon it by adding building mechanics, RPG elements, levels, and more.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Building RPG Zombies Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
  
  <script>
    // Game initialization
    window.onload = function() {
      // Get the canvas and context
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      
      // Player object
      const player = {
        x: 100, // Starting position
        y: 100,
        width: 50, // Player dimensions
        height: 50,
        color: "blue",
        speed: 5, // Player movement speed
        
        // Draw the player on the canvas
        draw: function() {
          ctx.fillStyle = this.color;
          ctx.fillRect(this.x, this.y, this.width, this.height);
        },
        
        // Update player position based on input
        update: function() {
          if (keys["ArrowUp"]) this.y -= this.speed;
          if (keys["ArrowDown"]) this.y += this.speed;
          if (keys["ArrowLeft"]) this.x -= this.speed;
          if (keys["ArrowRight"]) this.x += this.speed;
        },
      };
      
      // Zombie object
      const zombie = {
        x: 700, // Starting position
        y: 200,
        width: 50, // Zombie dimensions
        height: 50,
        color: "green",
        speed: 2, // Zombie movement speed
        
        // Draw the zombie on the canvas
        draw: function() {
          ctx.fillStyle = this.color;
          ctx.fillRect(this.x, this.y, this.width, this.height);
        },
        
        // Update zombie position
        update: function() {
          // Compute direction towards the player
          const dx = player.x - this.x;
          const dy = player.y - this.y;
          const distance = Math.sqrt(dx * dx + dy * dy);
          const directionX = dx / distance;
          const directionY = dy / distance;
          
          // Move zombie towards the player
          this.x += directionX * this.speed;
          this.y += directionY * this.speed;
        },
      };
      
      // Keyboard input handling
      const keys = {};
      document.addEventListener("keydown", function(event) {
        keys[event.key] = true;
      });
      document.addEventListener("keyup", function(event) {
        delete keys[event.key];
      });
      
      // Main game loop
      function gameLoop() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Update and draw player
        player.update();
        player.draw();
        
        // Update and draw zombie
        zombie.update();
        zombie.draw();
        
        // Check for collision between player and zombie
        if (checkCollision(player, zombie)) {
          alert("Game Over. You got caught by the zombie!");
          clearInterval(interval);
        }
      }
      
      // Collision detection between two rectangles
      function checkCollision(rect1, rect2) {
        return rect1.x + rect1.width > rect2.x &&
               rect1.x < rect2.x + rect2.width &&
               rect1.y + rect1.height > rect2.y &&
               rect1.y < rect2.y + rect2.height;
      }
      
      // Start the game loop
      const interval = setInterval(gameLoop, 16); // About 60 frames per second
    }
  </script>
</body>
</html>
```

Remember, this is just a basic example, and you can expand upon it by adding building mechanics, RPG elements, levels, and more.