アシアル情報教育研究所です
ブロック崩しの簡単なカスタマイズについての記事は既に公開しております。
Monacaを体験する1コマ程度の授業などでは引き続き、以下の記事をご参照ください。
本記事では、ブロック崩しアプリのより詳細な解説とカスタマイズの資料をご案内しております。
通常授業や課題制作の作品作りで動作原理から説明されたい場合や発展的なカスタマイズでご活用頂けます。
以下、ダウンロード資料の解説記事になります。
ブロック崩しのカスタマイズ
Monaca Educationの「新しいプロジェクトを作る」ボタンから、「ブロック崩し」ゲームを作れます。
プログラムに付属するソースコードを修正して、カスタマイズできます。
本記事では、最初にプログラムの概要を紹介した後、いくつかのカスタマイズ例を紹介します。
概要
まず簡単に、ブロック崩しのプログラムの概要を紹介します。
このブロック崩しプログラムは、PIXI.jsというJavaScriptライブラリを使用していて、ライブラリ以外のプログラムの行数は500行弱です。
プログラムの冒頭で、ゲームを成立させるために必要な変数やオブジェクトを用意します。中盤以降、ゲーム画面の初期化、そしてゲーム中に繰り返し実行する再計算処理（プレーヤーの操作の受付、ボールやブロックなど画面の更新）が書かれています。
添付資料「ブロック崩しの概要」は、ファイル構成と、そのファイルの中の各部の機能、そして特にカスタマイズの中心になる部分を紹介しています。この後で紹介する、個々のカスタマイズ例をより深く理解したいときや、さらに別のカスタマイズを考えるときに参考になります。
続いて、「ブロック崩しのカスタマイズ例」は、カスタマイズ例と、修正箇所を紹介する資料です。それぞれのカスタマイズは、1行から数行の修正・追加で実現できるので、気軽に試していただければと思います。
最後に、それぞれのカスタマイズ例について短い説明を付します。
複数のカスタマイズのアイデアを組み合わせると、さらに面白いゲーム性を生み出すことができるでしょう。ぜひ試してみてください。
カスタム例
カスタマイズ例: ボールの最初の位置を変える
ゲームスタート時のボールの位置を変えます。低くすると、加速度がかかる時間が短いので、パドルの高さにきても速度が上がらないことが確認できます。
また、
- 画面を座標系（座標平面）と見る機会になる
- コンピュータ上の描画では、画面左上を座標の原点（0,0）の点にすることがある
ことを学べます。
カスタマイズ例: ブロックの初期配置を変える
ブロックの配置を変えます。このカスタマイズを通じて、ブロックの色ごとに得点の配点が違うことがわかります。
プログラムでは、ブロックの配置を二次元配列で表しています。二次元配列を学ぶ導入にすることもできます。
カスタマイズ例: ブロックの色ごとに得点を変える
もともと、ブロックの色ごとに得点が違うのですが、さらに変更する方法を紹介しています。
switch case文を学ぶ機会にもなっています。
カスタマイズ例: ブロックに当たったら、ボールを増やす
ブロックにボールが当たるたびに、ボールが1個増えます。
ゲーム性が高い一方、クリアしやすくなるわけではない（二兎を追うと一兎も得ない）ところが面白いカスタマイズです。
カスタマイズ例: ブロックの緑色を追加する
もともと、プロジェクトには緑色のブロックの画像が含まれていますが、使われていません。別のカスタマイズ例「ブロックの初期配置を変える」と併せて実装すると、カラフルで個性のあるブロック配置を実現できます。
カスタマイズ例: 緑色のブロックを崩したら、ボールを３つ増やす
緑色のブロックを追加するカスタマイズの後に、このカスタマイズができます。
このカスタマイズ例から、少し難易度が上がります。修正する箇所が複数になり、修正した箇所が整合していないと、正しく動作しません。
あらかじめ、ブロックに色の情報を追加しておき、ブロックにボールが当たったときに、どの色のブロックか判定、緑色なら…という処理を書いていきます。
「ボールを画面に追加する処理」は、最初からあるものを再利用できます。
カスタマイズ例: 緑色のブロックを崩したら、得点を3倍にする
緑色のブロックを追加するカスタマイズの後に、このカスタマイズができます。
あらかじめ、ブロックに色の情報を追加しておき、ブロックにボールが当たったときにどの色のブロックか判定、緑色なら…という処理を書いています。
カスタマイズ例: ボールがパドルに当たったときに、音を鳴らす
JavaScriptのオーディオオブジェクトを追加して、操作しています。
- 音声ファイルのアップロード
- ファイルパスの指定
などがあり、複数の箇所に加えた修正内容が、互いに整合しないと、音は出ません。少し注意が必要です。
音の素材は自分でPCやスマートフォンを使って作成することができます。著作権フリーの音声ファイルを公開しているサイトを利用することも考えられます。
カスタマイズ例: 背景に画像を設定する
背景に画像を設定する関数の定義を追加した上で、画面を初期化する処理の中からその関数を呼び出すようにします。画像を指定のフォルダ（img）にアップロードし、プログラムの中で適切にその画像のファイルパスを指定する必要があります。
画像の上部はブロックによって隠されるので、上記のカスタマイズ「ブロックの初期配置を変える」と組み合わせて、「ブロックを崩すと答えが現れるクイズ」のように演出することができます。
以上です。
いろいろなカスタマイズを試みて、楽しんでいただければと思います。