Step 10：ゲームオーバーをつくる
ボールがバーの位置を越えて画面の下まで移動したらゲームは終了です。ここまでのサンプルでは画面の下にボールが来たら方向を反転させていましたので、プログラムを一部書き換えてゲームオーバーの処理を加えます。 if(boxObject.y <= 0){ の後のelse ifを以下のように書き換えます。
else if(boxObject.y >= 460)
{
boxObject.y = 460;
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);
}
ボールのY座標が480を超えたら、「GAME OVER」の文字を表示します。
var txtObj = new ja.TextClass();
new ja.TextClass()でテキストオブジェクトを生成しています。ja.TextClass()のプロパティは以下のとおりです。
| px | テキストの文字の大きさ（文字列） |
| フォント指定 | フォント指定（文字列） |
| x | X座標（ピクセル） |
| ｙ | Y座標（ピクセル） |
| color | 文字の色（16進を文字列で記入） |
| text | 表示する文字列 |
ゲームの再スタートを誘導するために「リロードしてください。」という文字も表示します。
var txtObj2 = new ja.TextClass();
それぞれaddChildで画面上に表示し、最後にonEnterFrameのリスナーを取り除きます。ここまでをまとめたのがサンプル9です。
サンプ9の実行画面。ボールがバーよりも下に移動するとゲームオーバーになる
■サンプル9[Main.js]（実行画面）
Main = function()
{
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方向のピクセル数です。
//このゲームで使用する画像の準備をします。
ja.imageUnitObj.addEventListener("onLoad", this); //imageObjがonLoadされたらthisのonLoadを実行します。
ja.imageUnitObj.load(["Image/Bg.png", "Image/block.png"]); //画像を読み込みます。
var blockContainer = new ja.Container(); //表示させるブロックをまとめておくオブジェクトを生成します。
//画像が読み込み終わったあとに以下が実行されます。
this.onLoad = function()
{
window.scrollTo(0, 1); //アドレスバーを消します。
ja.imageUnitObj.removeEventListener("onLoad", this); //onLoadは既に呼ばれたのでリスナーを解除します。
ja.stage.addChild(ja.imageUnitObj["Bg"]); //読み込んでおいた画像を表示させます。
ja.stage.addChild(boxObject); //ボールを表示させます。
ja.stage.addChild(barObj); //バーを表示させます。
ja.stage.addChild(blockContainer); //ブロックをまとめておくオブジェクトを表示します。
//ブロックを表示させます。
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; //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)) //ボールとブロックが衝突しているかを判定します。
{
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);
}
/***書き換え部分***/
}
}
