今回つくるゲーム
難易度
この記事ではそれぞれのコードの意味を解説していきたいと思いますので作り方の詳細はYouTube動画で確認してください。
まずゲームをプレイしてみましょう。
すべてのコード
今回のゲームのすべてのコードはこちらにあります。この記事ではこのコードの意味を解説していきます。
ぷよぷよの仕組み
マス目で管理する
ぷよぷよの仕組みですが、まず以下のようにマス目をタテ14×ヨコ8で並べ、それぞれ1〜112の番号をつけます。そして一つ一つの枠の状態を管理することでゲームを作っていきます。最初の状態はオレンジで塗りつぶした周りの部分が枠で、それ以外の白い部分はぷよぷよが落ちてくるステージということですね。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-10-1024x571.png?resize=1024%2C571&ssl=1)
そしてどのマス目にどの色のぷよがいるかは、「ぷよリスト」というリストで管理します。以下のように、1〜50を赤ぷよの部屋、51〜100を青ぷよの部屋というように250まで部屋を作っておきます。そして、例えば下図のように緑と紫のぷよぷよが落ちてくる時、緑の部屋の1番目(101の場所)に12を入れ、紫の部屋の1番目(201の場所)に4を入れます。
『12がぷよリストの101番目にあるということは、12のマス目を緑色にする』
というように判断していくということです。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-11-1024x571.png?resize=1024%2C571&ssl=1)
左右移動・回転の仕組み
以下はゲームを始めてしばらくたったときの状態です。たとえば、93、94、102が青色のぷよになっているのでぷよリストの50〜53番にそれぞれの数字が入っています。そして上からも青色のぷよが降ってきているのでぷよリストの54番に21が入っています。もう一つ大切なリストが”移動不可”のリストです。着地して固定されたぷよの番号は”移動不可”に含まれます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-12-1024x571.png?resize=1024%2C571&ssl=1)
そしてこの状態から左にずれた状態を考えてみましょう。以下のような状態になりますが、ぷよリストの4番の数字が13から12に変化し、54番の数字が21から20に変化しているのがわかります。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-13-1024x571.png?resize=1024%2C571&ssl=1)
次にぷよぷよを回転させます。1つ回転させると以下のようになります。青の位置は変わらず赤が12から21に変化しています。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-14-1024x571.png?resize=1024%2C571&ssl=1)
連鎖で消える仕組み
次にぷよぷよを落としたときに同じ色が4つ以上つながって連鎖して消える仕組みです。このような状況を考えてみましょう。この状態になると92,93,94,102が連鎖して消えることはわかりますね。これをどうやってプログラムで書いていくかですが、着地したぷよをすべて色ごとにリスト化して分けます。赤の部屋には98,90,86,91が入りますね。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-15-1024x571.png?resize=1024%2C571&ssl=1)
そして、それぞれの色で、4つ以上の塊ができているかを調査します。調査の方法ですが、赤色の場合は、最初に98にくっついている赤ぷよがないかを調査します。そうすると90がくっついているので次に90にくっついている赤ぷよがないか調査します。そうすると91がくっついているので、次に91にくっついている赤ぷよがないか調査すると、これ以上ないので、この塊は3つということになり、消えないという判断となります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-16-1024x571.png?resize=1024%2C571&ssl=1)
同様に青を調査すると4つの塊ができることがわかるのでそれらのぷよの番号を”消える”リストに追加します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-17-1024x571.png?resize=1024%2C571&ssl=1)
ぷよを落とす
そして消えるぷよが決まったら、ぷよを消してその上にあるぷよを落とします。
下図のようにぷよりすとの51〜54は空になります。そして、3番の部屋が86から102に変わります
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-18-1024x571.png?resize=1024%2C571&ssl=1)
これがぷよぷよの仕組みの一連の流れになります。これをコードに書いていくことになります。
スプライトの構成
今回のプログラムのスプライトの構成は以下の通りです。
ぷよ、落下、回転、次のぷよの4つで構成します。実はスプライトを分ける必要はほとんどないのですが、理解しやすいように役割ごとに別のスプライトに分けて書くのもひとつの技です。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-19-790x1024.png?resize=790%2C1024&ssl=1)
ぷよのコード
ぷよのスプライトには、以下のように7種類のコスチュームがあります。それぞれのマス目をどのコスチュームにするかで、ぷよぷよの動きを作っているのです。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-20-1024x870.png?resize=1024%2C870&ssl=1)
ぷよのコードは以下の通りです。112個のマスを作成して、それぞれのマスがどのコスチュームになるのかの仕組みが書かれています。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-21-1024x899.png?resize=1024%2C899&ssl=1)
落下のコード
次に落下のコードを書いていきます。まずは落下していく部分です。ひとつひとつここで説明するのは大変なので、詳しい解説は是非動画をみてください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-22-1024x420.png?resize=1024%2C420&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-23-1024x825.png?resize=1024%2C825&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-26-1024x837.png?resize=1024%2C837&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-27-1024x837.png?resize=1024%2C837&ssl=1)
ここからは判定の部分です。判定の定義の中は大変複雑になってしまいます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-28-1024x729.png?resize=1024%2C729&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-29-1024x1009.png?resize=1024%2C1009&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-30-1024x1009.png?resize=1024%2C1009&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-32-1024x1009.png?resize=1024%2C1009&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-33-1024x1009.png?resize=1024%2C1009&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-34-1024x1009.png?resize=1024%2C1009&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-35-1024x840.png?resize=1024%2C840&ssl=1)
左右回転のコード
次に左右回転のコードです。ここには左右矢印キーで左右移動、スペースキーで回転する仕組みが記載させれています。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-36-1024x902.png?resize=1024%2C902&ssl=1)
次のぷよ
つぎに”次のぷよ”のコードです。
まずコスチュームに以下のように5つのぷよを描きます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-38-1024x879.png?resize=1024%2C879&ssl=1)
そして、以下のようにコードを書きます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2024/02/image-39-1024x907.png?resize=1024%2C907&ssl=1)
以上でぷよぷよの完成になります。落下の部分が難関ですが、このコードのいいところは、色の反応などは使っていないので、その通りに作ればかならずちゃんと動くという点です。
是非動画を見ながら作ってみてください!