JavaScriptでライツアウトを作ってみる

bubudoufu

3年前

このページではソースコードの一部分を簡単な解説をしています。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります

概要
ゲーム画面を作成する
マスがクリックされたら反転させる
ライトをオン・オフさせる
ライトがすべて消えてるかチェック

概要

緑色に点灯したパネルをクリックすると自身と上下左右のパネルが点灯していた場合は消灯、消灯していた場合は点灯と反転します。すべてのマスを消灯させればクリアです。3×3から15X15マスのモードを用意しました。

ゲーム画面を作成する

ゲーム画面はスタート画面で選択されたマスの数に応じてtable要素で作成しています。

let data = [];
let cells = 1; // マスの数
const board = document.getElementById("board");

// 初期化
function init(){
  for (let i = 0; i < cells; i++) {
    const tr = document.createElement("tr");
    data[i] = Array(cells).fill(-1);
    for (let j = 0; j < cells; j++) {
      const td = document.createElement("td");
      td.className = "lighton";
      td.onclick = clicked;
      tr.appendChild(td);
    }
    board.appendChild(tr);
  }
}

let data = [];

let cells = 1; // マスの数

const board = document.getElementById("board");

// 初期化

function init(){

for (let i = 0; i < cells; i++) {

const tr = document.createElement("tr");

data[i] = Array(cells).fill(-1);

for (let j = 0; j < cells; j++) {

const td = document.createElement("td");

td.className = "lighton";

td.onclick = clicked;

tr.appendChild(td);

}

board.appendChild(tr);

}

td要素にマスがクリックされた時のイベントハンドラーとCSSでライト点灯状態を表す為のclass属性を登録しています。data配列はゲーム画面のライトオン・オフを管理していてライトONの状態を-1、OFFを1で管理しています。

マスがクリックされたら反転させる

マスがクリックされるとtd要素に登録したclicked関数が実行されます。

// マスがクリックされた時の処理
function clicked() {
    // 周囲4方向を調べる配列
    const direction = [
      [-1, 0], // 左
      [0, 1], // 下
      [1, 0], // 右
      [0, -1], // 上
    ];

  const y = this.parentNode.rowIndex;
  const x = this.cellIndex;
  data[y][x] *= -1;

  for (let i = 0; i < direction.length; i++) {
    const dx = direction[i][0] + x;
    const dy = direction[i][1] + y;
    if (dx >= 0 && dy >= 0 && dx <= cells - 1 && dy <= cells - 1) {
        data[dy][dx] *= -1;
    }
  }

  lighting();
}

// マスがクリックされた時の処理

function clicked() {

// 周囲4方向を調べる配列

const direction = [

[-1, 0], // 左

[0, 1], // 下

[1, 0], // 右

[0, -1], // 上

];

const y = this.parentNode.rowIndex;

const x = this.cellIndex;

data[y][x] *= -1;

for (let i = 0; i < direction.length; i++) {

const dx = direction[i][0] + x;

const dy = direction[i][1] + y;

if (dx >= 0 && dy >= 0 && dx <= cells - 1 && dy <= cells - 1) {

data[dy][dx] *= -1;

}

lighting();

}

direction配列にはクリックされた場所を中心に上下左右の座標を格納しています。クリックされた場所と上下左右をライトのオン・オフを管理しているdata配列に-1を乗算して値を反転させています。

ライトをオン・オフさせる

lighting関数はライトをオン・オフさせる関数です。

// ライトのオン・オフ
function lighting() {
  for (let i = 0; i < cells; i++) {
    for (let j = 0; j < cells; j++) {
      if (data[i][j] === 1) {
        board.rows[i].cells[j].className = "lightoff";
      } else {
        board.rows[i].cells[j].className = "lighton";
      }
    }
  }
  check();
}

// ライトのオン・オフ

function lighting() {

for (let i = 0; i < cells; i++) {

for (let j = 0; j < cells; j++) {

if (data[i][j] === 1) {

board.rows[i].cells[j].className = "lightoff";

} else {

board.rows[i].cells[j].className = "lighton";

}

check();

}

ライトのオン・オフを管理しているdata配列をfor文で調べ格納されている値に応じてclass属性を付け替えることによってCSSでライトのオン・オフをさせています。

ライトがすべて消えてるかチェック

check関数はライトがすべて消えているか調べる関数です。

// ライトがすべて消えてるかチェック
function check() {
    if(!data.some(e => e.includes(-1))){
      board.style.pointerEvents = "none";
      showEnd();
    }
}

// ライトがすべて消えてるかチェック

function check() {

if(!data.some(e => e.includes(-1))){

board.style.pointerEvents = "none";

showEnd();

}

someメソッドとincludesメソッドを使いdata配列にライトがオンの状態の-1の値が含まれているか調べています。

最後までお読みいただきありがとうございました。