A multiplayer side scrolling rpg to hunt battle and trade monsters's game

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

No:40732

←

Prev Next

→

A multiplayer side scrolling rpg to hunt battle an..ALL
Developer User18234｜Date and time 24/2/4 0:25:10
Build time 9.586 sec｜Game capacity 2.564KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Monster Hunter RPG</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>

let playerX = 50;
    let playerY = canvas.height / 2;
    let playerWidth = 50;
    let playerHeight = 50;

let monsters = [];
    let monsterWidth = 30;
    let monsterHeight = 30;
    let monsterSpeed = 3;

let score = 0;

// Handle player movement
    function movePlayer(event) {
      if (event.key === "ArrowUp" && playerY > 0) {
        playerY -= 10;
      } else if (event.key === "ArrowDown" && playerY + playerHeight < canvas.height) {
        playerY += 10;
      }
    }

// Generate random monsters
    function generateMonster() {
      const monsterY = Math.floor(Math.random() * (canvas.height - monsterHeight));
      const monster = {
        x: canvas.width,
        y: monsterY,
      };
      monsters.push(monster);
    }

// Update game objects
    function update() {
      // Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      context.fillStyle = "blue";
      context.fillRect(playerX, playerY, playerWidth, playerHeight);

// Draw monsters
      context.fillStyle = "red";
      monsters.forEach(function (monster) {
        context.fillRect(monster.x, monster.y, monsterWidth, monsterHeight);
        monster.x -= monsterSpeed;

// Check collision with player
        if (
          playerX < monster.x + monsterWidth &&
          playerX + playerWidth > monster.x &&
          playerY < monster.y + monsterHeight &&
          playerY + playerHeight > monster.y
        ) {
          // Collision detected
          score++;
          monsters = monsters.filter(function (mon) {
            return mon !== monster;
          });
        }
      });

// Display score
      context.fillStyle = "black";
      context.font = "24px Arial";
      context.fillText("Score: " + score, 10, 30);
    }

// Game loop
    function gameLoop() {
      // Generate new monsters randomly
      if (Math.random() < 0.02) {
        generateMonster();
      }

update();
      requestAnimationFrame(gameLoop);
    }

// Start the game
    gameLoop();

// Event listener for player movement
    document.addEventListener("keydown", movePlayer);
  </script>
</body>
</html>