プレイヤー情報の作成
少し前よりプレイヤーをホーム画面に表示させるようにしましたが、ただイメージとして配置しただけでプレイヤー情報自体は設定していませんでした。なので、今回はプレイヤーとして持たせる必要のある情報を作成していきましょう。
クラスの作成
初代ポケモンではプレイヤー情報として閲覧できる情報は以下の４項目があります。
- 名前
- おこづかい
- プレイ時間
- ジムバッジ
セーブ機能がないため、プレイ時間については一旦保留とします。なので、まずは残りの３要素を備えたプレイヤークラスを作成しましょう。
プレイヤークラス（Classes/Player.php）
<?php
/**
* プレイヤー情報
*/
class Player
{
/**
* 名前
* @var string
*/
protected $name = '';
/**
* おこづかい
* @var integer
*/
protected $money = 2000;
/**
* ジムバッジ
* @var integer
*/
protected $badges = [
'Boulder' => false, # グレーバッジ
'Cascade' => false, # ブルーバッジ
'Thunder' => false, # オレンジバッジ
'Rainbow' => false, # レインボーバッジ
'Soul' => false, # ピンクバッジ
'Marsh' => false, # ゴールドバッジ
'Volcano' => false, # クリムゾンバッジ
'Earth' => false, # グリーンバッジ
];
/**
* @param name:string
* @return void
*/
public function __construct($name)
{
$this->name = $name;
}
/**==================================================================
* 名前
==================================================================**/
/**
* 名前の取得
* @return string
*/
public function getName()
{
return $this->name;
}
/**==================================================================
* おこづかい
==================================================================**/
/**
* おこづかいの増加
* @param money:integer
* @return void
*/
public function addMoney($money)
{
$this->money += $money;
}
/**
* おこづかいの消費
* @param money:integer
* @return void
*/
public function subMoney($money)
{
$this->money -= $money;
}
/**
* おこづかいの取得
* @return void
*/
public function getMoney()
{
return $this->money;
}
/**==================================================================
* ジムバッジ
==================================================================**/
/**
* ジムバッジの確認
* @param key:string
* @return boolean
*/
public function isBadge(string $key) :bool
{
return $this->badges[$key];
}
/**
* ジムバッジの全取得
* @return array
*/
public function getBadges()
{
return $this->badges;
}
/**
* ジムバッジの取得
* @param key:string
* @return void
*/
public function setBadge(string $key)
{
$this->badges[$key] = true;
}
}
トレーナー情報には名前が必須です。なので、クラス作成時のコンストラクタで名前を受け取り、そのままnameプロパティにセットしています。
おこづかいは、初期値を２０００円として取得・追加・消費のメ３ソッドを用意しました。
ジムバッジについては、初期配列としてそれぞれを用意して、取得したらtrueをセットするという単純な形式です。初代は色名がバッジ名になっているのですが、公式wikiを参考にしたところ、英語表記では色名では無いということが発覚しました。数も少なく使用頻度も少ないので、そのまま英語表記を採用しています。
ジムバッジに関しては、すべて取得するメソッドと、セット（trueに変更）するメソッド、指定のバッジを持っているかどうかを確認するメソッドの３つを作成しています。
名前の設定
では、引数で追加した名前の設定についてです。
プレイヤー名は１度決定すれば変更することができません。なので、最初のポケモンを選ぶ初期画面でのみ、名前の入力ができるようにしておきましょう。
初期画面（/Resources/Pages/Initial.php）
<?php
$root_path = __DIR__.'/../..';
require_once($root_path.'/Resources/Partials/Layouts/Head/initial.php');
?>
<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<?php
# metaの読み込み
include($root_path.'/Resources/Partials/Layouts/Head/meta.php');
# cssの読み込み
include($root_path.'/Resources/Partials/Layouts/Head/css.php');
?>
</head>
<body>
<?php
# headerの読み込み
include($root_path.'/Resources/Partials/Layouts/Head/header.php');
?>
<main>
<div class="container">
<section>
<div class="row">
<div class="col-4 text-center">
<img src="/Assets/img/player/red/large/front.gif" alt="トレーナー">
</div>
<div class="col-8">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="name-addon">名前</span>
</div>
<input type="text" id="player-name" class="form-control" aria-label="名前" placeholder="５文字以内" aria-describedby="name-addon" value="レッド">
</div>
</div>
</div>
</section>
<hr>
<section>
<h3 class="mb-3 h5">一緒に旅をするポケモンを選んでください</h3>
<div class="row">
<?php foreach($controller->getPokemonList() as $key => $name): ?>
<div class="col-6 col-sm-3">
<figure class="first-pokemon">
<img src="/Assets/img/ball/monster_ball.png" alt="<?=$name?>" data-toggle="modal" data-target="#<?=$key?>-modal">
</figure>
</div>
<?php endforeach; ?>
</div>
<?php if($messages): ?>
<div class="row">
<?php foreach($messages as list($message)): ?>
<div class="col-12">
<p class="text-danger"><?=$message?></p>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</section>
<?php
# お知らせ
include($root_path.'/Resources/Partials/Common/notice.php');
?>
</div>
</main>
<?php
# footerの読み込み
include($root_path.'/Resources/Partials/Layouts/Foot/footer.php');
# モーダルの読み込み
include($root_path.'/Resources/Partials/Initial/Modals/pokemon.php');
# JSの読み込み
include($root_path.'/Resources/Partials/Layouts/Foot/js.php');
?>
<script src="/Assets/js/Initial/initial.js" type="text/javascript" defer></script>
</body>
</html>
初期値として「レッド」を設定しています。初代再現ということもあり、最大５文字の制限を設けました。
ただ、現状ではポケモン選択のフォームはモーダル内に個別で用意しているため、プレイヤー名は送ることができません。
なので、こちらはjQueryを使って遠隔でフォームにセットします。
初期画面用js（/Public/Assets/js/Initial/initial.js）
/*----------------------------------------------------------
// 初期化する関数
----------------------------------------------------------*/
/**
* 技テーブルクリック時の関数
* @function click
* @return void
**/
var submitInit = function(){
$('form').submit(function(){
var name = $('#player-name').val();
$(this).find('[name="name"]').val(name);
});
}
/*----------------------------------------------------------
// 初期化
----------------------------------------------------------*/
jQuery(function($){
submitInit();
});
上記の処理に合わせて、各ポケモン選択用フォーム内にnameのinputをhiddenタイプで用意しておけば、名前とポケモン番号を送信することができます。
次に、コントローラーの処理を見てみましょう。
初期画面用コントローラー（/App/Controllers/Initial/InitialController.php）
/**
* アクションに合わせた分岐
* @return void
*/
private function branch()
{
switch ($this->request('action') ?? '') {
/**
* ポケモンの選択
*/
case 'select_pokemon':
// トレーナー名の確認
if(!$this->request('name')){
setMessage('トレーナーの名前を入力してください');
break;
}
if(mb_strlen($this->request('name') > 5)){
setMessage('トレーナーの名前は５文字以内です');
break;
}
// ポケモンを生成して引き継ぎデータをセッションに格納
$class = $this->request('pokemon');
// バリデーション
if(!isset($this->pokemon_list[$class])){
setMessage('選択されたポケモンは選ぶことが出来ません');
break;
}
$pokemon = new $class(5);
$pokemon->setPosition();
// 親クラスでリダイレクト前にサニタイズして格納させる
$this->party[] = $pokemon;
$this->player = new Player($this->request('name'));
// ホーム画面へ移管
$_SESSION['__route'] = 'home';
// 画面移管
$this->redirect();
break;
/**
* アクション未選択 or 実装されていないアクション
*/
default:
// 初期化
$_SESSION = [];
$_SESSION['__token'] = bin2hex(openssl_random_pseudo_bytes(32));
break;
}
}
名前を５文字以内でバリデーションにかけ、もし全ての条件をクリアすればプレイヤーのインスタンスを作成、ホーム画面へリダイレクトさせています。
ジムバッジの取得状況
ホーム画面のメニューからはプレイヤー情報が見られるようになっています。合わせて、ジムバッチの取得状況も見られるようにしておきたいので、こちらは前回作成したconfigを使って表示させていきましょう。
プレイヤー情報モーダル（/Resources/Partials/Home/Modales/player.php）
<!-- Modal -->
<div class="modal fade" id="player-modal" tabindex="-1" role="dialog" aria-labelledby="player-modal-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="player-modal-title"><?=$player->getName()?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-4 col-form-label font-weight-bolder">おこづかい</label>
<div class="col-8">
<p class="form-control-plaintext"><?=$player->getMoney()?>円</p>
</div>
</div>
<hr>
<div class="row">
<?php foreach(config('gym') as $num => list($gym, $badge, $leader)): ?>
<div class="col-4 col-sm-3">
<h6>
<span class="badge badge-orange"><?=$num+1?></span>
<?=transJp($leader)?>
</h6>
<figure class="text-center">
<?php if($player->isBadge($badge)): ?>
<img src="/Assets/img/badge/<?=$badge?>.png" alt="<?=$badge?>">
<?php else: ?>
<i class="fas fa-minus text-secondary"></i>
<?php endif; ?>
</figure>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div> 
バッジの非表示と表示の２パターンです。現在はバッジを取得するためのイベントが実装されていなので、その変化を楽しむことはできませんが、ジム（トレーナーとの戦い）を実装すればこちらも楽しむことができます。順調に開発が進めばいずれは遊べる日が来るでしょう。
まとめ
いかがだったでしょうか。
今回のPHPポケモンでは「プレイヤー情報の実装方法」をご紹介しました。
プログラミング学習に取り組んでいる方は、ぜひ参考にしてくださいね。
