Watermelon rolling game's game

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

No:1860

1239

←

Prev Next

→

Watermelon rolling game
Developer User3423｜Date and time 23/6/19 9:20:19
Build time 160.156 sec｜Game capacity 3.704KB｜

Script

🍉

このゲームは、画面の下から上がってくるブロッコリーを避けながら、スイカを左右に移動していくゲームです。スコアは、時間が経つごとに1ずつ加算されていきます。ブロッコリーに当たるとゲームオーバーになり、再度プレイすることができます。

←

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スイカが転がるゲーム</title>
    <style>
      #game-area {
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: #a3c293;
      }
      #player {
        position: absolute;
        top: calc(95% - 4em);
        left: 50%;
        margin-left: -2em;
        width: 4em;
        height: 4em;
        border-radius: 50%;
        background-color: #f2c75c;
        text-align: center;
        line-height: 4em;
        font-size: 2em;
        color: #ffffff;
      }
      .obstacle {
        position: absolute;
        top: 0;
        width: 6em;
        height: 6em;
        border-radius: 50%;
        background-color: #e25b3b;
        text-align: center;
        line-height: 6em;
        font-size: 3em;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div id="game-area">
      <div id="player">🍉</div>
    </div>
    <script>
      let player = document.getElementById("player");
      let x = 50;
      let dx = 0;
      let obstacles = [];
      let score = 0;
      let scoreDisplay = document.createElement("div");
      scoreDisplay.style.position = "fixed";
      scoreDisplay.style.top = "1em";
      scoreDisplay.style.left = "1em";
      scoreDisplay.style.fontSize = "2em";
      scoreDisplay.style.color = "#ffffff";
      document.body.appendChild(scoreDisplay);
      function update() {
        x += dx;
        if (x < 0 || x > 100) {
          dx = 0;
        }
        player.style.left = x + "%";
        for (let i = 0; i < obstacles.length; i++) {
          let obstacle = obstacles[i];
          obstacle.style.top = obstacle.offsetTop + 1 + "px";
          if (obstacle.offsetTop > window.innerHeight) {
            obstacle.remove();
            obstacles.splice(i, 1);
            i--;
          } else if (checkCollision(player, obstacle)) {
            clearInterval(gameLoop);
            alert("ゲームオーバー! スコア: " + score);
            location.reload();
          }
        }
        if (Math.random() < 0.02) {
          let obstacle = document.createElement("div");
          obstacle.classList.add("obstacle");
          obstacle.innerText = "🥦";
          obstacle.style.left = Math.floor(Math.random() * 100) + "%";
          document.getElementById("game-area").appendChild(obstacle);
          obstacles.push(obstacle);
        }
        score++;
        scoreDisplay.innerText = "スコア: " + score;
      }
      function checkCollision(a, b) {
        let aRect = a.getBoundingClientRect();
        let bRect = b.getBoundingClientRect();
        return !(
          (aRect.bottom < bRect.top) ||
          (aRect.top > bRect.bottom) ||
          (aRect.right < bRect.left) ||
          (aRect.left > bRect.right)
        )
      }
      window.addEventListener("keydown", event => {
        if (event.key === "ArrowLeft") {
          dx = -1;
        } else if (event.key === "ArrowRight") {
          dx = 1;
        }
      });
      window.addEventListener("keyup", event => {
        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
          dx = 0;
        }
      });
      let gameLoop = setInterval(update, 1000/60);
    </script>
  </body>
</html>