Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
JavaScriptでライツアウトを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

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

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

スポンサーリンク

概要

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

ゲーム画面を作成する

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

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

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

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

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

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

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

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

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

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

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

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

モバイルバージョンを終了