今回はやることが少ない、しかしめんどい時間切れ処理の実装を行います。
実行結果は以下のようになります。
時間を表示して、時間が0を切るとマリオのやられ判定が発生します。
今回実装する内容
1.残り時間の表示
2.残り時間を減らして、0になったらマリオのやられ処理を呼ぶ。
それでは、実装していきます。
timer.js
タイマーを管理するのに、新しくタイマークラスを実装しました。
中身は時間を減らす処理をするのみで、描画はmainで定義したdrawCoin関数を使います。
function Timer(time){
this.cnt = time;
}
/**
* timer update
*
* 時間切れ:trueを返す
*/
Timer.prototype.update = function(){
if(this.cnt == 0){
return true;
}
this.cnt--;
return false;
}
const.js
定数定義クラスにステージごとの時間切れ秒数を定義します。
// chapter46
// 各々のステージごとに決められた制限時間
let STAGE_TIMES = [(60 * 60 * 3),];
main.js
まず、timerクラスをオブジェクト化します
// chapter46
// 各々のステージごとに決められた制限時間
let STAGE_TIMES = [(60 * 60 * 3),];
コイン数を描画していた、drawCoin関数は数字を右端を基準に描画する関数でしたが、この関数名をdrawNumberに変更して、左端からも描画できるようにし、文字の描画スケールも関数から変更できるように修正します。
/**
* 数値の描画
* @param {*} posX
* @param {*} posY
* @param {*} coinNum
* @param {*} scaleX
* @param {*} scaleY
*/
function drawNumber(posX,posY,coinNum,scaleX = 1,scaleY = 1,fromRight = true){
var digits = getDigits(coinNum); // 桁数を取得
var maxNumber = getMaxNumber(digits);
// 描画位置
var numberPosX = fromRight == true ? posX - (digits * 25 * scaleX) : posX;
// 全て描画するまで
while(maxNumber >= 1){
// 一番上の桁数から描画する
g_Ctx.drawImage(gCoinTex, Math.floor((coinNum / maxNumber )) * 20,0,20,17, numberPosX,posY, 20 * scaleX, 17 * scaleY);
coinNum -= Math.floor((coinNum / maxNumber)) * maxNumber; // 一番上の桁数を引く(111だったら100を引く)
maxNumber = Math.floor(maxNumber / 10); // 111 = 11にする
numberPosX += (25 * scaleX);
}
}
関数の引数の値にdefault値をいれることで、引数を指定してない場合に、
その値が代入されることになるので、今ままで使用していた関数は変更せずに
使用することができます。
コイン数の描画
原作のマリオと描画位置を合わせるために、コイン数の描画位置を真ん中にもっていきます。
// コイン
g_Ctx.drawImage(gMapTex,32,64,32,32,280,8,22,22);
// ×
g_Ctx.drawImage(gMapTex,480,480,32,32,311,8,22,22);
// コイン数
drawNumber(343,10,gMario.coinNum,1,1,false);
実行結果にあるように、コインと×の符号も描画しています。
その際に、本来のスケールよりも小さくしています。
時間の描画
時間の描画を行います。
TIMEという画像を新しく書いたので、それを使用して、数値はDrawNumber関数を使います。
// chapter46 timer
g_Ctx.drawImage(gMapTex,352,480,64,32, 550,0, 64, 32);
drawNumber(615,32,Math.floor(timer.cnt / 60),0.8,0.8);
時間切れ処理
moveInStage関数内で、timerクラスのupdate関数を呼びます。
時間が0になったら、trueを返すので、その場合にマリオのやられ判定を呼ぶようにします。
// 時間更新
if(timer.update()){
// 時間切れ死亡処理
gMario.timeOut();
}
最後に、死んだ後に、タイマーがリセットさせるような関数を作成し、initStage関数内で呼びます。
/**
* ステージごとにの時間の初期化
* @param {*} stageNum
*/
function initStageTimes(stageNum){
timer.cnt = STAGE_TIMES[stageNum - 1];
}
mario.js
マリオに時間切れ関数を実装します。
中身は単純に死亡処理を呼び出すだけです。
/**
* マリオ時間切れ時の処理
*/
Mario.prototype.timeOut = function(){
if(!this.isDead()){
this.setDeadParam();
}
}
/**
* やれれ処理ようの値をセットする
*/
Mario.prototype.setDeadParam = function(){
this.state = DEAD_ACTION;
this.addPosY = 14;
}
死亡判定の共通処理となる設定をsetDeadParam関数を作成し、中身に埋め込みました。
最後に、忘れずにtimer.jsを読み込んでください。
まとめ
画像の用意と、位置調整を除くと簡単な実装でした。
全体はgithubを参照してください。
感想
表示を追加するだけで、少し見栄えがよくなった気がします。
しかし、完成にはまだまだかかりそう。
修行はまだまだ終わらない。