【 canvas 】マス目を作る / 背景色を配置

参考書を参考にして謎のゲームを作ったので、
一つ一つ噛み砕いていくことにします。

マス目を作る！

See the Pen canvas study by たまき こう (@ulqvhvox) on CodePen.

今回、十字キーで移動するフィールドを描画していきます。
わかりやすいようにそれぞれ別の色で表示しました。

var data = [
    [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
    [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
    [6,6,1,1,1,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
    [6,6,2,2,2,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
    [6,6,0,0,0,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
    [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
    [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
    [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
    [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6],
    [6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6]
];

異なる数字(0, 1 , 2, 6)を入れた10 x 20 二次元配列のデータです。
こちらの数字を識別し、それぞれに色を当てていきます。

function repaint (){
  const gc = document.getElementById("soko").getContext("2d");
  gc.fillStyle = "orange";  //色
  gc.fillRect(0,0,800,440);  // 塗ります
  for(var y = 0; y < data.length ; y++){
    for(var x = 0; x < data[y].length ; x++){
      if(data[y][x] & 1){
        gc.fillStyle = "yellow";
        gc.fillRect(x * 40, y * 40, 40, 40);
      }
      if(data[y][x] & 2){
        gc.fillStyle = "white";
        gc.fillRect(x * 40, y * 40, 40, 40);
      }
      if(data[y][x] == 6){
        gc.fillStyle = "pink";
        gc.fillRect(x * 40, y * 40, 40, 40);
      }
    }
  }
}

こちらが描画の部分になります。

  for(var y = 0; y < data.length ; y++){
    for(var x = 0; x < data[y].length ; x++){
      //処理
　}
  }

data.length は配列の数(y軸)
data[y].lengthは一つの配列の中の数字の数(x軸)です
for文を重ねることで、一つ一つを識別して処理を書くことができます。

      if(data[y][x] & 1){
        gc.fillStyle = "yellow";
        gc.fillRect(x * 40, y * 40, 40, 40);
      }
      if(data[y][x] & 2){
        gc.fillStyle = "white";
        gc.fillRect(x * 40, y * 40, 40, 40);
      }
      if(data[y][x] == 6){
        gc.fillStyle = "pink";
        gc.fillRect(x * 40, y * 40, 40, 40);
      }

該当箇所data[y][x]がどの数字かによって
キャンバスの色が変わるという仕組みです。

ちなみに。'gc.fillRect'で簡単に配置することができます。

おしまい！