Step 4：ブロックにフレンドの画像を反映させる
●10. ブロックを配置する(this.displaypic内)
画像の読み込みが完了した後の表示処理を書いていきます。ブロック崩しゲームでは、this.onLoadの中に表示処理を書いていましたが、今回は2種類の読み込み完了後に、表示処理をまとめたthis.displaypicメソッドを呼び出しています。つまり、this.onLoadの処理をthis.displaypicに書いていくわけです。
scoreObj.x = 10;の次の行を以下のように変更してください。
this.onLoad = function()
↓
this.displaypic = function()
fbimageUnitObjのリスナーを解除するため、window.scrollTo(0, 1);の次の行に以下を追加します。
fbimageUnitObj.removeEventListener("onLoad", this);
var x = 10;の次の行を以下のように変更します。
for(var i = 0 ; i < 5 ; i++){
var y = 0;
for(var j = 0 ; j < 3 ; j++){
var block = new ja.ImageClass(ja.imageUnitObj["block"]);
block.x = x;
block.y = y;
blockContainer.addChild(block);
y += block.h + 10;
}
x += block.w + 10;
}
↓
var blockNo = 0;
for(var i = 0 ; i < 5 ; i++){
var y = 0;
for(var j = 0 ; j < 3 ; j++){
var block = fbimageUnitObj.imageArray[blockNo];
blockNo ++;
if(blockNo >= fbimageUnitObj.imageArray.length){
blockNo = 0;
}
block.x = x;
block.y = y;
blockContainer.addChild(block);
y += block.h + 10;
x += block.w + 10;
}
変更点は大きく2つ。ひとつは、ブロックを生成する方法です。ブロック崩しでは、
var block = new ja.ImageClass(ja.imageUnitObj["block"]);
として、blockを複製していましたが、ソーシャルブロック崩しでは、
var block = fbimageUnitObj.imageArray[blockNo];
として、fbimageUnitObjからblockNo番目の画像を取り出しています。
もうひとつは、フレンドの画像数が15枚よりも少なかったときの処理を加えていることです。新たに「blockNo」という変数を追加して画像数を数えています。以下のように、取得された枚数を越えた場合はblockNoを0に戻し、配列の最初から画像を取り出します。
if(blockNo >= fbimageUnitObj.imageArray.length){
blockNo = 0;
}
最後に、得点を表示しているテキストがフレンドの画像と重ならないように、位置をずらします。文字のY座標を設定している以下の行を変更します。
scoreObj.y = 100;
↓
scoreObj.y = 200;
●11. タッチされたら this.onEnterFrame を実行する
●12. ボールが動きだしゲーム開始(this.onEnterFrame内)
これら2つの処理はブロック崩しゲームとまったく同じです。これでソーシャルブロック崩しゲームが完成しました。
ここまでの処理をまとめると以下になります。
■Main.js
Main = function()
{
EventDispatcher.initialize(this);
var boxObject = new ja.BoxClass(20,20,"#000000"); //ブロックを崩すボールを描画します。
boxObject.x = 150; //ブロックを位置を指定します。
boxObject.y = 200;
var barObj = new ja.BoxClass(100,15,"#000000"); //自分の指で動かすを描画します。
barObj.x = 110; //バーを位置を指定します。
barObj.y = 350;
var xinc = 15; //フレームごとにボールを動かすx方向のピクセル数です。
var yinc = 15; //フレームごとにボールを動かすy方向のピクセル数です。
/*
* facebookクラス
*/
var fc = new FacebookClass('388251564532700' , true , true); //FaceBookアプリID , cookie , oauth
fc.addEventListener("onLogin", this); //ログイン完了のリスナーを登録します
//ログインが完了すると呼ばれます
this.onLogin = function()
{
fc.removeEventListener("onLogin", this); //ログイン完了のリスナーを解除します
fc.getPictureArray(15); //ランダムでフレンドの画像を15枚取得します
fc.addEventListener("onGetPicture", this); //画像取得完了のリスナーを登録します
};
//画像取得が完了すると呼ばれます
this.onGetPicture = function()
{
fc.removeEventListener("onGetPicture", this); //画像取得完了のリスナーを解除します
if(fc.pictureSelectArray.length <= 0)
{
alert("フレンド情報が見つかりませんでした");
}
else
{
console.log(fc.pictureSelectArray);
this.onInit(); //フレンドの写真が一枚以上あれば呼ばれます
}
};
var fbimageUnitObj = new ja.ImageUnitClass(); //facebookから取得した画像を貯めておくオブジェクトを生成します
this.onInit = function()
{
//このゲームで使用する画像の準備をします。
ja.imageUnitObj.addEventListener("onLoad", this); //imageObjがonLoadされたらthisのonLoadを実行します。
ja.imageUnitObj.load(["Image/Bg.png"]); //画像を読み込みます。
fbimageUnitObj.addEventListener("onLoad", this); //imageObjがonLoadされたらlisternerのonLoadを実行します。
fbimageUnitObj.load(fc.pictureSelectArray); //画像を読み込みます。
}
var imagecount=0; //画像読み込みのフラグ
//画像が読み込み終わったあとに以下が実行されます。
this.onLoad = function()
{
imagecount += 1;
if(imagecount >= 2){
this.displaypic(); //this.onLoadとlisterner.onLoadがともに呼ばれたら実行されます
}
}
var blockContainer = new ja.Container(); //表示させるブロックをまとめておくオブジェクトを生成します。
//ポイントを表示させる文字列を生成します。
var point = 0;
var scoreObj = new ja.TextClass();
scoreObj.text = point + "ポイント";
scoreObj.y = 200; /***変更部分***/
scoreObj.x = 10;
//画像が読み込み終わったあとに以下が実行されます。
this.displaypic = function() /***変更部分***/
{
window.scrollTo(0, 1); //アドレスバーを消します。
fbimageUnitObj.removeEventListener("onLoad", this); //onLoadは既に呼ばれたのでリスナーを解除します。 /***変更部分***/
ja.imageUnitObj.removeEventListener("onLoad", this); //onLoadは既に呼ばれたのでリスナーを解除します。
ja.stage.addChild(ja.imageUnitObj["Bg"]); //読み込んでおいた画像を表示させます。
ja.stage.addChild(boxObject); //ボールを表示させます。
ja.stage.addChild(barObj); //バーを表示させます。
ja.stage.addChild(blockContainer); //ブロックをまとめておくオブジェクトを表示します。
ja.stage.addChild(scoreObj);
//ブロックを表示させます。
var x = 10;
/***変更部分***/
var blockNo = 0;
for(var i = 0 ; i < 5 ; i++)
{
var y = 0;
for(var j = 0 ; j < 3 ; j++)
{
var block = fbimageUnitObj.imageArray[blockNo]; //fbから取得した画像を取り出す
blockNo ++;
//もし、15枚より少ない場合は0番目に戻して繰り返す
if(blockNo >= fbimageUnitObj.imageArray.length)
{
blockNo = 0;
}
block.x = x;
block.y = y;
blockContainer.addChild(block); //ブロックを表示させます。
y += block.h + 10; //Y方向に表示位置をずらします。
}
x += block.w + 10; //X方向に表示位置をずらします。
}
/***変更部分***/
//タッチしたときの命令を追加します。
ja.imageUnitObj["Bg"].addEventListener("touchUp", this);
ja.imageUnitObj["Bg"].addEventListener("touchMove", this);
}
//touchUpは画面から指が離れた瞬間に呼ばれます。
this.touchUp = function()
{
ja.imageUnitObj["Bg"].removeEventListener("touchUp", this);
boxObject.addEventListener("onEnterFrame" , this); //タッチが離れた瞬間にゲームをスタートさせます。
}
//バーを動かします。
this.touchMove = function(e)
{
barObj.x = e.touch_x - 50;
}
//ゲームスタート後、1秒間に10回この命令が呼ばれます。
this.onEnterFrame = function(){
//毎回のそれぞれの増加量を設定します。
boxObject.x += xinc;
boxObject.y += yinc;
//当たり判定を使ってブロックを崩します。
for(var i = 0 ; i < blockContainer.numChildren() ; i++) //blockContainerに残っているブロックの数だけ処理を繰り返します。
{
var blockObj = blockContainer.getChildAt(i); //blockContainerからブロックをひとつ指定します。
if(ja.hitObj.intersect(boxObject,blockObj)) //ボールとブロックが衝突しているかを判定します。
{
boxObject.y = blockObj.y + boxObject.h + 1;
point = point + 10; //ポイントを増加させます。
scoreObj.text = point + "ポイント";
blockContainer.removeChildAt(i); //ブロックを取り除きます。
yinc = -yinc; //方向を反転させます。
break;
}
}
//当たり判定を使ってボールをバーで跳ね返らせます。
if(ja.hitObj.intersect(boxObject , barObj))
{
boxObject.y = barObj.y - boxObject.h - 1; //一度衝突したら完全にバーとボールを離します。
yinc = -yinc; //方向を反転させます。
}
//ボールが壁に衝突したときに方向を変化させます。
if(boxObject.x >= 300)
{
boxObject.x = 300;
xinc = -xinc;
}
else if(boxObject.x <= 0)
{
boxObject.x = 0;
xinc = -xinc;
}
if(boxObject.y <= 0)
{
boxObject.y = 0;
yinc = -yinc;
}
else if(boxObject.y > 480)
{
var txtObj = new ja.TextClass();
txtObj.text = "GAME OVER";
txtObj.y = 240;
txtObj.x = 100;
var txtObj2 = new ja.TextClass();
txtObj2.text = "リロードしてください";
txtObj2.y = 290;
txtObj2.x = 70;
ja.stage.addChild(txtObj);
ja.stage.addChild(txtObj2);
boxObject.removeEventListener("onEnterFrame" , this);
}
}
}
完成版のソースコードは以下からダウンロードできます。
今回作成したソーシャルブロック崩しはシンプルなプログラムですので、前回の記事で紹介した難易度調整の処理を加えたり、今回紹介したFacebookClassを使ってカスタマイズしてみたりするとよいでしょう。CanvasとjActionを使えば、インタラクティブなモバイルアプリをWebブラウザーで開発できますし、Facebookからの情報取得も簡単にできます。みなさんもオリジナルのFacebookモバイルアプリを開発してみてはいかがでしょうか。
◆
次回からは、Facebook APIを使ってさまざまなFacebookモバイルアプリを開発していきます。
著者：萩原伸悟（はぎわら・しんご）
企業PR、ソフトウェア開発を専門とする株式会社tadashikuのエンジニア。メー カーでシステムエンジニア、ゲーム制作会社でアプリエンジ ニアを経験後、2011年8月に株式会社tadashikuを設立。PRを目的としたウェブアプリの企画・開発を行なう。HTML5によるウェブア プリ開発を効率化するJavaScriptライブラリー「jAction」を運営。拡張メソッドの追加、実装、サイト制作、サイト内チュートリアルの作成を担当。
