Open World Games There are rocks in many places.'s game | AI game creator

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

No:9649

134

Open World Games There are rocks in many places.
Developer User4403｜Date and time 23/7/26 18:35:18
Build time 35.054 sec｜Game capacity 3.693KB｜

了解です。以下は、1枚のHTMLファイルとして実装されたゲームの例です。ゲームの説明は省略しますが、プレイヤーがスマホで左右に動きながら岩を避けるゲームです。岩はランダムに現れ、当たるとゲームオーバーとなります。

このゲームは、`canvas`要素を使用して描画されています。`playerX`変数でプレイヤーの位置を制御し、`rocks`配列に岩の位置データを格納しています。`drawPlayer()`関数でプレイヤーを描画し、`drawRocks()`関数で岩を描画します。`updateRocks()`関数で岩の位置を更新し、衝突判定を行います。`generateRock()`関数でランダムな位置に岩を生成します。ゲームループは`gameLoop()`関数で実行され、`requestAnimationFrame()`を使用して再帰的に呼び出されます。ゲームが終了した場合は、「ゲームオーバー」と表示されます。このHTMLファイルを保存し、スマホのウェブブラウザで開くと、指定された条件に従ったゲームがプレイできます。岩は画面上にランダムに出現し、スマホの左右キーでプレイヤーを動かして岩を避けることが目的です。

→ 　

0　

0　

　
　

[PR]現在の売れ筋アプリランキング

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

(C)2023 HisashiApp

了解です。以下は、1枚のHTMLファイルとして実装されたゲームの例です。ゲームの説明は省略しますが、プレイヤーがスマホで左右に動きながら岩を避けるゲームです。岩はランダムに現れ、当たるとゲームオーバーとなります。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>岩 es-game</title>
    <style>
      canvas {
        border: 1px solid black;
        background: lightgray;
      }
    </style>
  </head>
  <body>
    <canvas id="game-canvas" width="400" height="400"></canvas>
    <script>
      const canvas = document.getElementById("game-canvas");
      const ctx = canvas.getContext("2d");
      const emojiRock = "🪨";
    
      let playerX = canvas.width / 2;
      let gameOver = false;
      let rocks = [];
    
      function drawPlayer() {
        ctx.fillStyle = "black";
        ctx.font = "24px Arial";
        ctx.fillText("✈️", playerX, canvas.height - 30);
      }
    
      function drawRocks() {
        ctx.fillStyle = "black";
        ctx.font = "24px Arial";
        for (let rock of rocks) {
          ctx.fillText(emojiRock, rock.x, rock.y);
        }
      }
    
      function updateRocks() {
        for (let i = 0; i < rocks.length; i++) {
          let rock = rocks[i];
          rock.y += 5;
    
          if (rock.y > canvas.height) {
            rocks.splice(i, 1);
          }
    
          if (
            rock.y + 24 > canvas.height - 30 &&
            rock.x + 24 > playerX - 24 &&
            rock.x < playerX + 24
          ) {
            gameOver = true;
          }
        }
      }
    
      function generateRock() {
        const rock = {
          x: Math.random() * canvas.width,
          y: -24,
        };
        rocks.push(rock);
      }
    
      function keyPressed(event) {
        const key = event.key;
        if (key === "ArrowLeft" && playerX > 24) {
          playerX -= 24;
        } else if (key === "ArrowRight" && playerX < canvas.width - 24) {
          playerX += 24;
        }
      }
    
      function gameLoop() {
        if (!gameOver) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          drawPlayer();
          drawRocks();
          updateRocks();
          generateRock();
          requestAnimationFrame(gameLoop);
        } else {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.fillStyle = "black";
          ctx.font = "36px Arial";
          ctx.fillText("ゲームオーバー", canvas.width / 2 - 120, canvas.height / 2);
        }
      }
    
      document.addEventListener("keydown", keyPressed);
      gameLoop();
    </script>
  </body>
</html>
```

このゲームは、`canvas`要素を使用して描画されています。`playerX`変数でプレイヤーの位置を制御し、`rocks`配列に岩の位置データを格納しています。`drawPlayer()`関数でプレイヤーを描画し、`drawRocks()`関数で岩を描画します。`updateRocks()`関数で岩の位置を更新し、衝突判定を行います。`generateRock()`関数でランダムな位置に岩を生成します。ゲームループは`gameLoop()`関数で実行され、`requestAnimationFrame()`を使用して再帰的に呼び出されます。ゲームが終了した場合は、「ゲームオーバー」と表示されます。

このHTMLファイルを保存し、スマホのウェブブラウザで開くと、指定された条件に従ったゲームがプレイできます。岩は画面上にランダムに出現し、スマホの左右キーでプレイヤーを動かして岩を避けることが目的です。