AI game creator

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

No:5452

1286

←

Prev Next

→

car pile-up
Developer User3589｜Date and time 23/6/30 3:05:19
Build time 44.137 sec｜Game capacity 3.49KB｜

Script

了解です。車積み上げというゲームを作成します。

🚛

このプログラムでは、車積み上げというゲームを実装しています。スマホの傾きによって車を移動させ、ブロックを追加・削除しながらスコアを稼ぐことが目的です。ブロックを追加するタイミングと削除するタイミングはランダムで設定されています。スコアは画面上部に表示されています。ゲーム画面は真ん中に配置され、車とブロックは絵文字で表現されています。

←

Prev　Next

→ 　

Back　

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

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

了解です。車積み上げというゲームを作成します。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>車積み上げ</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-size: 3rem;
    }

#car {
      display: inline-block;
      position: relative;
    }

#car:before {
      content: "🚗";
      position: absolute;
      top: -1em;
    }

#blocks {
      display: flex;
      align-items: flex-end;
      margin-left: 1em;
      height: 10em;
    }

.block {
      display: inline-block;
      width: 2em;
      background-color: #80deea;
      margin-right: 0.5em;
    }

#score {
      text-align: center;
    }
  </style>
</head>

let score = 0;
    let carPosition = 0;
    let blocks = [];

// 車を移動する関数
    function moveCar(direction) {
      if (direction === "left" && carPosition > 0) {
        carPosition--;
      } else if (direction === "right" && carPosition < blocks.length) {
        carPosition++;
      }
      car.style.marginLeft = carPosition * 3 + "em";
    }

// ブロックを追加する関数
    function addBlock() {
      const block = document.createElement("div");
      block.classList.add("block");
      blocks.push(block);
      blocksContainer.appendChild(block);
    }

// ブロックを削除する関数
    function removeBlock() {
      if (blocks.length > 0) {
        const block = blocks.pop();
        blocksContainer.removeChild(block);
      }
    }

// スコアを更新する関数
    function updateScore() {
      score++;
      scoreText.textContent = score;
    }

// ゲームの開始
    function startGame() {
      // スクロール操作による画面のスクロールを無効にする
      window.addEventListener("scroll", function (event) {
        event.preventDefault();
        window.scrollTo(0, 0);
      });

// スマホの傾きによって車を移動させる
      window.addEventListener("deviceorientation", function (event) {
        if (event.beta < -5) {
          moveCar("left");
        } else if (event.beta > 5) {
          moveCar("right");
        }
      });

// ブロックを自動的に追加し、スコアを更新する
      setInterval(function () {
        if (Math.random() < 0.5) {
          addBlock();
        } else {
          removeBlock();
          updateScore();
        }
      }, 1000);
    }

// ゲームの開始
    startGame();
  </script>
</body>

</html>
```