Grab milk and also avoid obstacles's game

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

No:23419

←

Prev Next

→

Grab milk and also avoid obstacles
Developer User10854｜Date and time 23/10/30 13:05:34
Build time 78.783 sec｜Game capacity 2.751KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Grab Milk - Avoid Obstacles</title>
  <style>
    #player {
      position: relative;
      top: 50%;
      left: 50%;
      width: 50px;
      height: 50px;
      transform: translate(-50%, -50%);
      background-color: blue;
    }
    .obstacle {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>
<body>
  <script>
    // Game variables
    let player;
    let obstacles = [];
    let gameInterval;
    let score = 0;
    const gameSpeed = 4;

// Function to create a new obstacle
    function createObstacle() {
      const obstacle = document.createElement("div");
      obstacle.classList.add("obstacle");
      obstacle.style.left = "100%";
      obstacle.style.top = Math.floor(Math.random() * (window.innerHeight - 50)) + "px";
      document.body.appendChild(obstacle);
      obstacles.push(obstacle);
    }

// Function to move obstacles and check for collisions
    function moveObstacles() {
      for (let i = 0; i < obstacles.length; i++) {
        const obstacle = obstacles[i];
        const obstaclePosition = obstacle.getBoundingClientRect();
        const playerPosition = player.getBoundingClientRect();

// Check for collision with player
        if (
          obstaclePosition.left < playerPosition.right &&
          obstaclePosition.right > playerPosition.left &&
          obstaclePosition.top < playerPosition.bottom &&
          obstaclePosition.bottom > playerPosition.top
        ) {
          endGame();
        }

// Move the obstacle
        obstacle.style.left = obstaclePosition.left - gameSpeed + "px";

// Remove obstacle if it goes out of the screen
        if (obstaclePosition.left < -50) {
          obstacles.splice(i, 1);
          document.body.removeChild(obstacle);
          score++;
        }
      }
    }

// Function to start the game
    function startGame() {
      // Create player
      player = document.createElement("div");
      player.id = "player";
      document.body.appendChild(player);

// Create obstacles every second
      gameInterval = setInterval(function() {
        createObstacle();
      }, 1000);

// Update game state every frame
      requestAnimationFrame(updateGame);
    }

// Function to update game state
    function updateGame() {
      moveObstacles();
      requestAnimationFrame(updateGame);
    }

// Function to end the game
    function endGame() {
      clearInterval(gameInterval);
      alert("Game Over! Your score is: " + score);
      location.reload();
    }

// Start the game when the page loads
    window.onload = function() {
      startGame();
    };
  </script>
</body>
</html>