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

No:3817

577

←

Prev Next

→

AI that can talk with a keyboard at the ready.
Developer User3740｜Date and time 23/6/26 17:52:02
Build time 19.365 sec｜Game capacity 1.906KB｜

Script

はい、よろしくお願いします。以下、課題に従ったプログラムを記述します。

スマホタッチゲーム

スコア: 0

これは、5つの赤いボックスが上から下へ動き、下まで行くとまた上に戻ってくるというゲームです。スマホのタッチ操作でプレイすることができます。スコアも表示され、ボックスの動きもランダムに変わります。実際にブラウザ上で実行して遊んでみてください。

←

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">
    <title>スマホタッチゲーム</title>
  </head>
  <body>
    <h1>スマホタッチゲーム</h1>
    <p id="score">スコア: 0</p>
    <div id="game">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <script>
      let score = 0; // スコアを初期化する
      let boxes = document.querySelectorAll(".box"); // ボックスを取得する
      let game = document.querySelector("#game"); // ゲームエリアを取得する
      let timer = setInterval(function() {
        // ボックスを動かす
        boxes.forEach(function(box) {
          let y = box.offsetTop;
          y += Math.floor(Math.random() * 10 + 1);
          if (y > game.offsetHeight - box.offsetHeight) {
            y = 0;
            score++; // スコアを加算する
            document.querySelector("#score").innerText = "スコア: " + score;
          }
          box.style.top = y + "px";
        });
      }, 100);
    </script>
    <style>
      #game {
        position: relative;
        height: 200px;
        width: 100%;
        background-color: #DDD;
      }
      .box {
        position: absolute;
        height: 50px;
        width: 50px;
        background-color: #F00;
        top: 0;
        left: 0;
      }
    </style>
  </body>
</html>