change of blood type's game

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

No:4123

853

←

Prev Next

→

change of blood type
Developer sayaensm｜Date and time 23/6/27 12:39:49
Build time 26.705 sec｜Game capacity 2.636KB｜

Script

では、私は「ターゲットを撃つ」というシンプルなゲームを作ります。以下は実装例です。

このゲームは、画面上にランダムに配置される四角いターゲットをタップして撃ち落とす、シンプルなシューティングゲームです。スマホのタッチ操作に対応しています。弾丸は自動的に発射されます。また、ターゲットは撃ち落とされると再配置されます。絵文字は使用していませんが、スマホ操作に最適化されていますので、ぜひお試しください。

←

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>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const context = canvas.getContext("2d");

// ターゲットと弾丸を初期化
      let targetX = Math.random() * (canvas.width - 100);
      let targetY = Math.random() * (canvas.height - 100);
      let bulletX = canvas.width / 2;
      let bulletY = canvas.height;
      let isHit = false;

// ゲームループ
      function loop() {
        // 背景とターゲットを描画
        context.fillStyle = "#aaa";
        context.fillRect(0, 0, canvas.width, canvas.height);
        if (!isHit) {
          context.fillStyle = "#f00";
          context.fillRect(targetX, targetY, 100, 100);
        }

// 弾丸を描画
        context.fillStyle = "#00f";
        context.beginPath();
        context.arc(bulletX, bulletY, 5, 0, 2 * Math.PI);
        context.fill();

if (!isHit) {
          // ターゲットに当たったかどうか判定
          if (bulletX >= targetX && bulletX < targetX + 100 && bulletY >= targetY && bulletY < targetY + 100) {
            isHit = true;
          }

// 弾丸を上に移動
          bulletY -= 10;

// 弾丸が画面外に出た場合は再初期化
          if (bulletY < 0) {
            bulletX = canvas.width / 2;
            bulletY = canvas.height;
            isHit = false;
            targetX = Math.random() * (canvas.width - 100);
            targetY = Math.random() * (canvas.height - 100);
          }
        }

// フレーム更新
        requestAnimationFrame(loop);
      }

// ゲーム開始
      loop();

// タッチ操作で弾丸を移動
      document.addEventListener("touchmove", function(event) {
        bulletX = event.touches[0].clientX - canvas.offsetLeft;
      });
    </script>
  </body>
</html>