プログラミング

ポケモン入れ替え編 PHPポケモン 83

PHP PHPポケモン ポケモン
ポケモン入れ替え編 PHPポケモン 83

ポケモンの入れ替え

複数ポケモンの所有、そして並び替えの機能が整ったので、いよいよバトルでのポケモン交代機能を実装します。ポケモンがバトル中に交代する方法は大きく分けて以下の4つです。

  1. プレイヤー操作による交代
  2. ひんしによる交代
  3. 相手ポケモンの技による交代
  4. 味方ポケモンの技による交代

 

プレイヤー操作による交代

バトル操作画面で、パーティーからポケモンを選ぶことで交代が可能です。これが最も標準的な交代方法であり、今回のメイン実装部分となります。

 

ひんしによる交代

味方のポケモンが瀕死状態になった際に、次のポケモンを使うかどうかを問われます。このとき、味方が全滅していなければ選択肢は「にげる」か「交代」のどちらかになります。逃げるが失敗した際には、強制的に交代ポケモンを選ばせる必要があります。

 

相手ポケモンの技による交代

「ふきとばし」「ほえる」などの技による強制交代です。現在PHPポケモンでは野生ポケモンとのバトル機能しか実装されていないため、一旦この技による入れ替え機能は保留とします。

 

味方ポケモンの技による交代

「とんぼがえり」などの技を使用すると、相手にダメージを与え且つポケモンを交代することができます。ただし、初代の技で同様の効果をもつ技は存在していないため、こちらも一旦保留とします。

 

戦闘ポケモンの交代処理

まずはプレイヤー操作による「戦闘ポケモンの交代」について見ていきましょう。

パーティー一覧では、現在ポケモンをクリックすると詳細が表示されます。しかし、これを選択により「入れ替え」か「詳細(様子をみる)」のどちらかを選べるようにする必要があります。 なので、バトル画のパーティー画面にのみ表示されるボタンをフッター部分に追加します。

<?php # フッター(バトル画面) ?>
<?php if(getPageName() === 'battle'): ?>
    <div class="modal-footer">
        <?php foreach(player()->getParty() as $order => $party): ?>
            <button class="btn btn-sm btn-success"
            data-action="details"
            data-toggle="modal"
            data-dubble_modal="true"
            data-target="#pokemon<?=$order?>-details-modal"
            data-order="<?=$order?>"
            style="display:none;">
            様子を見る</button>
        <?php endforeach; ?>
        <button class="btn btn-sm btn-secondary" data-btn="default" data-action="details" disabled>様子を見る</button>
        <form id="partner-change-form" method="post">
            <?php input_token(); ?>
            <input type="hidden" name="action" value="change">
            <input type="hidden" name="order">
            <button type="submit" class="btn btn-sm btn-secondary" data-selected="<?=battle_state()->getOrder()?>" disabled>入れ替える</button>
        </form>
    </div>
<?php endif; ?>

 

ポケモンの行選択に合わせて、該当するボタンを表示させていきます。「様子を見る」ではモーダルを起動させる必要があるため、dataプロパティが設定されています。こちらは定数のため、パーティー数ボタンを用意して表示非表示の判定で切り替えています。

※documentからの指定をすれば変数のように扱うことも可能です

 

交代ボタンについては、現在選出されているポケモンや、瀕死状態のポケモンには交代できないようにdisabledの判定を加えていきます。以下JavaScriptの処理です。

 

バトル画面用パーティーJS/Public/Assets/js/Battle/party.js
/*----------------------------------------------------------
// 初期化する関数
----------------------------------------------------------*/
/**
* ポケモンの選択
* @function on.click
* @return void
**/
var selectPartnerInit = function(){
    $('[data-list="party"] > .table-selected-row').on('click', function(){
        var order = $(this).data('order');
        var fight = $(this).data('fight');
        // 「入れ替える」の判定
        var change_btn = $('#partner-change-form button[type="submit"]');
        // 現在バトル中のポケモン番号異なり、戦闘可能
        if(
            order !== change_btn.data('selected') &&
            fight
        ){
            // 入れ替えボタンを有効化してinputに番号をセット
            change_btn.prop('disabled', false)
            .removeClass('btn-secondary')
            .addClass('btn-primary');
            $('#partner-change-form [name="order"]').val(order);
        }else{
            // 入れ替えボタンを無効化して番号をリセット
            change_btn.prop('disabled', true)
            .removeClass('btn-primary')
            .addClass('btn-secondary');
            $('#partner-change-form [name="order"]').val('');
        }
        // 「様子を見る」の判定
        $('button[data-action="details"]').hide();
        $('button[data-action="details"][data-target="#pokemon' + order + '-details-modal"]').show();
    });
}
 
