Bus gas explosion🚌⛽️💣💥's game

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

No:6862

181

←

Prev Next

→

Bus gas explosion🚌⛽️💣💥
Developer User3840｜Date and time 23/7/4 1:04:48
Build time 37.93 sec｜Game capacity 3.863KB｜

Script

了解しました。以下に、シンプルなゲームの実装例を示します。このゲームでは、ユーザーがバスを操作して、障害物を避けるようにします。

🚌

スコア: 0

このゲームでは、スマホの傾きを使用してバスを操作します。バスは画面中央に表示され、障害物が右から左に流れてきます。バスが障害物に衝突するとゲームオーバーになり、スコアが表示されます。障害物を避けてなるべく長く生き残ることが目標です。このコードをHTMLファイルに保存し、スマートフォンで開くとゲームをプレイすることができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、シンプルなゲームの実装例を示します。このゲームでは、ユーザーがバスを操作して、障害物を避けるようにします。

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #bus {
        font-size: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
      }
    </style>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const bus = document.getElementById("bus");
        let score = 0;
        let speed = 10;
        let busTop = 50;
        let busLeft = 50;
        let obstacles = [];
        
        function updateScore() {
          document.getElementById("score").innerHTML = `スコア: ${score}`;
        }
        
        function updateBus() {
          bus.style.top = busTop + "%";
          bus.style.left = busLeft + "%";
        }
        
        function checkCollision() {
          for (let i = 0; i < obstacles.length; i++) {
            let obstacle = obstacles[i];
            if (
              busTop < obstacle.top + obstacle.height &&
              busTop + bus.clientHeight > obstacle.top &&
              busLeft < obstacle.left + obstacle.width &&
              busLeft + bus.clientWidth > obstacle.left
            ) {
              endGame();
              return;
            }
          }
        }
        
        function endGame() {
          alert(`ゲームオーバー！スコア: ${score}`);
          location.reload();
        }
        
        function createObstacle() {
          const obstacle = document.createElement("div");
          obstacle.className = "obstacle";
          obstacle.style.top = Math.random() * 90 + "%";
          obstacle.style.left = "100%";
          obstacle.style.animationDuration = Math.random() * 2 + 2 + "s";
          document.body.appendChild(obstacle);
          
          obstacles.push({
            top: parseInt(obstacle.style.top),
            left: parseInt(obstacle.style.left),
            width: obstacle.clientWidth,
            height: obstacle.clientHeight
          });
        }
        
        function updateObstacles() {
          for (let i = 0; i < obstacles.length; i++) {
            let obstacle = obstacles[i];
            obstacle.left -= speed;
            obstacle.style.left = obstacle.left + "%";
            
            if (obstacle.left + obstacle.width < 0) {
              obstacles.splice(i, 1);
              document.body.removeChild(obstacle);
              score++;
              updateScore();
            }
          }
        }
        
        window.addEventListener("deviceorientation", function(event) {
          let x = event.gamma;
          let y = event.beta;
          
          busTop += y / 10;
          busLeft += x / 10;
          
          if (busTop < 0) busTop = 0;
          if (busTop > 90) busTop = 90;
          if (busLeft < 0) busLeft = 0;
          if (busLeft > 90) busLeft = 90;
          
          updateBus();
        });
        
        setInterval(function() {
          createObstacle();
          updateObstacles();
          checkCollision();
        }, 1000);
      });
    </script>
  </head>
  <body>
    <div id="bus" role="img">🚌</div>
    <div id="score">スコア: 0</div>
  </body>
</html>
```

このゲームでは、スマホの傾きを使用してバスを操作します。バスは画面中央に表示され、障害物が右から左に流れてきます。バスが障害物に衝突するとゲームオーバーになり、スコアが表示されます。障害物を避けてなるべく長く生き残ることが目標です。

このコードをHTMLファイルに保存し、スマートフォンで開くとゲームをプレイすることができます。