AI game creator

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

No:40350

←

Prev Next

→

Cloud parkour
Developer User18064｜Date and time 24/2/2 9:10:27
Build time 11.086 sec｜Game capacity 2.993KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Cloud Parkour</title>
  <style>
    body {
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

#player {
      position: absolute;
      height: 50px;
      width: 50px;
      background-color: blue;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

.cloud {
      position: absolute;
      height: 30px;
      width: 100px;
      background-color: white;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <script>
    // Game Variables
    var player;
    var score;
    var clouds;

// Game Initialization
    function initGame() {
      player = document.createElement("div");
      player.id = "player";

score = 0;

clouds = [];
      createClouds(10);

document.body.appendChild(player);
      setScore();
    }

// Create Clouds
    function createClouds(numClouds) {
      var screenWidth = window.innerWidth;
      var screenHeight = window.innerHeight;

for (var i = 0; i < numClouds; i++) {
        var cloud = document.createElement("div");
        cloud.className = "cloud";
        cloud.style.left = Math.floor(Math.random() * screenWidth) + "px";
        cloud.style.top = Math.floor(Math.random() * screenHeight) + "px";

clouds.push(cloud);
        document.body.appendChild(cloud);
      }
    }

// Move Player
    function movePlayer(event) {
      var left = player.offsetLeft;
      var top = player.offsetTop;

if (event.key === "ArrowUp") {
        top -= 10;
      } else if (event.key === "ArrowDown") {
        top += 10;
      } else if (event.key === "ArrowLeft") {
        left -= 10;
      } else if (event.key === "ArrowRight") {
        left += 10;
      }

player.style.left = left + "px";
      player.style.top = top + "px";

checkCollision();
    }

// Check Collision with Clouds
    function checkCollision() {
      for (var i = 0; i < clouds.length; i++) {
        var cloud = clouds[i];
        if (isColliding(player, cloud)) {
          document.body.removeChild(cloud);
          clouds.splice(i, 1);
          score += 10;
          setScore();
          break;
        }
      }

if (clouds.length === 0) {
        endGame();
      }
    }

// Check if Elements are Colliding
    function isColliding(elem1, elem2) {
      var rect1 = elem1.getBoundingClientRect();
      var rect2 = elem2.getBoundingClientRect();

return (
        rect1.top < rect2.bottom &&
        rect1.bottom > rect2.top &&
        rect1.left < rect2.right &&
        rect1.right > rect2.left
      );
    }

// Set Score
    function setScore() {
      document.title = "Score: " + score;
    }

// End Game
    function endGame() {
      alert("Game Over! Your score is " + score);
      location.reload();
    }

// Event Listeners
    document.addEventListener("DOMContentLoaded", initGame);
    document.addEventListener("keydown", movePlayer);
  </script>
</body>
</html>