全てのスイッチをオン！ON/OFFスイッチパズルゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- こっちをつけたらあっちが消える

今回作るのはスイッチを押して全てのマスをONにして光らせるスイッチパズルゲームです。配列や関数といった、初中級のプログラミングスキルが身に付く教材になっています。

デモアプリはこちから遊べます。https://openprocessing.org/sketch/1312859

- クミタテ式プログラミングドリルとは？

クミタテ式は一言で言えば、Scratchの設計図を使ってProcessingフレームワークのプログラムコーディングを学ぶ学習方法です。
初めてクミタテ式を学習する方は、はじめの一歩をご覧ください。チュートリアルや導入方法を紹介しています。

 - 動画を見ながら学習する

動画で実況プログラミングしながら解説しています。このテキストを見ながら動画と一緒に学ぶのがおすすめです。

■[ここからスタート！]setupで画面を表示する

再生時に最初の1回だけ実行するsetupの枠組みを使って、画面の大きさを決める初期設定をしてあげましょう。

■drawで背景の色を変える

drawの枠組みを使って、1秒間に60回、停止するまでずっと実行されるようにしましょう。

■マスとなる四角形を、とりあえず、1つ表示する

背景の色は変更できましたか？
続けて四角形を1つ表示してみましょう。

■繰り返し処理を使って5x5のマスを作る

四角形を1つ表示できましたか？
横に5列、縦に5行、合計25個のマスを描きます。
5回x5回の繰り返し処理ではなく、25回の繰り返し処理を使っている点に注意してください。

 - 綺麗に四角形が並ばない場合 -
i / 5とすると、小数点が入ってしまい、縦の位置がずれてしまう場合があります。
Javaであれば、iをint型に、JavaScriptであれば、int(i / 5)とすることで小数点を切り捨てることができます。

■頭を整理しよう

25個のマスを表示できましたか？
25回の繰り返し処理で、以下のように各マスには見えないマス番号ができていることを理解してください。

■マスを管理する配列を作る

slotListという配列を用意します。
この配列に25個の中身を入れます。
中身が1ならON。中身が0ならOFF。中身がマイナス1なら使用しない外枠とします。
ちょっと難しいので配列の定義方法を具体的なコードで記載します。配列は以下のようにすると、定義と中身の初期化を同時に行えます。

// Java
int[] slotList = new int[]{
 -1, -1, -1, -1, -1,
 -1,  0,  0,  0, -1,
 -1,  0,  1,  0, -1,
 -1,  0,  0,  0, -1,
 -1, -1, -1, -1, -1,
};

//JavaScript
let slotList = [
 -1, -1, -1, -1, -1,
 -1,  0,  0,  0, -1,
 -1,  0,  1,  0, -1,
 -1,  0,  0,  0, -1,
 -1, -1, -1, -1, -1,
];

■配列の中身とマスの表示を紐づけて表示する

配列slotListを定義、初期化できましたか？
25回の繰り返し処理の中で、25個の中身が入った配列の中身を紐づけて、表示を切り替えます。
1ならON、0ならOFF、マイナス1なら真っ黒な外枠とします。

■頭を整理しよう

配列slotListの中身に応じてマスに色付けできましたか？
マス番号と配列の中身を紐づけたことで、以下のように制御されていることを理解してください。
マス番号（0〜24）と、配列の中身（-1, 0, 1）を混同して頭が混乱するプログラミング初心者が本当に非常にとてもすごくめちゃくちゃ多いです。
頭がとても混乱するので注意深く理解してみましょう。
マス番号は教室の席番、配列の中身は座っている人の数学のテストの点数だと考えてみるとわかりやすいかもしれません。席に座っている人の数学のテストの点数によって席に色をつけているということです。

■クリックしたところを、とりあえず、ONにする

クリックされたマスを座標から特定し、配列の中身を1のONに書き換えることで表示を切り替えます。
ここでは、とりあえず無条件にON、にします。

■指定された番号をON / OFF切り替えるオリジナル命令を作る

クリックしたマスをONにできましたか？
次はchangeSlotというオリジナル命令を作ります。
この命令の中では、指定された番号の中身を0なら1に、1なら0に、ON/OFF切り替えることをします。
これでchangeSlot命令に番号を指定すれば、
今の番号を気にせずとりあえずON/OFF切り替えてくれる便利な命令
ができたことになります。

■オリジナル命令changeSlotを使う

オリジナル命令changeSlotを定義できましたか？
クリックされたマスをchangeSlotを使って、ON / OFFを切り替えてみましょう。

■クリックされたマスの上下左右もchangeSlotしよう

クリックされたマスを、ON/OFF切り替えられるようにできましたか？
オリジナル命令changeSlotが自動的にON/OFFを切り替えてくれるので、上下左右の番号を指定すれば良くなりました。

■応用課題1. バグ修正。外枠はクリックできないようにしよう

実はまだバグがあります。外枠をクリックできてしまうのです。
このバグを回避してください。

■応用課題2. もしchangeSlotがなかったら・・・考えてみよう

オリジナルの命令changeSlotを作りましたが、この命令を作る必要はあったのでしょうか？
もしなかったらどんなコードになっていたでしょうか？
想像するだけで、考えてみるだけでOKです。
想像してみてどうですか？changeSlotを作るメリットはありましたか？ありませんでしたか？

■応用課題3. もし外枠がなかったら・・・考えてみよう

「外枠のマイナス1、これ必要なの？」と思った人はするどい。
必要なさそうですよね。
では、外枠のマイナス1をなくしてみましょう。すると自然と外枠マイナス1の大切さがわかってくるかもしれません・・・。

■応用課題4. 自分だけの問題を作ってみよう

配列の初期設定を変更したり、配列の数を変えてみたり。

■応用課題5. 全てのマスがONになったらクリアと表示しよう

できれば、全てのマスがONなら1を、それ以外なら0を返すオリジナルの命令isClearを作ってみよう。