JavaScript»基礎»2次元配列 ライフゲームのライフを表示する

ファイル名: js-basic/quest_00339.html

下のソースコードをうつして、2次元配列じげんはいれつのデータをもとに、黒または緑の四角を、キャンバスに表示ひょうじしてください。緑は、そこに生命せいめいがあることをあらわしています。

ソースコード

// trueかfalseがはいっている、20x20の2次元配列
const lives = [];
for (let y = 0; y < 20; y++) {
  lives[y] = []; // 配列livesの要素それぞれに配列を入れ、2次元配列を作ります。
  for (let x = 0; x < 20; x++) {
    lives[y][x] = false; //すべての四角を生命がない状態(false)にします。
  }
}
lives[6][13] = true; // 上から7コめ、左から14コめの四角を、生命がある状態(true)にします。
lives[7][7] = true;
lives[7][8] = true;
lives[8][8] = true;
lives[8][12] = true;
lives[8][13] = true;
lives[8][14] = true;

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

const drawLives = function(lives) {
  for (let y = 0; y < 20; y++) {
    for (let x = 0; x < 20; x++) {
      context.fillStyle = lives[y][x] ? "lawngreen" : "black"; // 各四角がtrueなら緑、falseなら黒
      context.fillRect(x * 16 + 1, y * 16 + 1, 14, 14);
    }
  }
};

drawLives(lives);

解説

配列の中に配列を入れることもできます。番号を指定するときは外側の配列から指定します。
このコードでは、yの配列それぞれの要素にxの配列をいれることで、20x20のマップを作っています。