【３】アリクイあくしょんのコードの解説〜４６〜１１０行目

const stages = [
  { // ステージ1
    blocks: [
      { x: 0, y: 500, width: 1000, height: 200 },
      { x: 1100, y: 500, width: 1000, height: 200 },
      { x: 250, y: 380, width: 100, height: 40 },
      { x: 400, y: 300, width: 100, height: 40 },
      { x: 500, y: 150, width: 50, height: 40 },
    ],
    hiddenBlocks: [
      { x: 450, y: 200, width: 40, height: 40, visible: false },
      { x: 890, y: 400, width: 40, height: 40, visible: false },
      { x: 990, y: 350, width: 40, height: 40, visible: false },
    ],
    enemies: [
      { x: 600, y: 460, width: 40, height: 40, vx: 2, stopTimer: 0 },
      { x: 1200, y: 460, width: 40, height: 40, vx: -2, stopTimer: 0 }
    ],
    goal: { x: 1800, y: 440, width: 40, height: 60 }
  },
  { // ステージ2
    blocks: [
      { x: 0, y: 500, width: 800, height: 200 },
      { x: 900, y: 300, width: 300, height: 40 },
      { x: 1300, y: 200, width: 100, height: 40 },
      { x: 1500, y: 120, width: 200, height: 40 },
      { x: 1800, y: 400, width: 400, height: 100 },
    ],
    hiddenBlocks: [
      { x: 750, y: 400, width: 40, height: 40, visible: false }
    ],
    enemies: [
      { x: 1000, y: 260, width: 40, height: 40, vx: 2, stopTimer: 0 }
    ],
    goal: { x: 2100, y: 340, width: 40, height: 60 }
  },
  {  // ステージ3
    blocks: [
      { x: 0, y: 500, width: 300, height: 200 },
      { x: 400, y: 400, width: 100, height: 40 },
      { x: 600, y: 350, width: 100, height: 40 },
      { x: 800, y: 300, width: 100, height: 40 },
      { x: 1000, y: 400, width: 100, height: 40 },
      { x: 1200, y: 500, width: 400, height: 100 },
    ],
    hiddenBlocks: [
      { x: 900, y: 170, width: 40, height: 40, visible: false }
    ],
    enemies: [
      { x: 800, y: 260, width: 40, height: 40, vx: 2, stopTimer: 0 }
    ],
    goal: { x: 1500, y: 440, width: 40, height: 60 }
  }
];

let currentStage = 0;
let blocks = [];
let hiddenBlocks = [];
let enemies = [];
let goal = {};

// ゲーム状態フラグ
let gameStarted = false;
let gameCleared = false;
let gameOver = false;

足場のブロックを設置

    blocks: [
      { x: 0, y: 500, width: 1000, height: 200 },
      { x: 1100, y: 500, width: 1000, height: 200 },
      { x: 250, y: 380, width: 100, height: 40 },
      { x: 400, y: 300, width: 100, height: 40 },
      { x: 500, y: 150, width: 50, height: 40 },
    ],

{ }の中身が描画情報だよ。実はステージ１のブロックは５つしかないよ。（隠しブロックは除く）

まず、表示位置（x: 数字, y: 数字）を入力。

次に、width: 数字, height: 数字

ウィドゥスは幅、ハイトは高さ。

ブロックというと正方形をイメージしがちだけど、幅と高さを変えることができるよ。

隠しブロックの設置

hiddenBlocks: [
  { x: 450, y: 200, width: 40, height: 40, visible: false },
  { x: 890, y: 400, width: 40, height: 40, visible: false },
  { x: 990, y: 350, width: 40, height: 40, visible: false },
],

ここで登場するのがvisible: false

隠しブロックだから、最初は非表示にしてあるよ。

• visible: true → 表示
• visible: false → 非表示

敵キャラの設置

    enemies: [
      { x: 600, y: 460, width: 40, height: 40, vx: 2, stopTimer: 0 },
      { x: 1200, y: 460, width: 40, height: 40, vx: -2, stopTimer: 0 }
    ],

なぜ2行あるかというと、このステージでは敵を２体登場させたいから。

vx: 数字

vxは**「x方向の速度」**の意味。

つまり、敵キャラが横にどれだけ動くかのスピード。

2なら右方向に「2ピクセル/フレーム」くらいの速さで動くってこと。

stopTimer: 0

これは「止まっている時間」をカウントするタイマー。

たとえば敵が動いたり止まったりを繰り返す場合、止まっている間の時間を測るための変数。

今は0なので「止まってない」か「止まり始めたばかり」という状態。

stopTimer: 0 が 1 になると、基本的には「敵が止まっている時間が1フレーム（または1単位）経過した」という意味になる。

具体的にはこんな感じ：

• stopTimer は敵が停止している時間をカウントするタイマー。
• 0なら「止まってない、または止まり始めたばかり」
• 1なら「止まってから1フレーム（あるいは1タイム単位）経過した」

ゲームの処理によっては、stopTimer の値が増えていき、ある一定時間止まったらまた動き出す、という制御に使われるよ。

空箱を用意する

let currentStage = 0;
let blocks = [];
let hiddenBlocks = [];
let enemies = [];
let goal = {};

let currentStage = 0;
今のステージは「0」っていうこと。
ステージ1、ステージ2…とゲームが進んでいくとき、「今どのステージかな？」ってことを覚えておくんだよ。

let blocks = [];
let hiddenBlocks = [];
let enemies = [];
let goal = {};
今は中身が空っぽだけど、あとでデータが入るよ。

ゲームの状態を管理する変数（箱）を作る

// ゲーム状態フラグ
let gameStarted = false;
let gameCleared = false;
let gameOver = false;

🔵 gameStarted

• 意味：ゲームが始まったかどうか
• 最初は false（始まってない）
• スタートボタンを押したら true（始まった！）

🟢 gameCleared

• 意味：ゴールしてゲームをクリアしたかどうか
• ゴールにたどりついたら true になる！

🔴 gameOver

• 意味：ゲームオーバーになったかどうか
• 敵にぶつかったり、落ちちゃったら true になる！