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

No:5750

873

←

Prev Next

→

Pien🥺 is in abundance.
Developer User3840｜Date and time 23/6/30 18:42:48
Build time 37.603 sec｜Game capacity 3.171KB｜

Script

了解です！ゲームとして遊べるような簡単なプログラムを作成しましょう。スマホ操作を前提に、絵文字を使って面白いゲームを作ります。では、以下のプログラムを1枚のHTMLファイルに実装してください。

絵文字シューティングゲーム

このプログラムは、絵文字の主人公を操作して敵の絵文字に弾を当てるゲームです。主人公の移動は左右矢印キーで行います。弾が敵に当たった場合には「ゲームクリア！」とアラートが表示されます。このHTMLファイルを実行すると、スマホで遊ぶことができる絵文字シューティングゲームが表示されます。お楽しみください！

←

Prev　Next

→ 　

Back　

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

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

了解です！ゲームとして遊べるような簡単なプログラムを作成しましょう。スマホ操作を前提に、絵文字を使って面白いゲームを作ります。

では、以下のプログラムを1枚のHTMLファイルに実装してください。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>絵文字シューティングゲーム</title>
</head>
<body>
  <h1>絵文字シューティングゲーム</h1>
  <canvas id="gameCanvas" width="300" height="400"></canvas>

// 弾の絵文字
    const bullet = {
      emoji: "💥",
      x: 0,
      y: 0,
      width: 10,
      height: 20,
      speed: 5,
    };

// 敵の絵文字
    const enemy = {
      emoji: "👾",
      x: 0,
      y: 50,
      width: 30,
      height: 30,
      speed: 3,
    };

// キャンバス要素を取得して描画コンテキストを取得
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

// キーダウンイベントを監視し、主人公の移動を制御
    document.addEventListener("keydown", (event) => {
      if (event.key === "ArrowLeft") {
        player.x -= player.speed;
      } else if (event.key === "ArrowRight") {
        player.x += player.speed;
      }
    });

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

// 主人公を描画
      ctx.font = `${player.width}px serif`;
      ctx.fillText(player.emoji, player.x, player.y);

// 弾を描画
      ctx.font = `${bullet.width}px serif`;
      ctx.fillText(bullet.emoji, bullet.x, bullet.y);

// 弾が敵に当たった場合の判定
      if (
        bullet.x >= enemy.x &&
        bullet.x <= enemy.x + enemy.width &&
        bullet.y >= enemy.y &&
        bullet.y <= enemy.y + enemy.height
      ) {
        alert("ゲームクリア！");
      }

// 敵を描画
      ctx.font = `${enemy.width}px serif`;
      ctx.fillText(enemy.emoji, enemy.x, enemy.y);

// 敵の移動
      enemy.x += enemy.speed;
      if (enemy.x > canvas.width) {
        enemy.x = -enemy.width;
      }

// 弾の移動
      bullet.y -= bullet.speed;
      if (bullet.y < 0) {
        bullet.x = player.x + player.width / 2 - bullet.width / 2;
        bullet.y = player.y;
      }

// 再描画
      requestAnimationFrame(gameLoop);
    }

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

このプログラムは、絵文字の主人公を操作して敵の絵文字に弾を当てるゲームです。主人公の移動は左右矢印キーで行います。弾が敵に当たった場合には「ゲームクリア！」とアラートが表示されます。

このHTMLファイルを実行すると、スマホで遊ぶことができる絵文字シューティングゲームが表示されます。お楽しみください！