シンプルでクセになる！一筆書きパズルゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)

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

- わかりやすさと気持ちのいい操作性

今回作るのは、一筆書きパズルゲームです。一筆書きパズルは、誰でもルールがわかりやすく、適度な難易度があり、マスを埋めていく気持ちよさがある優れたパズルゲームです。

デモアプリはこちらから。https://openprocessing.org/sketch/1365056

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

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

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

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

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

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

■drawで背景の色を変える

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

■四角形のマスを、とりあえず1つ表示しよう

5x5の25のマスを作る前に、まずは1つだけマスを表示しよう。

■マスを5つ横に並べてみよう

四角形を1つ表示できましたか？
続けて、繰り返し処理forを使って横に5個の四角形を並べてみます。

■25個のマスを表示する

横に5個マスを並べられましたか？
続けて縦にも並べて25個のマスにしましょう。

■25個のマスに情報を与える配列を用意する

25個のマスは表示できましたか？
今のままではただ25個の四角形が表示できただけです。
この四角形がマスとして機能するために、マスに情報を与えるための25個の配列slotListを用意しましょう。
0なら空のマス、1なら埋めたマス、99なら埋められないマス、という情報を与えます。

// Processing
int[] slotList = new int[]{
 0,  0,  0,  0,  0,
 0,  0,  0,  0,  0,
 0,  0, 99,  0,  0,
 0,  0,  0,  0,  0,
 1,  0,  0,  0, 99,
};

// p5js
let slotList = [
 0,  0,  0,  0,  0,
 0,  0,  0,  0,  0,
 0,  0, 99,  0,  0,
 0,  0,  0,  0,  0,
 1,  0,  0,  0, 99,
];

■配列をもとにマスの色を切り替える

配列slotListは用意できましたか？
slotListの情報をもとにマスの色を変えてみましょう。

■クリックされたマスを埋める

配列slotListの情報をもとにマスの表示を切り替えることはできましたか？
これで配列slotListの中身を変えれば、同時にマスの表示も変えられる準備が整いました。
続けて、マウスクリックされたマスを特定して、配列slotListの中身を書き換えてみましょう。

■空のマスだけ埋められるようにする

マウスクリックでマスを埋めることはできましたか？
しかし、今のままでは埋められないはずのマスまで埋めることができてしまいます。
続けて、空っぽのマスだけ埋められるようにしましょう。

■マスのリセットを、とりあえずキーが押されたときに紐づける

埋めたマスをリセットするオリジナル命令resetSlotListを作りましょう。
resetSlotListは好きなタイミングで実行して構いませんが、とりあえずデバッグ的にキーが押されたときに紐づけます。

クミタテ式の設計図はここまでです。以下の応用課題は自分で考えてプログラミングしてみましょう。

■応用課題1.マウスドラッグで埋められるようにしよう

クリックでマスを埋めるのでは一筆書きになりませんし、ゲームで最も大切な気持ちよさにもつながりません。
マウスクリックでドラッグフラグを作り、drawの中でマスを埋めるように処理を変更しましょう。

■応用課題2.一度埋めたマスはドラッグできないようにしよう

一筆書きなので一度埋めたマスは通れないようにします。
少し雑ですが、一度埋めたマスを通ったら強制的にresetSlotListしてしまえばよいでしょう。
簡単そうに見えて制御が難しいです。わからない場合は動画やデモアプリのプログラムコードを参考にしましょう。

■応用課題3. クリア判定を入れよう

全てのマスが埋まっているかをチェックするisClear命令を作ってあげましょう。

■応用課題4. オリジナル問題を作ってみよう

slotListを編集してみましょう。