パズルの定番！数字を並び替えるナンバーパズルゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)

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

- 定番が持つわかりやすさ

今回作るのは、ナンバーパズルゲームです。パズルの定番であり、わかりやすさとちょうどいい難易度、繰り返し遊べる感覚を味わってください。

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

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

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

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

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

https://youtu.be/HanEB9zGunI

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

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

■drawで背景の色を変える

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

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

3x3の9マスを操作対象としますが、プログラム的にわかりやすくするために5x5の25マスにします。（端っこの判定がやりやすくなります）
5x5の25のマスを作る前に、まずは1つだけマスを表示しよう。

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

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

■25個のマスを表示する

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

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

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

// Processing
int[] slotList = new int[]{
 -99, -99, -99, -99, -99,
 -99,  1,  2,  3, -99,
 -99,  4,  8,  0, -99,
 -99,  7,  6,  5, -99,
 -99, -99, -99, -99, -99,
};

// p5.js
let slotList = [
 -99, -99, -99, -99, -99,
 -99,  1,  2,  3, -99,
 -99,  4,  8,  0, -99,
 -99,  7,  6,  5, -99,
 -99, -99, -99, -99, -99,
];

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

配列slotListを用意できましたか？
続けて配列の中身の数値を、マスの上に表示してみましょう。

■配列の中身がマイナス99だったら壁の表示にする

配列の中身をマスの上に表示できましたか？
続けて、壁の表示をしてみましょう。壁を作ったことにより、3x3のマスが浮かび上がるはずです。

■動かせるマスだけ数字を表示しよう

壁の表示はできましたか？
0のマスは空白を意味します。
続けて、空白と壁以外の、動かせるマスだけ数字を表示してみましょう。

■クリックされたマスを、とりあえず、空白に置き換える

クリックされたマスを座標から特定し、操作できるようにします。
ここではとりあえず、クリックされたマスを空白にして、クリックしたマスが正常に特定できているかをチェックします。

■オリジナル命令エクスチェンジで、右隣とマスを交換する

クリックされたマスを、右隣のマスと交換するようにします。
ここではマスを交換するexchangeというオリジナル命令を作って使用してみます。

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

■応用課題1. 壁はクリックできないようにする

壁、つまりマイナス99のマスをクリックできてしまいます。壁のクリックは無効にしましょう。

■応用課題2. 右隣が空白のときだけエクスチェンジできるようにしましょう

無条件で右隣とエクスチェンジできてしまいます。右隣が空白の時だけ、つまり0のときだけエクスチェンジできるようにしましょう。

■応用課題3. 上下左右にエクスチェンジできるようにしよう

右隣だけでなく、上下左右の4方向に対して空白をチェックし、エクスチェンジできるようにしよう。

■応用課題4. クリア画面を作ろう

クリア判定のisClear命令を作り、クリア画面を作ろう。
isClearは、クリアしているなら（1〜8が正しく並んでいるなら）1をretrunし、クリアしていないなら0をreturnするようにします。

■応用課題5. オリジナルのナンバーパズル問題を作ろう

配列slotListの中身をあらかじめ入れ替えて、オリジナルのパズル問題にしよう。

■応用課題6. カスタマイズしよう

オリジナリティのあるパズルゲームにしよう。
画像を分割して、並び替えるゲームなんていかが？