マリオの時間処理(プログラミングでマリオを作る第46回)

今回はやることが少ない、しかしめんどい時間切れ処理の実装を行います。

実行結果は以下のようになります。

時間を表示して、時間が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を参照してください。

感想

表示を追加するだけで、少し見栄えがよくなった気がします。

しかし、完成にはまだまだかかりそう。

修行はまだまだ終わらない。

Pocket