The culprit is Yas.'s game | AI game creator

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

No:2818

1537

The culprit is Yas.
Developer User1006｜Date and time 23/6/22 19:31:35
Build time 53.965 sec｜Game capacity 5.066KB｜

HTMLファイル内にJavaScriptを含めることで、簡単に遊べるゲームアプリを作成することができます。スマートフォンで遊ぶことを前提にすると、タップやスワイプなどの指の操作が主になります。ゲームを楽しむためには、絵文字などのかわいらしいデザインを取り入れるとよいでしょう。以下に、簡単なアクションゲームの例を示します。このゲームでは、プレイヤーが障害物を避けながら進んでいかなければなりません。スマートフォンの操作に対応して、左右にスワイプすることでプレイヤーを移動させることができます。

このゲームは、HTMLファイル内に`canvas`要素を用いて描画されています。`player`と`obstacles`はそれぞれプレイヤーと障害物のデータを表すオブジェクトです。`update`関数はゲームの状態を更新し、`draw`関数はそれを描画します。`isKeyDown`関数は、特定のキーが押されているかどうかを判定します。また、`isCollision`関数は、2つのオブジェクトが衝突しているかどうかを判定します。このアプリを実行するには、HTMLファイルをブラウザで開いてください。スマートフォンでは、ブラウザの画面をタップしてフルスクリーン表示にすることをおすすめします。

→ 　

1　

0　

　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

HTMLファイル内にJavaScriptを含めることで、簡単に遊べるゲームアプリを作成することができます。スマートフォンで遊ぶことを前提にすると、タップやスワイプなどの指の操作が主になります。ゲームを楽しむためには、絵文字などのかわいらしいデザインを取り入れるとよいでしょう。

以下に、簡単なアクションゲームの例を示します。このゲームでは、プレイヤーが障害物を避けながら進んでいかなければなりません。スマートフォンの操作に対応して、左右にスワイプすることでプレイヤーを移動させることができます。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>アクションゲーム</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="300" height="600"></canvas>

<script>
      // ゲームの設定
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const player = {
        x: canvas.width / 2,
        y: canvas.height - 50,
        width: 30,
        height: 30,
        speed: 6
      };
      let obstacles = [];
      let score = 0;
      let gameover = false;

// 障害物の生成
      function createObstacle() {
        const obstacle = {
          x: Math.floor(Math.random() * canvas.width),
          y: 0,
          width: 30,
          height: 30,
          speed: Math.floor(Math.random() * 4) + 1
        };
        obstacles.push(obstacle);
      }

// ゲームの更新
      function update() {
        if (gameover) return;

// プレイヤーの移動
        if (isKeyDown("ArrowLeft")) {
          player.x -= player.speed;
        } else if (isKeyDown("ArrowRight")) {
          player.x += player.speed;
        }

// 障害物の移動
        for (let i = 0; i < obstacles.length; i++) {
          const obstacle = obstacles[i];
          obstacle.y += obstacle.speed;
          if (obstacle.y > canvas.height + obstacle.height) {
            obstacles.splice(i, 1);
            i--;
          }
        }

// 障害物の生成
        if (Math.random() < 0.05) {
          createObstacle();
        }

// 衝突の判定
        for (let i = 0; i < obstacles.length; i++) {
          const obstacle = obstacles[i];
          if (isCollision(player, obstacle)) {
            gameover = true;
          }
        }

// スコアの更新
        score++;
      }

// ゲームの描画
      function draw() {
        // 背景
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

// プレイヤー
        ctx.fillStyle = "#ff0088";
        ctx.fillRect(player.x - player.width / 2, player.y - player.height / 2, player.width, player.height);

// 障害物
        ctx.fillStyle = "#0088ff";
        for (let i = 0; i < obstacles.length; i++) {
          const obstacle = obstacles[i];
          ctx.fillRect(obstacle.x - obstacle.width / 2, obstacle.y - obstacle.height / 2, obstacle.width, obstacle.height);
        }

// スコア
        ctx.fillStyle = "#000000";
        ctx.font = "24px sans-serif";
        ctx.fillText(`スコア: ${score}`, 10, 30);

// ゲームオーバー
        if (gameover) {
          ctx.fillStyle = "#ff0000";
          ctx.font = "48px sans-serif";
          ctx.fillText("ゲームオーバー", canvas.width / 2 - 160, canvas.height / 2);
        }
      }

// キーの状態
      const keys = {};
      function isKeyDown(keyCode) {
        return keys[keyCode];
      }
      window.addEventListener("keydown", e => {
        keys[e.code] = true;
      });
      window.addEventListener("keyup", e => {
        keys[e.code] = false;
      });

// 衝突の判定
      function isCollision(obj1, obj2) {
        return (
          Math.abs(obj1.x - obj2.x) < (obj1.width + obj2.width) / 2 &&
          Math.abs(obj1.y - obj2.y) < (obj1.height + obj2.height) / 2
        );
      }

// ゲームループ
      function gameloop() {
        update();
        draw();
        requestAnimationFrame(gameloop);
      }
      requestAnimationFrame(gameloop);
    </script>
  </body>
</html>
```

このゲームは、HTMLファイル内に`canvas`要素を用いて描画されています。`player`と`obstacles`はそれぞれプレイヤーと障害物のデータを表すオブジェクトです。`update`関数はゲームの状態を更新し、`draw`関数はそれを描画します。`isKeyDown`関数は、特定のキーが押されているかどうかを判定します。また、`isCollision`関数は、2つのオブジェクトが衝突しているかどうかを判定します。

このアプリを実行するには、HTMLファイルをブラウザで開いてください。スマートフォンでは、ブラウザの画面をタップしてフルスクリーン表示にすることをおすすめします。