バトルステータスの可視化
現在のポケモンでは、バトルステータスの現状を可視化できるようになっており、どれぐらいのランク補正がかかっているか、フィールドがどういう状態になっているかがわかるようになっています。
初代、第２世代等では確認できなかった内容ではありますが、システムとしては便利な要素でもり、デバッグにも適しているため、PHPポケモンではこちらを実装していきます。
ポケモン画像のボタン化
まず、ランク補正などを確認するためのフィールドとして、ポケモンの画像をボタン化させることでモーダルを起動し、必要な内容を表示させます。
ただ、状態異常やHPバー等と同じように、バトル進行中の状態変化に合わせて変化させるのはかなりの手間になるので、あくまで操作可能な状態でのみアクティブ化させます。
バトル画面（/Resources/Pages/Battle.php）
<section>
<div class="row mt-3 mb-5 py-3">
<?php # 敵ポケモン詳細 ?>
<div class="col-6">
<p>
<span class="mr-2"><?=$before_enemy->getName()?></span>
<span class="mr-2">Lv:<?=$before_enemy->getLevel()?></span>
<span class="mr-2 badge badge-<?=$before_enemy->getSaColor(false)?>" id="sa-enemy">
<?=$before_enemy->getSaName(false)?>
</span>
</p>
<div class="form-group">
<div class="progress">
<div id="hpbar-enemy"
class="progress-bar bg-success"
role="progressbar"
style="width:<?=$before_enemy->getRemainingHp('per')?>%;"
aria-valuenow="<?=$before_enemy->getRemainingHp()?>"
aria-valuemin="0"
aria-valuemax="<?=$before_enemy->getStats('HP')?>"></div>
</div>
</div>
</div>
<div class="col-6 text-center">
<input type="image"
id="enemy-pokemon-image"
class="action-img-btn"
src="/Assets/img/pokemon/dots/front/<?=get_class($before_enemy)?>.gif"
alt="<?=$before_enemy->getName()?>"
data-toggle="modal"
data-target="#enemy-battle-state-modal" />
</div>
</div>
<div class="row mb-3 py-3">
<?php # 自ポケモン詳細 ?>
<div class="col-6 text-center">
<input type="image"
id="friend-pokemon-image"
class="action-img-btn"
src="/Assets/img/pokemon/dots/back/<?=get_class($before_pokemon)?>.gif"
alt="<?=$before_pokemon->getName()?>"
data-toggle="modal"
data-target="#friend-battle-state-modal" />
</div>
<div class="col-6">
<p>
<span class="mr-2"><?=$pokemon->getNickName()?></span>
<span class="mr-2">Lv:<span id="level"><?=$before_pokemon->getLevel()?></span></span>
<span class="mr-2 badge badge-<?=$before_pokemon->getSaColor()?>" id="sa-friend">
<?=$before_pokemon->getSaName(false)?>
</span>
</p>
<div class="form-group">
<div class="progress">
<?php if($before_pokemon->getRemainingHp('per') <= 20) $hp_bar_class = 'bg-danger'; ?>
<?php if($before_pokemon->getRemainingHp('per') <= 50) $hp_bar_class = 'bg-warning'; ?>
<div id="hpbar-friend"
class="progress-bar <?=$hp_bar_class ?? 'bg-success'?>"
role="progressbar"
style="width:<?=$before_pokemon->getRemainingHp('per')?>%;"
aria-valuenow="<?=$before_pokemon->getRemainingHp()?>"
aria-valuemin="0"
aria-valuemax="<?=$before_pokemon->getStats('HP')?>"></div>
</div>
<p class="text-right px-3">
<span id="remaining-hp-count-friend"><?=$before_pokemon->getRemainingHp()?></span>
/ <span id="max-hp-count-friend"><?=$before_pokemon->getStats('HP')?></span>
</p>
<?php # 経験値バー ?>
<div class="progress" style="height:4px;">
<div id="expbar"
class="progress-bar bg-primary"
role="progressbar"
style="width:<?=$before_pokemon->getPerCompNexExp()?>%;"
aria-valuenow="<?=$before_pokemon->getPerCompNexExp()?>"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</section>
アクションボタンと同じように無効化させるために、inputの画像要素を採用しました。枠等はcssを使って消しています。アクティブの判定については、jsでaction-btnと同じように処理を加えて、操作可能な状態でのみdisabledを外しています。
では、こちらで起動するモーダルに表示する内容を見ていきましょう。
ランク補正
まずはランク補正についてです。こちらは最新世代のポケモンと同様に、プラスの場合は上向きの赤三角の個数で表現、マイナスの場合は下向きの青三角の個数を使って表現します。
バトルステータス用モーダル（/Resources/Partials/Battle/Modals/battle-states.php）
<div class="tab-pane fade show active" id="<?=$id?>-rank" role="tabpanel" aria-labelledby="<?=$id?>-rank-tab">
<?php # ランク補正 ?>
<div class="p-2 bg-light">
<table class="table table-sm mb-0">
<tbody class="first-border-top-none">
<?php foreach($battle_state_pokemon->getRank() as $label => $rank): ?>
<tr>
<th width="28%"><?=transJp($label)?></th>
<?php
if($rank < 0){
$rank *= -1;
$icon = '<i class="fas fa-caret-right rank-negative text-primary"></i>';
}else{
$icon = '<i class="fas fa-caret-right rank-active text-danger"></i>';
}
?>
<?php for($i=0; $i < 6; $i++):?>
<td width="12%" class="h4"><?php if($i < $rank) echo $icon; ?></td>
<?php endfor; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
こちらはホーム画面のポケモン詳細と同様に、モーダル内にタブ表示をさせていきます。レイアウトにはテーブルを使用しました。
状態変化
次のタブには状態変化を表示させます。配列で取得して、もし状態変化にかかっていれば名称を表示させていきます。
<div class="tab-pane fade show" id="<?=$id?>-sc" role="tabpanel" aria-labelledby="<?=$id?>-sc-tab">
<?php # 状態変化 ?>
<div class="row">
<?php foreach($battle_state_pokemon->getScObject() as $sc): ?>
<div class="col-6">
<div class="alert alert-teal" role="alert">
<h6 class="alert-heading mb-0"><?=$sc->getName()?>状態</h6>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
こちらのレイアウトにはalertを使って順番に表示させています。
フィールド状態
最後にフィルド状態です。残ターン数は公開情報のため、フィールド名称と合わせて表示させます。
<div class="tab-pane fade show" id="<?=$id?>-field" role="tabpanel" aria-labelledby="<?=$id?>-field-tab">
<?php # フィールド ?>
<div class="row">
<?php foreach($battle_state->getField($battle_state_pokemon->getPosition(), true) as list($field, $turn)): ?>
<div class="col-6">
<div class="alert alert-cyan" role="alert">
<h6 class="alert-heading"><?=$field->getName()?></h6>
<p class="font-weight-bolder mb-0">残り<?=$turn?>ターン</p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
フィールドは表示の際にインスタンス化する手間を省くために、取得時にインスタンス化できるようにgetFieldの第２引数を追加しました。
バトル状態クラス（/Classes/BattleState.php）
/**
* フィールド情報の取得
* @param position:string::friend|enemy
* @param object_flg:boolean
* @return array
*/
public function getField(string $position, bool $object_flg=false) :array
{
if($object_flg){
// フィールドをオブジェクトにして返却
$fields = [];
foreach($this->fields[$position] as $class => $turn){
$fields[] = [new $class, $turn];
}
return $fields;
}else{
// そのまま返却
return $this->fields[$position];
}
}
それでは実際の動きを見てみましょう。
状態変化・フィールド情報の変化が確認できました。これでバトルステータスの可視化は完了です。
まとめ
いかがだったでしょうか。
今回のPHPポケモンでは「バトルステータスの可視化」についてご紹介しました。
プログラミングに興味がある方は、ぜひ参考にしてみてくださいね。