/**
* モーダル起動時の初期化
* @function change
* @return void
**/
var showPartyModalInit = function(){
    $('#party-modal').on('show.bs.modal', function(){
        // 選択中のポケモンを初期化
        $(this).find('[data-list="party"] > .table-selected-row')
        .removeClass('active');
        // 「様子を見る」を初期化
        $(this).find('button[data-action="details"]')
        .hide();
        $(this).find('[data-btn="default"][data-action="details"]')
        .show();
        // 「入れ替える」を初期化
        $('#partner-change-form button[type="submit"]').prop('disabled', true)
        .removeClass('btn-primary')
        .addClass('btn-secondary');
    });
}
 
/*----------------------------------------------------------
// 初期化
----------------------------------------------------------*/
jQuery(function($){
    selectPartnerInit();
    showPartyModalInit();
});

 

ポケモンが選択されれば、それに合わせてボタンの判定を行っています。入れ替えボタンはformに埋め込んだsubmitになっているため、選択されたポケモンが戦闘可能であれば番号をinputにセットしています。

 

それでは、ポケモン交代用に新しくサービスを作成しましょう。

 

ポケモンの入れ替えサービス(/App/Services/Battle/ChangeService.php
<?php
$root_path = __DIR__.'/../../..';
// 親クラス
require_once($root_path.'/App/Services/Service.php');
// トレイト
require_once($root_path.'/App/Traits/Service/Battle/ServiceBattleAttackTrait.php');
require_once($root_path.'/App/Traits/Service/Battle/ServiceBattleEnemyTurnTrait.php');
require_once($root_path.'/App/Traits/Service/Battle/ServiceBattleAttackAfterTrait.php');
require_once($root_path.'/App/Traits/Service/Battle/ServiceBattleCheckTrait.php');
require_once($root_path.'/App/Traits/Service/Battle/ServiceBattleEnemyAiTrait.php');
require_once($root_path.'/App/Traits/Service/Battle/ServiceBattleOrderGenelatorTrait.php');
require_once($root_path.'/App/Traits/Service/Battle/ServiceBattleExTrait.php');
require_once($root_path.'/App/Traits/Service/Battle/ServiceBattleCalTrait.php');
 
/**
 * 交代
 */
class ChangeService extends Service
{
 
    use ServiceBattleAttackTrait;
    use ServiceBattleEnemyTurnTrait;
    use ServiceBattleAttackAfterTrait;
    use ServiceBattleCheckTrait;
    use ServiceBattleEnemyAiTrait;
    use ServiceBattleOrderGenelatorTrait;
    use ServiceBattleExTrait;
    use ServiceBattleCalTrait;
 
    /**
    * @return void
    */
    public function __construct()
    {
        //
    }
 
    /**
    * @return void
    */
    public function execute()
    {
        // バリデーション
        if(!$this->validation()){
            return;
        }
        // 交代処理
        $this->change()
        // 相手のターン処理
        $this->enemyTurn();
        }
    }
 
    /**
    * 検証
    * @return bool
    */
    private function validation(): bool
    {
        /**
        * 現在と同じ → false
        * 存在しない → false
        * ひんし → false
        */
        $partner = player()->getPartner(request('order'));
        if(
            request('order') === battle_state()->getOrder() ||
            empty($partner) ||
            !$partner->isFight()
        ){
            return false;
        }
        return true;
    }
 
    /**
    * 交代処理
    * @return void
    */
    private function change(): void
    {
        $partner = player()->getPartner(request('order'));
        // 現在のバトルポケモンのバトルステータス関係を初期化
        friend()->releaseBattleStatsAll();
        battle_state()->changeInit('friend');
        // ポケモンを戻す演出処理
        $msg_id1 = issueMsgId();
        setMessage(friend()->getNickname().'、戻れ!', $msg_id1);
        setResponse([
            'action' => 'change-in',
            'target' => 'friend'
        ], $msg_id1);
        // バトル中のポケモンを交代してポケモン番号を変更
        battle_state()->setFriend($partner, true);
        // 交代後のポケモンを繰り出す演出処理
        $msg_id2 = issueMsgId();
        setMessage('ゆけっ!'.friend()->getNickname().'!', $msg_id2);
        setResponse([
            'action' => 'change-out',
            'target' => 'friend',
            'param' => json_encode([
                'class' => get_class($partner),
                'name' => $partner->getNickname(),
                'level' => $partner->getLevel(),
                'hp_max' => $partner->getStats('HP'),
                'hp_now' => $partner->getRemainingHp(),
                'hp_per' => $partner->getRemainingHp('per'),
                'hp_color' => $partner->getRemainingHp('color'),
                'sa' => $partner->getSaName(),
                'sa_color' => $partner->getSaColor(),
                'exp' => $partner->getPerCompNexExp(),
            ])
        ], $msg_id2);
    }
 
}

 

