HPバーの色変更
残りHPの割合に合わせて色クラスをセットしていましたが、ダメージを受けた際の判定処理（動的は変更）が未実装でしたので、今回はコチラを対応します。
残数（割合）の判定
HPの色判定は、HTMLの描画時とJSによるHP変動時に行います。animateメソッド前や後に行うと変更のズレが生じるため、animate完了直後に色変更ができるようにcomplete内でのコールバック関数で行います。
メッセージ処理用JS（/Public/Assets/js/Battle/message.js）
// ==============================================
// HPバーの処理 =================================
//
/**
* HPバーのアニメーションを実行
* @param string target
* @param mixed param
* @param now element
* @return Promise
**/
var doAnimateHpBar = function(target, param){
return new Promise((resolve, reject) => {
// 対象のHPバーを取得
var hpbar = $('#hpbar-' + target);
var hp = hpbar.attr('aria-valuenow') - param;
// 最小値の処理
if(hp < 0){
hp = 0;
}
// 最大値の処理
if(hp > hpbar.attr('aria-valuemax')){
hp = hpbar.attr('aria-valuemax');
}
// 処理後のHPバーの長さを算出
var width = hp / hpbar.attr('aria-valuemax') * 100;
// 非同期1
var promise1 = new Promise((resolve, reject) => {
// 長さを変更
hpbar.animate({
width: width + "%"
}, {
duration: 500,
easing: 'easeOutQuad',
complete: function(){
// 処理完了(css変更のズレがあるため0.5秒後にresolveを返却)
if(target === 'friend'){
// HPバーの色チェック
hpbar.removeClass('bg-success bg-warning bg-danger');
if(width <= 20){
hpbar.addClass('bg-danger');
}else if(width <= 50){
hpbar.addClass('bg-warning');
}else{
hpbar.addClass('bg-success');
}
}
setTimeout(function() {
resolve();
}, 500);
}
});
});
// 非同期2
var promise2 = new Promise( async (resolve, reject) => {
// HPカウンターのアニメーション
if(target === 'friend'){
// 引数は数値でセット
await countHp(
parseInt(hpbar.attr('aria-valuenow'), 10),
parseInt(hp, 10)
);
}
return resolve();
});
Promise.all([promise1, promise2]).then(() => {
// 残HPの値を変更
hpbar.attr('aria-valuenow', hp);
return resolve();
});
// ==============================================
});
}
割合はHPバーの長さから判定できるため、変数のwidthに格納した値で判定します。色付けはクラスでセットしているので、一旦removeClassで背景クラスを全解除してからそれぞれの割合に合わせてたクラスをaddClassでセットします。
- ２０％以下 → bg-danger
- ２１％以上、５０％以下 → bg-warning
- ５１％以上 → bg-success
上記割合で各色を割り当てています。
それでは、実際に動きを見てみましょう。
HPが減少するのに合わせて色変更が確認できました
これで、HPバーの色変更アニメーションの実装は完了です。
まとめ
いかがだったでしょうか。
今回のPHPポケモンではHPバーの色変更アニメーションについてご紹介しました。
ゲームづくりに興味がある人は、ぜひ参考にしてみてくださいね。
