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

No:5846

1094

←

Prev Next

→

Conveyor installation game! Place the chutes on th..ALL
Developer User3589｜Date and time 23/6/30 22:49:38
Build time 52.059 sec｜Game capacity 4.921KB｜

Script

了解しました。以下にコンベア設置ゲームの実装例を示します。

コンベア設置ゲーム

Score: 0

このゲームでは、コンベア上を移動するボールをシュートに乗り継ぎ、できるだけ高い場所まで運搬するゲームです。ゲームはスタートボタンを押すことで開始され、シュートをクリックすることでボールが乗り継がれます。シュートに乗り継ぐことに成功すると、スコアが加算されます。また、50%の確率で火災が発生し、ゲームオーバーとなります。リセットボタンを押すことでゲームをリセットすることができます。この例では絵文字を使用していませんが、絵文字を使用したバージョンも作成することができます。また、スマホの操作にも対応しています。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解しました。以下にコンベア設置ゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>コンベア設置ゲーム</title>
  <style>
    #conveyor {
      position: relative;
      width: 200px;
      height: 400px;
      background-color: lightgray;
      border: 2px solid gray;
    }

#ball {
      position: absolute;
      top: 380px;
      left: 90px;
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
      animation: moveBall linear infinite;
    }

@keyframes moveBall {
      from { top: 380px; }
      to { top: -20px; }
    }

#shoots {
      position: relative;
      width: 100%;
      height: 100%;
    }

.shoot {
      position: absolute;
      width: 100%;
      height: 20px;
      background-color: green;
    }

#score {
      margin-top: 20px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
    }
  </style>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const conveyor = document.getElementById("conveyor");
      const shoots = document.getElementById("shoots");
      const ball = document.getElementById("ball");
      const scoreLabel = document.getElementById("score");

let score = 0;
      let intervalId;

// コンベア上のシュートをクリックした時の処理
      shoots.addEventListener("click", function(event) {
        const shoot = event.target;
        if (shoot.className === "shoot") {
          if (ball.style.top.slice(0, -2) >= shoot.style.top.slice(0, -2)) {
            clearInterval(intervalId);  // シュートに乗り継ぎ成功したらボールを止める
            score++;
            scoreLabel.textContent = "Score: " + score;
          }
        }
      });

// ボールをコンベア上で下から上へ移動させる
      function moveBallOnConveyor() {
        ball.style.animationDuration = "2s";
        ball.style.animationPlayState = "running";
      }

// ゲームを開始する
      function startGame() {
        score = 0;
        scoreLabel.textContent = "Score: " + score;
        intervalId = setInterval(moveBallOnConveyor, 2000);
      }

// ゲームを停止する
      function stopGame() {
        clearInterval(intervalId);
        ball.style.animationPlayState = "paused";
      }

// ゲームの初期化
      function initGame() {
        stopGame();
        ball.style.top = "380px";  // ボールの初期位置
        shoots.innerHTML = "";     // シュートのリセット
        for (let i = 0; i < 6; i++) {
          const shoot = document.createElement("div");
          shoot.className = "shoot";
          shoot.style.top = (i * 70) + "px";
          shoots.appendChild(shoot);
        }
      }

// 火災が発生した場合の処理
      function fire() {
        stopGame();
        alert("火災が発生しました！ゲームオーバーです。");
      }

// 50%の確率で火災が発生する
      function checkForFire() {
        const randomNumber = Math.random();
        if (randomNumber < 0.5) {
          fire();
        }
      }

// ゲームを開始するボタンの処理
      const startButton = document.getElementById("start-button");
      startButton.addEventListener("click", function() {
        initGame();
        startGame();
      });

// ゲームをリセットするボタンの処理
      const resetButton = document.getElementById("reset-button");
      resetButton.addEventListener("click", initGame);

// ボタンをクリックした時に火災の発生をチェックする
      startButton.addEventListener("click", checkForFire);
      resetButton.addEventListener("click", checkForFire);
    });
  </script>
</head>
<body>
  <h1>コンベア設置ゲーム</h1>
  <div id="conveyor">
    <div id="shoots"></div>
    <div id="ball"></div>
  </div>
  <div id="score">Score: 0</div>
  <button id="start-button">ゲーム開始</button>
  <button id="reset-button">ゲームリセット</button>
</body>
</html>
```

この例では絵文字を使用していませんが、絵文字を使用したバージョンも作成することができます。また、スマホの操作にも対応しています。