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

No:7161

705

←

Prev Next

→

metropolis
Developer User3977｜Date and time 23/7/5 21:42:56
Build time 25.137 sec｜Game capacity 2.836KB｜

Script

了解しました。以下に「メトロポリス」というゲームを作成します。

メトロポリス

スマホで操作して、ビルを建設しましょう！

このプログラムでは、「メトロポリス」というゲームを実装しています。プレイヤーはスマホで操作し、ビルを建設していきます。プレイヤーは画面下から出現するビルを避けながらできるだけ長く生き残ることを目指します。プレイヤーは左右に移動することができ、ビルとの衝突判定が行われます。衝突した場合はゲームオーバーとなり、画面がリロードされます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

了解しました。以下に「メトロポリス」というゲームを作成します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>メトロポリス</title>
</head>
<body>
  <h1>メトロポリス</h1>
  <p>スマホで操作して、ビルを建設しましょう！</p>

// プレイヤーの初期位置を設定
    var playerX = canvas.width / 2;
    var playerY = canvas.height - 50;

// プレイヤーの移動速度を設定
    var playerSpeed = 5;

// ビルの初期位置をランダムに設定
    var buildingX = Math.random() * canvas.width;
    var buildingY = 0;

// ビルの落下速度を設定
    var buildingSpeed = 2;

// ビルの幅と高さを設定
    var buildingWidth = 50;
    var buildingHeight = 50;

// ゲームループ
    function gameLoop() {
      // 画面をクリア
      context.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画
      context.fillRect(playerX, playerY, 50, 50);

// ビルを描画
      context.fillRect(buildingX, buildingY, buildingWidth, buildingHeight);

// ビルを下に移動
      buildingY += buildingSpeed;

// プレイヤーの操作を処理
      document.addEventListener("keydown", function(event) {
        if (event.key === "ArrowLeft" && playerX > 0) {
          playerX -= playerSpeed;
        }
        if (event.key === "ArrowRight" && playerX < canvas.width - 50) {
          playerX += playerSpeed;
        }
      });

// 衝突判定
      if (playerX < buildingX + buildingWidth &&
          playerX + 50 > buildingX &&
          playerY < buildingY + buildingHeight &&
          playerY + 50 > buildingY) {
        alert("ゲームオーバー！");
        location.reload();
      }

// ビルが画面外に出たら新しいビルを生成
      if (buildingY > canvas.height) {
        buildingX = Math.random() * canvas.width;
        buildingY = 0;
      }

// 次のフレームを描画
      requestAnimationFrame(gameLoop);
    }

// ゲーム開始
    gameLoop();
  </script>
</body>
</html>
```