![見出し画像](https://assets.st-note.com/production/uploads/images/66895544/rectangle_large_type_2_b6580187d75d19c020242e71fe6f7fc9.png?width=1200)
パズルの定番!数字を並び替えるナンバーパズルゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)
この教材は期間限定で無料公開している教材です。
- 定番が持つわかりやすさ
今回作るのは、ナンバーパズルゲームです。パズルの定番であり、わかりやすさとちょうどいい難易度、繰り返し遊べる感覚を味わってください。
![](https://assets.st-note.com/production/uploads/images/66930885/picture_pc_7b826f6d7ab0e0c4116677dabf0a81a0.gif)
デモアプリはこちらから。https://openprocessing.org/sketch/1375009
- クミタテ式プログラミングドリルとは?
クミタテ式は一言で言えば、Scratchの設計図を使ってProcessingフレームワークのプログラムコーディングを学ぶ学習方法です。
初めてクミタテ式を学習する方は、はじめの一歩をご覧ください。チュートリアルや導入方法を紹介しています。
- 動画を見ながら学習する
動画で実況プログラミングしながら解説しています。このテキストを見ながら動画と一緒に学ぶのがおすすめです。
■[ここからスタート!]setupで画面を表示する
再生時に最初の1回だけ実行するsetupの枠組みを使って、画面の大きさを決める初期設定をしてあげましょう。
![画像1](https://assets.st-note.com/production/uploads/images/66892696/picture_pc_58998f673f40cd15d7f3792d8ea2e9ae.png?width=1200)
■drawで背景の色を変える
drawの枠組みを使って、1秒間に60回、停止するまでずっと実行されるようにしましょう。
![画像2](https://assets.st-note.com/production/uploads/images/66892704/picture_pc_2a2e10942cf4dfc559b121828c66d2ff.png?width=1200)
■四角形のマスを、とりあえず1つ表示しよう
3x3の9マスを操作対象としますが、プログラム的にわかりやすくするために5x5の25マスにします。(端っこの判定がやりやすくなります)
5x5の25のマスを作る前に、まずは1つだけマスを表示しよう。
![画像3](https://assets.st-note.com/production/uploads/images/66892716/picture_pc_d4b4ca5b3d2c95db1f0db606f1076af0.png?width=1200)
■マスを5つ横に並べてみよう
四角形を1つ表示できましたか?
続けて、繰り返し処理forを使って横に5個の四角形を並べてみます。
![画像4](https://assets.st-note.com/production/uploads/images/66892722/picture_pc_5febf698751f5b9e6d869d5f40f8b35a.png?width=1200)
■25個のマスを表示する
横に5個マスを並べられましたか?
続けて縦にも並べて25個のマスにしましょう。
![画像5](https://assets.st-note.com/production/uploads/images/66892728/picture_pc_ee176d1f9d7dbacac9f27726188e9cd0.png?width=1200)
■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,
];
![画像6](https://assets.st-note.com/production/uploads/images/66892733/picture_pc_00c105badc5ce5d3c3f18be00416f4ea.png?width=1200)
■配列の中身とマスを紐づけて表示する
配列slotListを用意できましたか?
続けて配列の中身の数値を、マスの上に表示してみましょう。
![画像7](https://assets.st-note.com/production/uploads/images/66892751/picture_pc_01c7d7456c291ea3bc6256ee9602780d.png?width=1200)
■配列の中身がマイナス99だったら壁の表示にする
配列の中身をマスの上に表示できましたか?
続けて、壁の表示をしてみましょう。壁を作ったことにより、3x3のマスが浮かび上がるはずです。
![画像8](https://assets.st-note.com/production/uploads/images/66892760/picture_pc_7f192521166151d2fa89bb1acc3bbcdf.png?width=1200)
■動かせるマスだけ数字を表示しよう
壁の表示はできましたか?
0のマスは空白を意味します。
続けて、空白と壁以外の、動かせるマスだけ数字を表示してみましょう。
![画像9](https://assets.st-note.com/production/uploads/images/66892775/picture_pc_926ac3899480d8353782949fbf998b2c.png?width=1200)
■クリックされたマスを、とりあえず、空白に置き換える
クリックされたマスを座標から特定し、操作できるようにします。
ここではとりあえず、クリックされたマスを空白にして、クリックしたマスが正常に特定できているかをチェックします。
![画像10](https://assets.st-note.com/production/uploads/images/66892789/picture_pc_8ce9deb4b639934e56ed68cdd0521936.png?width=1200)
■オリジナル命令エクスチェンジで、右隣とマスを交換する
クリックされたマスを、右隣のマスと交換するようにします。
ここではマスを交換するexchangeというオリジナル命令を作って使用してみます。
![画像11](https://assets.st-note.com/production/uploads/images/66892800/picture_pc_ae7b8deb4e03a0420ac6c255fc64fd8f.png?width=1200)
クミタテ式の設計図はここまでです。以下の応用課題は自分で考えてプログラミングしてみましょう。
■応用課題1. 壁はクリックできないようにする
壁、つまりマイナス99のマスをクリックできてしまいます。壁のクリックは無効にしましょう。
■応用課題2. 右隣が空白のときだけエクスチェンジできるようにしましょう
無条件で右隣とエクスチェンジできてしまいます。右隣が空白の時だけ、つまり0のときだけエクスチェンジできるようにしましょう。
■応用課題3. 上下左右にエクスチェンジできるようにしよう
右隣だけでなく、上下左右の4方向に対して空白をチェックし、エクスチェンジできるようにしよう。
■応用課題4. クリア画面を作ろう
クリア判定のisClear命令を作り、クリア画面を作ろう。
isClearは、クリアしているなら(1〜8が正しく並んでいるなら)1をretrunし、クリアしていないなら0をreturnするようにします。
■応用課題5. オリジナルのナンバーパズル問題を作ろう
配列slotListの中身をあらかじめ入れ替えて、オリジナルのパズル問題にしよう。
■応用課題6. カスタマイズしよう
オリジナリティのあるパズルゲームにしよう。
画像を分割して、並び替えるゲームなんていかが?
この記事が気に入ったらサポートをしてみませんか?