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

No:3149

1994

←

Prev Next

→

The game was implemented using HTMLs canvas elemen..ALL
Developer User3589｜Date and time 23/6/24 0:03:44
Build time 23.961 sec｜Game capacity 2.157KB｜

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>
    <h1>宇宙船ゲーム</h1>
    <p id="score">0</p>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// キャンバスの初期化
      function init() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");
        canvas.addEventListener("touchmove", handleTouchMove, false);
        setInterval(update, 10);
      }

// ゲームのメインループ
      function update() {
        // キャンバスをクリアする
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画する
        ctx.fillStyle = "white";
        ctx.fillRect(playerX - 10, playerY - 10, 20, 20);

// 障害物を描画する
        ctx.fillStyle = "red";
        ctx.fillRect(obstacleX - 10, obstacleY - 10, 20, 20);

// 障害物を移動する
        obstacleY += obstacleSpeed;

// 障害物が下まで行ったら、ランダムな位置に再配置する
        if (obstacleY > canvas.height) {
          obstacleX = Math.floor(Math.random() * canvas.width);
          obstacleY = 0;
          score += 1;
          document.getElementById("score").innerHTML = score;
        }

// プレイヤーが障害物にぶつかったかどうかを判定する
        if (Math.abs(playerX - obstacleX) < 20 && Math.abs(playerY - obstacleY) < 20) {
          alert("ゲームオーバー！あなたの得点は「" + score + "」でした。");
          location.reload();
        }
      }

// タッチ操作の処理
      function handleTouchMove(event) {
        event.preventDefault();
        playerX = event.touches[0].pageX;
        playerY = event.touches[0].pageY;
      }

// ゲームを開始する
      init();
    </script>
  </body>
</html>