受け取ったポケモン番号が、交代可能なものかをチェックして交代処理を行っています。判定はフロント側と同様で、現在と異なっているか、ひんし状態ではないかです。直接操作で「存在しない番号」が飛んでくる可能性も考慮して、バックエンドでは追加で存在確認を最初に行っています。

 

もしこの3つをクリアすれば、現在のポケモンのバトルステータスを全て解除、へんしんやターンダメージ等も含め全てリセットを行い、格納されているバトルポケモンを交代しています。

演出用のレスポンスですが、ポケモンを戻す際のものと、ポケモンを登場させる際に必要になるパラメーターをメッセージに合わせて返却しています。新しいポケモンのものに書き換えるためには必要な値が多いため、json形式で返却しています。

  

入れ替えの演出

それでは、サービス側でされた値を使って、表示ポケモンの書き換え処理を行いましょう。ポケモン入れ替えでは「戻す」と「登場」の2つの演出が必要になるので、それぞれ別の関数で作成していきましょう。

 

関数のグローバル化

演出の関数が多くなってきたため、このタイミングでJavaScriptの関数をグローバル化させてファイル分けしても呼び出せるようにしていきます。今回は「window」にオブジェクトを追加する方法を採用しました。

 

アクション関数のまとめJS/Public/Assets/js/Battle/library-action.js
// グローバル関数をオブジェクト化
window.actionLib = {};
 
/**
* 交代処理(戻す)
* @param json
* @return Promise
*/
window.actionLib.doAnimateChangeIn = function (target){
    return new Promise ((resolve, reject) => {
        // 対象のポケモン画像とパラメーターを非表示
        $('#' + target + '-pokemon-image').hide();
        $('#' + target + '-pokemon-parameter').css('opacity', 0);
        resolve();
    });
}
 
/**
* 交代処理(登場)
* @param json
* @return Promise
*/
window.actionLib.doAnimateChangeOut = function (target, param){
    return new Promise ( async (resolve, reject) => {
        // 交代後のポケモンの画像を生成
        var img = $('#' + target + '-pokemon-image');
        img.attr('src', '/Assets/img/pokemon/dots/back/' + param.class + '.gif')
        // HPの生成
        var hpbar = $('#hpbar-' + target);
        hpbar.css('width', param.hp_per + '%');
        hpbar.attr('aria-valuenow', param.hp_now);
        hpbar.attr('aria-valuemax', param.hp_max);
        hpbar.removeClass(function(index, className) {
            // 背景色クラスを全リセット
            return (className.match(/\bbg-\S+/g) || []).join(' ');
        });
        hpbar.addClass('bg-' + param.hp_color);
        $('#remaining-hp-count-' + target).text(param.hp_now);
        $('#max-hp-count-' + target).text(param.hp_max);
        // 状態異常の生成
        var sa = $('#sa-' + target);
        sa.text('');
        if(param.sa){
            sa.text(param.sa)
            .removeClass(function(index, className) {
                // バッジ色クラスを全リセット
                return (className.match(/\bbadge-\S+/g) || []).join(' ');
            })
            .addClass('badge-' + param.sa_color);
        }
        // レベル・名前
        $('#level-friend').text(param.level);
        $('#name-friend').text(param.name);
        // 経験値
        var expbar = $('#expbar-friend');
        expbar.css('width', param.exp + '%');
        expbar.attr('aria-valuenow', param.exp);
        // ボールが開くエフェクト
        $('#battle-field').append(
            $($('#template-effect-ball-open').html())
            .addClass('friend')
        );
        await timer(500);
        // ボールエフェクトを非表示
        $('img.capture-ball-open').hide();
        // 画像とパラメーターを表示
        img.show();
        $('#' + target + '-pokemon-parameter').css('opacity', 100);
        await timer(1000);
        resolve();
    });
}

 

