【７】アリクイあくしょんコード解説　242行目〜

// 描画関数
function drawBlocks() {
  ctx.fillStyle = "brown";
  blocks.forEach(block => {
    ctx.fillRect(block.x - worldX, block.y, block.width, block.height);
  });
}
function drawHiddenBlocks() {
  hiddenBlocks.forEach(block => {
    if (block.visible) {
      ctx.fillStyle = "orange";
      ctx.fillRect(block.x - worldX, block.y, block.width, block.height);
    }
  });
}
function drawGoal() {
  ctx.fillStyle = "gold";
  ctx.fillRect(goal.x - worldX, goal.y, goal.width, goal.height);
}

function drawBlocks() {}

ctx.fillStyle = “brown”;

fillStyle → キャンバス上で「四角などを塗りつぶす色」を指定するプロパティ

blocks.forEach(…)

forEach は 「すべての要素に対して順番に処理する」 JavaScriptの組み込みメソッド。

fillRect(x, y, width, height) は、塗りつぶされた四角形を描く。
fill は埋める、塗りつぶすの意。
Rectは、Rectangle（レクタングル）＝ 長方形 の略。

fillStyle は塗る色の指定。

(block.x – worldX, block.y, block.width, block.height)

パーツ	意味と目的
block.x - worldX	ブロックの横位置　引く(-)　カメラ位置
block.y	ブロックの縦位置
block.width	ブロックの幅
block.height	ブロックの高さ

もし block.x = 500 で worldX = 100 なら…

ctx.fillRect(500 - 100, block.y, block.width, block.height);// → 実際の表示位置は 400 に

カメラが100だけ右に進んだぶん、ブロックは左にずれて見えるという仕組み。
つまり、
ブロックの位置とサイズをもとに
📷 カメラ（worldX）を考慮して
🖼️ キャンバスに描画するための 描画座標を作っている。

✅ まとめ：この関数は何をする？

function drawBlocks() {
  ctx.fillStyle = "brown";
  blocks.forEach(block => {
    ctx.fillRect(block.x - worldX, block.y, block.width, block.height);
  });
}

全ブロックを、現在のカメラ位置に合わせて表示する
そのとき、ブロックは「茶色」で描かれる。

visible

function drawHiddenBlocks() {
  hiddenBlocks.forEach(block => {
    if (block.visible) {
      ctx.fillStyle = "orange";
      ctx.fillRect(block.x - worldX, block.y, block.width, block.height);
    }
  });

• if (block.visible) は、「そのブロックが見える状態（true）かどうか」を判断する
• visible は true/false の値をもつプロパティ（属性）
• 主に 描画するか・しないかを制御するために使われる