ブロック崩しアプリ＆加速度センサー対応カスタマイズ

アシアル情報教育研究所・所長の岡本です

『Monaca』および『Monac Educaiton』には、『新しプロジェクトを作る』時のテンプレートの一つとして、『ブロック崩し』なるプロジェクトが存在します。

Monacaの操作方法を授業で教える時には、こちらのプロジェクトを改造しながら行うと楽しく学習できます。
今回は、ブロック崩しプロジェクトの、カスタマイズ方法を解説します。

Monacaの操作方法を学ぶための簡単なカスタマイズ

研修会などで操作方法をお伝えするために実施しているカスタマイズについて解説します。

目標・実習時間は各5分程度です。

• 玉の数を増やす
• ブロックの配置を変更する
• 玉の色を変更する

保存を忘れて反映されない、ということが良くありますので、保存をお願いします。
また、どうしてもうまくいかない場合は、再度、ブロック崩しのプロジェクトを作り直してから、カスタマイズを行ってみてください。

玉の数を増やす

main.jsファイルの5行目に玉の数を管理している変数『SETTINGS_BALL_NUM』があります。

変更前

SETTINGS_BALL_NUM = 1,

この変数の値を、100とか2,000などの適当な数値に変更します。

変更後

SETTINGS_BALL_NUM = 2000,

反映イメージ

上記の画像のように、圧倒的な玉の数となり、ゲームを簡単にクリアすることができます。

ブロックの配置を変更する

ブロックの配置も、main.jsファイルの変数『blockMap』が管理しています。これは44行目付近を確認してください。

変更前

先ほどの玉の数は『数値』でしたが、ブロックの配置は『二次元のマス目』であり、なおかつ、blueやredなどの色情報を持っています。このような複雑な値を表現する方法として、ここでは『配列』が使われています。また、二次元のマス目なので『二次元配列』が使われております。

そして、色情報は文字列’red’や’blue’のような文字列として保持しています。
なお、nullとなっているところはブロックがありません。
‘null’ではなくnullなのは、nullという特別な値がJavaScriptの世界に存在するからです。
nullはナルやヌルと読みます。

変更後

45行目のnullになっている部分を文字列のredやblueに書き換えます。シングルクォートかタブルクォートで文字列を括ることを忘れずに。
なお、配列についての詳細はプログラミングの基礎でほぼ必ず学ぶ内容なので、そちらで学習して下さい。

玉の色を変更する

実はMonacaのプロジェクトツリーでは画像の簡易編集も行えます。

画像ファイルball.pngをダブルクリックしてみましょう。

すると、画像エディタ付きのプレビューが起動します。

ペンの機能を選択すれば、画像を変更できます。変更した場合は、『保存』を押してください。また、プレビューを閉じる場合は、×のボタンを選択してください。

なお、画像ファイルなどの変更をプレビューに反映させるためには『更新ボタン』を手動で押す必要があります。更新ボタンの場所を画像で示します。

また、パソコン上で作成した画像や音声ファイルをアプリに取り込むこともできます。
プロジェクトパネルにはアップロードボタンがありますので、オリジナルの素材を使いたい場合にはアップロードをご活用ください。

加速度センサーなどを活用した高度なカスタマイズ

デバッガーアプリを使用し、スマートフォンの加速度センサーの値を取得してブロック崩しを行うカスタマイズを紹介します。
なお、スマートフォンの実機の機能を使用しているため、プレビューでは動作しません。

実は加速度センサーのプログラムは最初から入っているが…

『ブロック崩し』プロジェクトには、加速度を使用するカスタマイズを行うコードがあらかじめ仕込まれているのですが、昔からずっと使っているサンプルプロジェクトのため、一部、修正が必要となります。

もし、修正がうまくいかない場合は岡本の方で修正したバージョンのプロジェクトを公開していますので、そちらで動作確認をしてみてください。

ブロック崩し(加速度対応バージョン)

センサーの値を取得して関数を呼び出すタイマー処理を仕込む

283行目付近の関数 init()関数にて加速度センサーを有効にするためのコードを仕込みます。
なお、サンプル中にはコメント形式で、加速度センサーに関するコードが記述されていますが、そちらは削除してください。

変更前

変更後

document.addEventListener("deviceready", function() {
    setInterval(timer, 100);
});
        
function timer() {
    navigator.accelerometer.getCurrentAcceleration(BB.updateAcceleration);
}

これにより、100ミリセカンド毎にupdateAcceleration関数が実行されるようになります。

なお、パラメーターの100の部分は50ミリセカンドでも200ミリセカンドでも構いません。
数値を大きくすると、センサーの値を取得する頻度が増えます。

センサー取得後の処理をカスタムする

センサー取得後の処理はupdateAcceleration関数が担っています。
177行目付近のにある、updateAcceleration()の内容を修正します。
具体的には、194行目付近にある、BB.accelLabel.setText(accelText);の処理がエラーの原因となるため、コメントアウトして無効化します。

◆変更前

BB.accelLabel.setText(accelText);

◆変更後

// BB.accelLabel.setText(accelText);

バイブレーション処理の修正

445行目付近にある関数 vibrate()では、スマホのバイブレーション機能を呼び出しています。バイブレーション呼び出し時に、廃止された命令を使っているため、修正します。

navigator.notification.vibrateは廃止されているためnavigator.vibrateに置き換えます。
具体的には「notification.」の記述を消せば問題ありません。

変更前

if (typeof navigator.notification !== 'undefined') navigator.notification.vibrate(duration);

変更後

if (typeof navigator.notification !== 'undefined') navigator.vibrate(duration);

パドルのサイズを大きくする

143行目付近の変数BB.paddle.widthの値をデフォルトの60より大きな数字に変更します。ボールを跳ね返すパドルが小さいと、加速度センサーでブロック崩しを楽しむことが困難です。

変更前

BB.paddle.width = 60;

変更後

BB.paddle.width = 120;

反映イメージ