windowのオブジェクトにactionLibのキーを追加し、その中に空オブジェクトを格納してから関数をセットしています。これで、別ファイルでもwindowオブジェクトを参照することで関数を自由に呼び出すことができます。

※本格的なJSを使ったアプリケーションを検討している方には、クラス管理やフレームワークでの開発をオススメします

 

処理自体の記述量は多いですが、内容は至って単純です。

ポケモンを戻す際には、対象のポケモンとHPバーなどを含めたブロックを非表示にしています。両方をhidedisplay:none)にしてしまうと、高さが変動することでガタつきが出てしまうので、高さがあるHPバーのブロックは不透明度を0にすることで擬似的に非表示状態としています。

※min-heightを使ってcssでの処理でもOKです

 

ポケモンの登場演出は、非表示にした各要素に対してPHPから受け取ったパラメーターを順に嫉妬していきます。HPバーや状態異常のカラーについては、一旦removeClassで全て取り除いてから、再度受け取ったカラー値をセットしています。

演出の時間を調整するため、await timer(ミリ秒)を使って調整しています。

/**
* タイマー
* @param time:integer
* @return Promise
*/
var timer = function(time){
    return new Promise( async (resolve, reject) => {
        setTimeout(() => { resolve(); }, time);
    });
}

 

使用するエリアがasync関数になっていれば、setTimeoutで囲わず同期的な処理を記述することができるので、今回のような演出処理を作る際には便利です。

 

それでは、ポケモンの入れ替え演出について見てみましょう。

 

交代後に相手ポケモンの行動が問題なく行われ、入れ替え自体も問題なく終えることができました。

これで単純なバトル中のポケモン交代処理は完成です。

  

まとめ

いかがだったでしょうか。

今回のPHPポケモンでは「ポケモンの交代処理」の実装方法についてご紹介しました。

バトル中のポケモンをクラスによる管理に替えたことで、全体的な処理自体がスムーズになりました。

プログラミング学習中の方や、ゲームづくりに興味がある人は、是非参考にしてみてくださいね。

 

注目の記事

グローバル&ヘルパー関数編 PHPポケモン 61
プログラミング
PHP,PHPポケモン,ポケモン
グローバル&ヘルパー関数編 PHPポケモン 61

進化や技習得、HPバーや経験値バーの演出ができているのに、なぜ状態異常の演出はされていないの?   そう感じている方が少なからずいるはずです。 現段階では、状態異常になっても次の画面に移管しなければ表示されません。これは、PHP側で内部処理は行われているが、メッセージに合わせた動的な変更がされていな...

【PHP】可変長引数とは「点(ドット)3つ」 多次元連想配列の検索
プログラミング
PHP
【PHP】可変長引数とは「点(ドット)3つ」 多次元連想配列の検索

可変長引数とは  引数の数が決まっていない、状況に応じて複数の引数を指定したいときに、関数の引数で指定する点(ドット)3つのことです。PHP5.6以降で使用することができます。  PHPマニュアル 可変長引数リスト https://www.php.net/manual/ja/functions.arguments.php#functions.variable-arg-list ...

独立してから心がけていること【社会人時代と比較して】
フリーランス
フリーランス,独立
独立してから心がけていること【社会人時代と比較して】

  今回は自分が独立してから心がけていることの中から、ある程度上手くいっていることや、オススメできるようなことを簡単に感想付きでまとめてみました。 社会人時代と比較しながらの内容なので、これからフリーランスで生きていこうと思っている人や、社会人という生活にストレスを感じている人は是非参考に...

