Escape the Dinosaurs's game

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

No:14957

←

Prev Next

→

Escape the Dinosaurs
Developer User6446｜Date and time 23/9/5 5:30:23
Build time 29.119 sec｜Game capacity 2.961KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Escape the Dinosaurs</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Game variables
    let canvas = document.getElementById("gameCanvas");
    let context = canvas.getContext("2d");
    let player = {
      x: 50,
      y: 50,
      width: 50,
      height: 50,
      speed: 5
    };
    let dinos = [
      { x: 200, y: 200, width: 50, height: 50, speed: 2 },
      { x: 300, y: 100, width: 50, height: 50, speed: 3 },
      { x: 100, y: 300, width: 50, height: 50, speed: 4 }
    ];

// Event handlers
    document.addEventListener("keydown", handleKeyDown);

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

// Update game state
    function update() {
      // Move player
      if (player.up) player.y -= player.speed;
      if (player.down) player.y += player.speed;
      if (player.left) player.x -= player.speed;
      if (player.right) player.x += player.speed;

// Check collision between player and dinosaurs
      for (let i = 0; i < dinos.length; i++) {
        let dino = dinos[i];
        if (checkCollision(player, dino)) {
          alert("Game Over!");
          resetGame();
        }
      }
    }

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

// Draw player
      context.fillStyle = "blue";
      context.fillRect(player.x, player.y, player.width, player.height);

// Draw dinosaurs
      for (let i = 0; i < dinos.length; i++) {
        let dino = dinos[i];
        context.fillStyle = "green";
        context.fillRect(dino.x, dino.y, dino.width, dino.height);
      }
    }

// Helper function to check collision between two rectangles
    function checkCollision(rect1, rect2) {
      return rect1.x < rect2.x + rect2.width &&
             rect1.x + rect1.width > rect2.x &&
             rect1.y < rect2.y + rect2.height &&
             rect1.y + rect1.height > rect2.y;
    }

// Event handler for keydown event
    function handleKeyDown(event) {
      if (event.key === "ArrowUp") player.up = true;
      if (event.key === "ArrowDown") player.down = true;
      if (event.key === "ArrowLeft") player.left = true;
      if (event.key === "ArrowRight") player.right = true;
    }

// Event handler for keyup event
    function handleKeyUp(event) {
      if (event.key === "ArrowUp") player.up = false;
      if (event.key === "ArrowDown") player.down = false;
      if (event.key === "ArrowLeft") player.left = false;
      if (event.key === "ArrowRight") player.right = false;
    }

// Reset game
    function resetGame() {
      player.x = 50;
      player.y = 50;
    }

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