AI game creator

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

No:178

302

←

Prev Next

→

Avoid meteorites
Developer User2754｜Date and time 23/6/3 21:33:24
Build time 83.032 sec｜Game capacity 3.818KB｜

Script

Create a game. In this game.、The player controls the spaceship and、The objective is to avoid falling meteorites. It can be operated with a smartphone and、Emojis are used extensively. Below is the actual program.

In this program、The canvas element is used to draw the game screen. When keyboard input is received, the、The position of the spaceship is being changed. Also、New meteorites are randomly generated and、Determines if a meteorite is colliding with the player. When the game starts、Score while avoiding meteorites!

←

Prev　Next

→ 　

Back　

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

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

ゲームを作ります。このゲームでは、プレイヤーは宇宙船を操作し、落下してくる隕石を避けることが目的です。スマホでも操作可能で、絵文字を多用しています。

以下が実際のプログラムです。

```
<!DOCTYPE html>
<html>
  <head>
    <title>隕石を避けるゲーム</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script>
      // ゲーム画面の幅と高さ
      const GAME_WIDTH = 320;
      const GAME_HEIGHT = 480;

// 宇宙船の情報
      let player = {
        x: GAME_WIDTH / 2,
        y: GAME_HEIGHT - 50,
        width: 50,
        height: 50,
        speed: 10,
        emoji: "🚀"
      };

// 隕石の情報
      let meteorites = [];
      function createMeteorite() {
        meteorites.push({
          x: Math.random() * (GAME_WIDTH - 50),
          y: -50,
          width: 50,
          height: 50,
          speed: Math.random() * 5 + 5,
          emoji: "💥"
        });
      }

// ゲームの状態
      let gameRunning = true;
      let score = 0;

// キーが押された時の処理
      let keysDown = {};
      document.addEventListener("keydown", event => {
        keysDown[event.key] = true;
      });
      document.addEventListener("keyup", event => {
        keysDown[event.key] = false;
      });

// ゲーム画面を取得
      const canvas = document.getElementById("gameCanvas");
      canvas.width = GAME_WIDTH;
      canvas.height = GAME_HEIGHT;
      const context = canvas.getContext("2d");

// ゲームのメインループ
      function gameLoop() {
        if (!gameRunning) {
          return;
        }

// 宇宙船を移動
        if (keysDown["ArrowLeft"]) {
          player.x -= player.speed;
        }
        if (keysDown["ArrowRight"]) {
          player.x += player.speed;
        }

// 隕石を移動
        meteorites.forEach(meteorite => {
          meteorite.y += meteorite.speed;
        });

// 新しい隕石を生み出す
        if (Math.random() < 0.1) {
          createMeteorite();
        }

// 衝突判定
        meteorites.forEach(meteorite => {
          if (
            player.x < meteorite.x + meteorite.width &&
            player.x + player.width > meteorite.x &&
            player.y < meteorite.y + meteorite.height &&
            player.y + player.height > meteorite.y
          ) {
            gameRunning = false;
            alert(`GameOver! Your Score: ${score}`);
          }
        });

// 画面をクリア
        context.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

// 宇宙船を描画
        context.font = `${player.width}px serif`;
        context.fillText(player.emoji, player.x, player.y);

// 隕石を描画
        meteorites.forEach(meteorite => {
          context.font = `${meteorite.width}px serif`;
          context.fillText(meteorite.emoji, meteorite.x, meteorite.y);
        });

// スコアを表示
        score++;
        context.font = "30px serif";
        context.fillText(`Score: ${score}`, 10, 40);

// 次のフレームを実行
        requestAnimationFrame(gameLoop);
      }

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

このプログラムでは、canvas要素を使ってゲーム画面を描画しています。キーボードの入力があった場合には、宇宙船の位置を変更しています。また、新しい隕石をランダムに生成し、隕石がプレイヤーと衝突しているかどうかを判定しています。

ゲームが始まったら、隕石を避けながらスコアを稼ぎましょう！