PHPポケモン「バトルシステム実装編〜ランク補正〜」22
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム実装編〜ランク補正〜」22

ランク補正とは  ポケモンでは通常ステータスとは違い、バトル中にのみ変化するステータスが存在します。初代仕様であれば、「なきごえ」や「かたくなる」といった変化技により「こうげき」や「ぼうぎょ」の強化や弱体化をさせるものです。これはバトル中であれば引き継がれるものですが、交代やバトルが終了すればリ...

PHPポケモン「状態異常編〜まひ〜」23
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「状態異常編〜まひ〜」23

  今回のPHPポケモンでは「状態異常」を導入します。バトルシステムにも関係してくる部分ですが、それ以外にも影響を与える部分が多く、且つ非常に判定がややこしく、作り込む必要があったため1つずつ片付けていきます。   状態異常の実装  ポケモンの除隊異常に該当するものは以下の7通りです。 ...

投稿タイトルを自動生成する方法【WordPressを便利にカスタマイズ】
プログラミング
PHP,WordPress
投稿タイトルを自動生成する方法【WordPressを便利にカスタマイズ】

  カスタムフィールドを含む投稿の場合、わざわざタイトルを設定する必要がないものもあります。 そういったときに、カスタムフィールド値を使ってタイトルを自動生成してくれると楽ですし、一覧で見てもわかりやすい状態にすることができます。   今回はWordPressで「投稿タイトルを自動生成する方法」につ...

PHPポケモン「バトルシステム実装編〜補正値計算・乱数・急所〜」21
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム実装編〜補正値計算・乱数・急所〜」21

バトルシステムの実装  今回は「急所」と「乱数」と「タイプ一致」の判定と補正を実装していきます。 ちなみにですが、ポケモンwikiを熟読したところ、補正値の計算にも順番があり、計算後に小数点の切り捨てや五捨五超入をするなど、そこそこ複雑な計算順序がありましたが、今回はそこまで精密に再現せず、補正値(...

WordPressで作ったサイトで実装するワンランク上のSEO対策
SEO対策
PHP,WordPress,プログラミング
WordPressで作ったサイトで実装するワンランク上のSEO対策

  WordPressでSEOに強いサイトを運営したい   近年、ブログを採用せずともWordPressを使用したサイト作りが増えてきました。 その理由には更新の手軽さはもちろん、優秀なプラグインが揃っていることでSEO対策に強いサイト作りが簡単だということが大きいです。   今回は、WordPressのブログやサイトで役立...

カテゴリ

SEO対策 イベント デザイン ネットワーク ビジネスモデル フリーランス プログラミング マーケティング ライティング 動画編集 雑記

タグ

5G Adobe AfterEffects AI ajax amazon Animate api artisan atom Automator AWS Bluetooth CSS CVR description EC-CUBE4 ECショップ ESLint Facebook feedly foreach function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript jQuery jQuery UI keyword LAN Laravel Linux MacBook MAMP meta MLM MySQL NoCode note OS OSI参照モデル Paypal Photoshop PHP phpMyAdmin PHPポケモン PremierePro rss SEO SEO対策 Sequel Pro Skype SNS SSH Symfony TCP/IP title Toastr Trait Twig Twitter UCC V系 WAN WebSub Wi-Fi wiki Windows WordPress XAMPP xml Xserver YouTube YouTuber Zoom アーティスト アウトプット アクセス層 アニメーション アフィリエイト イーブイ インターネット インプット エンジニア オブジェクト指向 お金配り クリック単価 クリック数 コミュニケーション能力 コロナ コンサルティング サムネイル システムエンジニア スタートアップ スタイルシート スパム データベース ディープフェイク デザイナー デザイン テレワーク ナンパ ニュース ネットワークモデル ノマドワーク バナー ピカチュウ ビジネス フィード フリーランス ブロガー ブログ プログラマー プログラミング プログラミング学習 プログラミング教育 プロトコル ホームページ制作 ポケモン マークアップ マーケティング メール リモートワーク レンダリング 三井住友 三宮 仕事依頼 児童デイ 児童デイサービス 児童発達支援 公開鍵 初心者 助成金 勉強法 営業 広告 広告収入 必勝マニュアル 放課後等デイサービス 朝活 楽天 深層学習 無線LAN 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力