When Im at work, I want to do this or that when I get home, but in reality, I just laze around and sleep when I get home and regret it when its time to go to bed.'s game

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

No:4422

1575

←

Prev Next

→

When Im at work, I want to do this or that when I ..ALL
Developer もちきなこ｜Date and time 23/6/28 0:11:13
Build time 38.828 sec｜Game capacity 3.348KB｜

Script

了解しました。ミニゲーム「脱出ゲーム」を作成します。以下がコードになります。

左右に移動して、ドアから脱出しよう！

このゲームは、左右に操作可能な黄色い玉をドアまで移動させ、脱出することが目的です。上部のメッセージが表示され、画面中央には黄色い玉が描かれます。黄色い玉は、左右の矢印キーによって操作が可能です。青い部分は、プレイヤーが移動することのできない領域で、ドアの位置が青枠で示されています。黄色い玉が青い部分に当たると、再度初期位置に戻ります。黄色い玉がドアに到達すると、アラートが表示され勝利となり、再度ゲームが始まります。以上が、脱出ゲームの作成となります。スマホでプレイすることもできますので、ぜひご試してください！

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

了解しました。ミニゲーム「脱出ゲーム」を作成します。

以下がコードになります。

```
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>脱出ゲーム</title>
  </head>
  <body>
    <p>左右に移動して、ドアから脱出しよう！</p>
    <canvas id="canvas" width="360" height="640"></canvas>
    <script>
      // キャンバスの取得
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

// ゲーム内で使用する変数
      let playerX = 180;
      let playerY = 570;
      let dx = 0;

// ドアの情報
      const door = {
        x: 150,
        y: 20,
        width: 60,
        height: 100
      };

// プレイヤーの描写、移動処理
      function drawPlayer() {
        ctx.beginPath();
        ctx.arc(playerX, playerY, 20, 0, Math.PI * 2, false);
        ctx.fillStyle = "yellow";
        ctx.fill();
        ctx.closePath();
        playerX += dx;
        if (playerX < 30) {
          playerX = 30;
        } else if (playerX > 330) {
          playerX = 330;
        }
        if (playerY < 50) {
          alert("脱出成功！おめでとう！");
          document.location.reload();
        }
      }

// ドアの描写
      function drawDoor() {
        ctx.beginPath();
        ctx.rect(door.x, door.y, door.width, door.height);
        ctx.fillStyle = "brown";
        ctx.fill();
        ctx.closePath();
      }

// ゲームのリセット処理
      function reset() {
        playerX = 180;
        playerY = 570;
        dx = 0;
      }

// キーボードの処理
      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);
      function keyDownHandler(e) {
        if (e.key === "Right" || e.key === "ArrowRight") {
          dx = 5;
        } else if (e.key === "Left" || e.key === "ArrowLeft") {
          dx = -5;
        }
      }
      function keyUpHandler(e) {
        if (e.key === "Right" || e.key === "ArrowRight" || e.key === "Left" || e.key === "ArrowLeft") {
          dx = 0;
        }
      }

// ゲームループ
      function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPlayer();
        drawDoor();
        requestAnimationFrame(gameLoop);
      }

// 初期化
      reset();
      gameLoop();

</script>
  </body>
</html>
```

このゲームは、左右に操作可能な黄色い玉をドアまで移動させ、脱出することが目的です。

上部のメッセージが表示され、画面中央には黄色い玉が描かれます。黄色い玉は、左右の矢印キーによって操作が可能です。

青い部分は、プレイヤーが移動することのできない領域で、ドアの位置が青枠で示されています。

黄色い玉が青い部分に当たると、再度初期位置に戻ります。黄色い玉がドアに到達すると、アラートが表示され勝利となり、再度ゲームが始まります。

以上が、脱出ゲームの作成となります。スマホでプレイすることもできますので、ぜひご試してください！