マリオと敵キャラの踏みつけ処理の実装を行います。
解説
前回は、クリボとマリオの当たり判定を行なったので、敵キャラの踏みつけ処理を書いていきます。
仕様として敵キャラを踏みつけると、マリオがジャンプして、敵は潰れてしばらくしたら
消えるような処理を入れます。
まず、const.jsを開いて新しく定数を定義します。
const.js
DEAD_ANIM_FRAMEは死んでから消えるまでの秒数で
一秒間が60フレームなので、3秒で消すことにします。
STEP_UP_NUMはマリオがクリボを踏んづけるとY軸方向に上昇する値です。
// chapter28
var DEAD_ANIM_FRAME = 180;
var STEP_UP_NUM = 13;続いて、kuribo.jsを修正していきます。
kuribo.js
まず、新しいメンバー変数を追加します。
animYはアニメーションを切り取るためのY座標
deadCntは死ぬアニメーションを管理するカウントです。
this.animY = 0;
this.deadCnt = 0;次にマリオとの当たり判定の関数を修正します。
踏みつけ判定ですが、クリボの中間部分よりもマリオの下が上にある状態の時に行います。
それよりも下の部分に当たり判定があった場合は、踏みつけと判定されないようにします。
注：落ちる速度が速いと踏みつけ判定が行われずに衝突判定となってしまいますが、
その場合は、マリオのY軸方向の加算値を分散して当たり判定を行うようにします。
今回は、その処理を入れていません。
まず、マリオの上とクリボの下の部分の当たり判定の修正をします。
クリボの実際の高さは16ですが、draw関数で切り抜いている部分は32なので、
heightから32に変更します。
次に、マリオの下がクリボの上よりも下にある場合を判定させます。
クリボは上部に空白があるために、空白部分を取り除いた座標を設定します。
次に、マリオの下がクリボの中間位置よりも上にある場合の条件分岐をかきます。
中間位置はクリボの一コマから空白部分を引いたものに、クリボの高さを2分割したものになります。
踏みつけ判定内では、クリボを潰れたアニメーションにして、
marioを上昇させるために、jumpPowerにSTET_UP_NUM代入しています。
/*
chapter27
キャラクターとの当たり判定
mario:キャラクタークラス
*/
Kuribo.prototype.collisionWithMario = function(map,mario){
if(!mario.isDead()){
// x軸
if(mario.moveNumX < this.posX + 32 && mario.moveNumX + 32 > this.posX)
{
// マリオの上とクリボの下(クリボは32*32で切り取られているので、最下部は32+される)
if(mario.posY < this.posY + 32){
// マリオの下とクリボの上
// 踏みつけ判定(キャラの半分より上の場合踏みつけと判定させる)
// マリオの下がクリボの上よりも下にある場合
if(mario.posY + mario.height > this.posY + (32 - this.height)){
// マリオの下がクリボの中間地点よりも上にある場合
if(mario.posY + mario.height <= this.posY + (32 - this.height) + (this.height / 2)){
// 潰れたアニメーションにする
this.state = DEAD_ACTION;
this.animY = 64;
this.direction = LEFT_DIR;
mario.jumpPower = STEP_UP_NUM;
}
else{
mario.collisionWithEnemy(map);
}
}
}
}
}
}次に、死亡時のアニメーション処理を実装します。
/**
chapter28
死亡時のアニメーション
*/
Kuribo.prototype.deadAction = function(){
if(this.state == DEAD_ACTION){
if(this.deadCnt++ == DEAD_ANIM_FRAME){
this.state = DEAD;
}
}
}マリオと同じように死亡判定の関数も書きます。
/**
chapter28
死亡判定
*/
Kuribo.prototype.isDead = function(){
if(this.state >= DEAD_ACTION){
return true;
}
return false;
}次に、死亡時は動かないようにupdate関数をflagで制御します。
Kuribo.prototype.update = function(map,mario,moveNum){
if(!this.isDead()){
this.move(map,moveNum);
this.collisionWithMario(map,mario);
}
this.deadAction();
}次に、死んでいる場合は描画させないようにして、
死亡時のアニメーションに変更できるように、this.animYを引数に入れます。
Kuribo.prototype.draw = function(ctx,texture,scrollX){
if(this.state != DEAD){
ctx.drawImage(texture, (this.animX * 32) + (this.direction * 128),this.animY,32,32,this.posX - scrollX,this.posY,32,32);
}
}最後に、マップチップを変更して、踏みつけさせやすいようにします。
var gMapChip = [
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,64,0,0,0,0,0,64,0,0,0,0,0,0,0,64,0,0,0,0,0,0,0,64,64,64,64,64,0,0,64,64,64,64,64,0,0,64,64,64,64,64,0,0,64,0,0,0,0,0,64,0,0,0,0,0,0,0,64,0,0,0,0,0,0,0,64,64,64,64,64,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,64,64,0,0,0,64,64,0,0,0,0,0,0,64,0,64,0,0,0,0,0,0,64,0,0,0,64,0,0,0,0,64,0,0,0,0,64,0,0,0,64,0,0,64,64,0,0,0,64,64,0,0,0,0,0,0,64,0,64,0,0,0,0,0,0,64,0,0,0,64,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,64,0,64,0,64,0,64,0,0,0,0,0,64,0,0,0,64,0,0,0,0,0,64,0,0,0,64,0,0,0,0,64,0,0,0,0,64,0,0,0,64,0,0,64,0,64,0,64,0,64,0,0,0,0,0,64,0,0,0,64,0,0,0,0,0,64,0,0,0,64,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,64,0,0,64,0,0,64,0,0,0,0,64,0,0,0,0,0,64,0,0,0,0,64,64,64,64,64,0,0,0,0,64,0,0,0,0,64,0,0,0,64,0,0,64,0,0,64,0,0,64,0,0,0,0,64,0,0,0,0,0,64,0,0,0,0,64,64,64,64,64,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,64,0,0,0,0,0,64,0,0,0,64,64,64,64,64,64,64,64,64,0,0,0,64,0,0,64,0,0,0,0,0,64,0,0,0,0,64,0,0,0,64,0,0,64,0,0,0,0,0,64,0,0,0,64,64,64,64,64,64,64,64,64,0,0,0,64,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,64,0,0,0,0,0,64,0,0,64,0,0,0,0,0,0,0,0,0,64,0,0,64,0,0,0,64,0,0,64,64,64,64,64,0,0,64,64,64,64,64,0,0,64,0,0,0,0,0,64,0,0,64,0,0,0,0,0,0,0,0,0,64,0,0,64,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,64],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,64,0,0,0,0,0,64,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[112,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,113,114],
[128,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,129,130],
];githubはこちら