前回は”乱数”を使って、敵キャラをランダムに出現させるプログラムを作りました。
今回は、いよいよ敵キャラと自分のクマがぶつかった時の処理を作っていきたいと思います。
前回の記事
白クマとの衝突判定を行う
白クマは定期的にyを加算する処理を行っていますが、さらに定期的に自分のクマとぶつかっているかどうかをチェックする処理を追加します。
変更箇所は以下のenterframeと書かれたところです。
enemies[i].addEventListener('enterframe',function(){
this.y++;});
function(){ から }までの間を以下のように書き換えましょう。
enemies[i].addEventListener('enterframe',function(){
this.y++;
if(this.intersect(bear)) {
//衝突した時の処理
bear.frame = 3;
}
});
新たにifという命令が登場しました。
これは、ifのかっこ内の条件を満たす時に{から}までの間を実行するという意味になります。
{から}に記述している「bear.frame = 3;」は、自分のくまの絵をダメージを受けた絵に変えるという意味になります。
ifのかっこ内に書かれた「this.intersect(bear)」は、this(白クマ)がbear(自分のクマ)にぶつかった時、という意味になり、白クマと自分のクマがぶつかった時、bear.frame = 3を実行するという結果になります。
今のままだと、敵キャラにぶつかった後もそのままゲームが進行するので、ぶつかったらゲームオーバーと表示させるようにしましょう。
衝突した時の処理を以下のように書き加えましょう。
if(this.intersect(bear)) {
//衝突した時の処理
bear.frame = 3;
game.end();
}
これで、ぶつかった時にゲーム進行が止まり、ゲームオーバーと表示されるようになります。
微調整してゲームを完成させる
簡単なゲームではありますが、一通りの機能は作り終えました。
最後に微調整として、自分のクマの初期位置を変えたり、敵キャラの移動スピードを変更します。
まずは、以下のようにコードを書き換え、自分のクマの初期位置を変更します。
bear = new Sprite(32, 32);
bear.image = game.assets['chara1.gif'];
bear.x = 320/2;
bear.y = 320/2;
game.rootScene.addChild(bear); //シーンに普通のクマを追加
bear.x、bear.yは自分のクマのx座標、y座標です。
320は画面の幅、高さですので、/2(割り算)をして画面の幅、高さの半分の位置を設定しました。
実は上の書き方だときっちり真ん中には設定されないです。くま自身の幅、高さ分をマイナスしないと、画面の中央はくまの左上にセットされてしまうからです。
ぴったり真ん中にするなら、くまの幅、高さ32を/2した分だけマイナスしましょう。
bear = new Sprite(32, 32);
bear.image = game.assets['chara1.gif'];
bear.x = 320/2 - 32/2;
bear.y = 320/2 - 32/2;
game.rootScene.addChild(bear); //シーンに普通のクマを追加
次に敵のスピードを変えます。
敵キャラは「y++」ずつ進んでいるのですが、これは定期的にyを+1するという意味になります。
これを「y+=2」と書き換えると、定期的にyを+2するという意味に変わり、進行スピードが倍になります。
enemies[i].addEventListener('enterframe',function(){
this.y+=2;
if(this.intersect(bear)) {
//衝突した時の処理
bear.frame = 3;
game.end();
}
});
ゲーム難易度に物足りなかったら、プラスする値を変えると白クマがスピードアップするので難しくなります！
出現する敵キャラの数を変えても難易度が上がりますね、私は以下のように設定してみました。
for (var i=0; i<=30; i++) {
//白クマくん
enemies[i] = new Sprite(32, 32);
enemies[i].image = game.assets['chara1.gif'];
enemies[i].x=Math.random()*320;
enemies[i].y=Math.random()*320 - 350;
enemies[i].frame=5;
enemies[i].addEventListener('enterframe',function(){
this.y+=3;
if(this.intersect(bear)) {
//衝突した時の処理
bear.frame = 3;
game.end();
}
});
game.rootScene.addChild(enemies[i]);//シーンに普通のクマを追加
}
完成したゲームは以下のリンクからプレイ出来ますので、是非遊んでみて下さい！
（ゲームオーバーした後は、画面をリロードすると再度プレイ出来ます）
完成コード
完成コードを用意したので、参考にして下さい！
enchant();
window.onload = function() {
var game = new Game(320, 320);
game.preload('chara1.gif'); // chara1.gifを読み込む
game.onload = function() {
bear = new Sprite(32, 32);
bear.image = game.assets['chara1.gif'];
bear.x = 320/2 - 32/2;
bear.y = 320/2 - 32/2;
game.rootScene.addChild(bear); //シーンに普通のクマを追加
//rootSceneへのイベントは画面全体のイベントとなる
game.rootScene.addEventListener('touchend', function(event) {
bear.x = event.x; //event変数にタップされた座標が入る
bear.y = event.y;
});
enemies = [];
for (var i=0; i<=30; i++) {
//白クマくん
enemies[i] = new Sprite(32, 32);
enemies[i].image = game.assets['chara1.gif'];
enemies[i].x=Math.random()*320;
enemies[i].y=Math.random()*320 - 350;
enemies[i].frame=5;
enemies[i].addEventListener('enterframe',function(){
this.y+=3;
if(this.intersect(bear)) {
//衝突した時の処理
bear.frame = 3;
game.end();
}
});
game.rootScene.addChild(enemies[i]);//シーンに普通のクマを追加
}
}
game.start();
}
