Step 4：ボールを動かす
ボールとバーが描画できたら、ブロックを崩すためのボールを動かしてみましょう。まずは単純に画面がタップされたらボールが初期位置から右下に向かって移動するようにします。
jActionでオブジェクトを動かすときには、一定の間隔（フレーム）でオブジェクトの座標を変更して描画していきます。描画間隔（フレーム）はfps（1秒間に何回書き換えるか）という単位で表され、jActionではなるべく多くのスマートフォンで動作させるためにデフォルト値を10fpsに設定しています。
最初に、フレームごとに移動させる数値を設定します。サンプル2の冒頭付近にある barObj.y = 350; の後に、次の2行を追加します。
var xinc = 10;
var yinc = 10;
xincがx方向の、yincがy方向の増加量です。
続いて、画面がタッチされたときのイベントを登録します。画像の読み込みが終わったときに実行されるonLoadメソッドを定義している this.onLoad = function(){} 内の最後に以下を追加します。
ja.imageUnitObj["Bg"].addEventListener("touchUp", this);
画面がタッチされたら、ja.imageUnitObj["Bg"]の"touchUp"イベントが発生し、イベントが発生したらthisのtouchUpメソッドを実行されます。
イベント発生時に実行するtouchUpメソッドの処理は、Main.jsの最後に以下のようにして記述します。
this.touchUp = function()
{
ja.imageUnitObj["Bg"].removeEventListener("touchUp", this);
boxObject.addEventListener("onEnterFrame" , this);
}
ja.imageUnitObj["Bg"].removeEventListener("touchUp", this);は、登録したtouchUpイベントを削除するための命令です（このイベントはゲーム開始時の1回目しか通らないため)。
次の行のboxObject.addEventListener("onEnterFrame" , this);では、onEnterFrameというイベントを設定しています。onEnterFrameは、フレームごとに発生するイベントです（デフォルトでは10fpsなので1秒間に10回発生）。これでboxObjectのonEnterFrameイベントが発生したら、オブジェクトthisのonEnterFrameメソッドが実行されるようになりました。
続いてMain = function(){}内の最後に、onEnterFrameメソッドを定義し、1フレームごとにボールを移動させる命令を書きます。
this.onEnterFrame = function(){
//毎回のそれぞれの増加量を設定します。
boxObject.x += xinc;
boxObject.y += yinc;
}
これで、画面がタッチされると、100ミリ秒ごとにボールが10pxずつ右下に動いていきます。
ここまでをまとめたのがサンプル3です。
サンプル3の実行画面。画面をタップするとボールが右下に動き始める
■サンプル3[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 = 10; //フレームごとにボールを動かすx方向のピクセル数です。
var yinc = 10; //フレームごとにボールを動かすy方向のピクセル数です。
/***追加部分***/
//このゲームで使用する画像の準備をします。
ja.imageUnitObj.addEventListener("onLoad", this); //imageObjがonLoadされたらthisのonLoadを実行します。
ja.imageUnitObj.load(["Image/Bg.png", "Image/block.png"]); //画像を読み込みます。
//画像が読み込み終わったあとに以下が実行されます。
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.imageUnitObj["Bg"].addEventListener("touchUp", this);
/***追加部分***/
}
/***追加部分***/
//touchUpは画面から指が離れた瞬間に呼ばれます。
this.touchUp = function()
{
ja.imageUnitObj["Bg"].removeEventListener("touchUp", this);
boxObject.addEventListener("onEnterFrame" , this); //タッチが離れた瞬間にゲームをスタートさせます。
}
//ゲームスタート後、1秒間に10回この命令が呼ばれます。
this.onEnterFrame = function(){
//毎回のそれぞれの増加量を設定します。
boxObject.x += xinc;
boxObject.y += yinc;
}
/***追加部分***/
}
Step 5：ボールを壁で跳ね返らせる
サンプル3でボールが動くようになりましたが、ボールが画面の右下まで移動するとそのまま画面から消えてしまいます。そこで、1フレームごとにボールの位置を判定して、画面の端まで移動したら方向を逆転させて跳ね返るように改良します。
サンプル3のthis.onEnterFrame = function(){} 内の最後に、以下を追加しましょう。
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 >= 460){
boxObject.y = 460;
yinc = -yinc;
}
ボールの大きさは20px×20pxですので、x方向の端は0と300、y方向の端は0と460です。if文を使ってボールの位置がx方向の端（0,300）、y方向の端（0,460）に到達したときにボールの移動方向を反転させています。
ここまでをまとめたのがサンプル4です。
サンプル4の実行画面。画面の端までボールが移動すると逆方向に折り返す
■サンプル4[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 = 10; //フレームごとにボールを動かすx方向のピクセル数です。
var yinc = 10; //フレームごとにボールを動かすy方向のピクセル数です。
//このゲームで使用する画像の準備をします。
ja.imageUnitObj.addEventListener("onLoad", this); //imageObjがonLoadされたらthisのonLoadを実行します。
ja.imageUnitObj.load(["Image/Bg.png", "Image/block.png"]); //画像を読み込みます。
//画像が読み込み終わったあとに以下が実行されます。
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.imageUnitObj["Bg"].addEventListener("touchUp", this);
}
//touchUpは画面から指が離れた瞬間に呼ばれます。
this.touchUp = function()
{
ja.imageUnitObj["Bg"].removeEventListener("touchUp", this);
boxObject.addEventListener("onEnterFrame" , this); //タッチが離れた瞬間にゲームをスタートさせます。
}
//ゲームスタート後、1秒間に10回この命令が呼ばれます。
this.onEnterFrame = function(){
//毎回のそれぞれの増加量を設定します。
boxObject.x += xinc;
boxObject.y += 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 >= 460)
{
boxObject.y = 460;
yinc = -yinc;
}
/***追加部分***/
}
}
