鹿児島.mk #28 JavaScriptで『ぷよぷよ』を作ろう...を開催しました
2022/12/13、鹿児島.mkというコミュニティで「JavaScriptで『ぷよぷよ』を作ろう」を開催しました。
内容としては、セガ公式で提供されている『SEGA Challenge!ぷよぷよプログラミングfor Monaca Education』という教材をみんなでやってみる、というものです。
概要
SEGA Challenge!ぷよぷよプログラミングfor Monaca Educationとは
セガが公式で提供しているぷよぷよを題材としたプログラミング教材です。
一部分が抜けた状態のJavaScriptのソースコードが提供され、不足している部分を自分で埋めていき、ぷよぷよを完成させます。
難易度は4段階に分かれていて、基礎コースならJavaScript初心者でも「動いた！」という感動が味わえてるようになっています。上級コースは全部自分で書く必要があるため、中身を理解しながら取り組むとなると中々やり甲斐があります。今回のイベントでは基礎、初級、中級の3コースをターゲットにしました。
- 基礎コース(入力量4行)
- 初級コース(入力量28行)
- 中級コース(入力量95行)
- 上級コース(入力量1015行)
どのコースを選んでもできるものは同じで、穴埋め部分の分量だけが違います。
開発環境はMonaca EducationというWebで利用できる学習環境を利用しています。
こちらを利用するとスマートフォンのアプリでも動作確認できます。
鹿児島.mkについて
鹿児島.mkは鹿児島のIT勉強会コミュニティです。
初学者や初見の方でも気軽に参加できる場を目指しています。
月に1~2回くらいのペースでなんらかのイベントを開催していますので、鹿児島にいるプログラミング好きの方はぜひぜひご参加ください。
会場の様子
今回参加者は教える人を除くと10人ほど集まりました。
参加者同士で相談し合う光景も。
やったこと
基本的にはセガ公式が配布している以下の資料に沿っています。
イベントでは、一通り遊べるぷよぷよが完成するのに必要な第1～4章をやりました。
以下各章の要点だけ簡単に触れておきます。
ぷよの落下
最初の第1章ではぷよの落下を実装しました。
コードを書く前に、まずは「ぷよぷよのソースがどのようにゲームの情報を扱っているか」を把握します。
x,y ゲーム画面を格子状に分割した際、操作ぷよがどこのマスにあるか
left,right 操作ぷよの見た目上の位置
dx,dy 操作ぷよの2つめが1つめのぷよから見て相対的にどこのマスにあるか
rotation 操作ぷよの角度(0~359)
x,y,left,right一見するとどちらも同じ意味のように見えますが、ちょっと違います。
操作ぷよをどの位置に表示するかはleft,rightで制御しますが、それだと詳細過ぎて「このぷよの隣のぷよはどのぷよか」といった論理的な判断が難しくなります。そこで、画面を格子状に分割してx,yで管理しています。
ぷよの左右移動
第2章ではぷよの左右移動を実装しました。
画面の外に飛び出さないか、既に落下済みのぷよと衝突しないかなどの判定が必要となります。
加えて重要なのが、論理座標x,yと物理座標left,rightの移動タイミングです。
「ぷよがどのマスにあるか」のx,yは瞬時に移動しますが、「ぷよをどの位置に表示するか」のleft,rightはすぐには動かさず、移動元と移動先を保存して、複数フレームかけて少しずつ移動させます。これによって気持ちの良いスムーズな操作感を実現しています。
ぷよの回転
第2章ではぷよの回転を実装しました。
ぷよの回転は意外と高度なことをやっています。回転させたい方向に既にぷよがある場合は押し出される形で反対側にずれたり、下にぷよがある場合は一段蹴り上がります。 このような細部の工夫によりぷよぷよは遊びやすいゲームになっています。
ぷよの消去
第3章ではぷよの消去を実装しました。
ぷよの消去は以下のようなロジックになっています。
- 左上のマスから順にぷよを1つ1つ見ていきます。
- 対象となるマスの上下左右を確認して、同じ色のぷよを列挙します。
- 発見された同じ色のぷよの上下左右にも同じ色がないか確認していきます。
- 見つからなくなるまで連鎖的に確認していきます。
- それらで見つかった同じ色のぷよ達は仮置きの配列に格納し、盤面から(いったん)取り除きます。
- 仮置きの配列に格納されたぷよの数が4個以上なら、消す用の配列に移します。
- 仮置きの配列に格納されたぷよの数が3個以下なら、消さない用の配列に移します。
- 対象となるマスの上下左右を確認して、同じ色のぷよを列挙します。
- 全部のマスを確認し終わったら、消さない用の配列の内容を盤面に戻します。
- 消えるぷよの個数と色の情報のまとめを返します。
おわりに
『ぷよぷよ』はプログラミングを学ぶ題材としてちょっとハードル高めではありましたが、書けばそれが画面に反映され視覚的に結果が分かるというのはやはり達成感を感じやすいですね。なにより自分が遊んで楽しいものを自分の手で作れるというのはプログラマー冥利につきます。
ぷよぷよがどのように実装されているのかを一度知ると、今度はテトリスなど他のゲームを見たときも「このゲームはどのように実装されているのだろう」と想像する余地が生まれるので視野も広がりそうです。
教材は公式サイトに公開されているので、まだぷよぷよを作ったことが無い方は、ぜひチャレンジしてみてはどうでしょうか。
Discussion