パズドラ練習アプリ／スタミナ管理ツール作成

パズドラの練習アプリとスタミナ管理ツールを作成したのでご紹介します。
ブログメニューの倉庫のなかに保管しました。

倉庫 – パズドラ練習アプリ
倉庫 – パズドラスタミナ管理ツール

練習アプリはJavaScriptを勉強し始めた頃に作ったもので、今回はソースの見直し、余分な機能の削除、コンボエフェクト追加、Edit機能の改善（作り替え）などを行いました。ベースはできていたのですぐ終わるだろうと思っていたのですが、当時JavaScriptの本を読みながら動かすことだけを目標に作っていたせいで、至る所にコメント（「クロージャとは？」とか「あとで！」など）や自由過ぎるグローバル変数が記述されていてたいへんでした。大抵プログラムには複数のフラグが必要になるわけですが、ちゃんとまとめておかないと後々えらいことになるということを実感しました。

スタミナ管理ツールはできたてホヤホヤです。練習アプリの公開のついでに作ってみました。グラフの作成にはこれまでflotr2を使っていたのですが今回インタラクティブにしたくて初めてChart.jsを使いました。コーディング的にはどちらも同じような感じでしたが、インタラクティブに対応しているせいかChart.jsのほうが華やかでオシャレ度が高いと思いました。プラグインで拡張もできるみたいです。わたし的にはインタラクティブ性が欲しい時はChart.js、軽く使いたい場合はflotr2という感じでしょうか。もっともグラフ・チャートを作成するJavaScriptライブラリはこの他にもたくさんありますから、機会があったら他のライブラリも使ってみたいと思います。

パズドラ練習アプリ

特徴

このアプリはコンボ吸収をする敵がでてきたときや４つ消し３コンボがしたい場合など、コンボを確実に決めなければいけないときに役立ちます。

想定している手順

1. コンボをしなければいけないときがやってくる
2. パソコンを立ち上げる
3. パズドラ練習アプリのページをひらく
4. Edit画面へ移動し、スマホを見ながらドロップを配置する（手動）
5. Play画面に戻り、パズルと再配置を繰り返しながらルートを見つける（自力）
6. 再生やパズルを繰り返し、見つけたルートをがんばって覚える（根性）
7. パズドラに戻りチャレンジ

手間隙かかりますが、その分の見返りは期待できると思います。ただし練習し過ぎたせいで緊張したり途中で忘れて固まってしまうことも考えられます。もし途中でわからなくなったら無理に思い出そうとせず無心でパズルをした方がいいと思います（体験談）。

コンボの判定について

最初に思いついた方法は画像処理で使われる４連結ラベリングです。判定対象のドロップの色を白、それ以外の色を黒とした２値画像を作成し、ラベリング処理後、特徴量からコンボとみなすかどうかを判定する方法です。この方法で評価してみようかなと思ったのですが、肝心のラベリング処理と特徴量からのコンボ判定処理のコーディングがたいへんそうなことと、これら一連の処理をドロップの色の数だけループするのは処理速度的にどうかという疑問が浮かび止めました。
結局コーディングのしやすさ優先で処理単位ごとにモジュール化していったところ以下のようになりました。

1. 水平方向に走査し横コンボを検出、上段との結合チェック
2. 垂直方向に走査し縦コンボを検出、左段との結合チェック
3. 横コンボと縦コンボを結合

おそらくもっといい方法があるはずです。例えば一回の走査で縦と横について処理を行ったり画像処理的なアプローチをしたりドロップの色ごとにテーブルを持ったりコンボの可能性のある部分（新しいドロップがセットされる周辺）だけ調べるなど。また記述についても、ループの数を減らすほうがいいのかループ内の判定文を減らすほうがいいのか、値を関数の引数で渡すのか関数内でget関数を使うべきかなど悩みどころはたくさんあります。とはいえ時間がかかりますしとりあえず問題なく動いているようなのでいったん終わりにして、機会があれば再考しようかなと思っています。またラベリングや特徴量抽出を行うライブラリを見つけたら使ってみたいです。

懸案事項

1. パズドラでコンボ成立ドロップが消える順番が分からなかったのでとりあえずコンボを検出した順番にしました。
2. スマホの場合ドロップが動かないことがありました。jQuery UIのdraggable機能を使っているのですが、start()メソッド後に頻繁に呼ばれるはずのdrag()メソッドが呼ばれない感じがします。PC上ではうまくいっています。またリロードすると大丈夫そうなので、ページの初回アクセスに起因するものと考えています。touch-punch.min.jsも関係あるのかもしれませんが謎です。

パズドラ スタミナ管理ツール

特徴

パズドラの現在の仕様では、スタミナは３分間で１回復します。パズドラした後ってよく「３分で１だから１時間で２０、５時間で１００だから …」と計算しませんか？私はなぜか覚えられなくて毎回「３分で１だから」から始まります。
このツールは現在のスタミナを初期値として入力しグラフ作成ボタンを押すと、スタミナ回復の推移をグラフ化して表示します。いったんグラフを作成するといちいちパズドラにログインしなくてもスタミナを確認できます。
やってることは単にスタミナMAX値の到達時間を計算して直線を引いているだけです。データ点はちょっと工夫してスタミナ５０きざみにしてみました。スタミナのカウントはパズドラと異なり時分に同期させました。タイマー10msでセンスしていますがDOMアクセスを時分単位に減らすためです。そのためパズドラのスタミナ回復時間の「あとｘｘ：ｘｘ」の表示とぴったり合わせてグラフを作成したとしても誤差が生じることになります。誤差は計算上スタミナ１相当（±３分以内）のため実用上問題ないと考えています。

まとめ

どちらもHTML/JavaScriptで作っているのでそのままさくっとAndroidアプリにすることができるのですが止めました。さすがに数年遅いかなと。今だと７ｘ６盤面とかコンボ加算スキルなどもでてきましたし。
そもそもAndroid上で使うためにはEdit画面でのドロップ配置の仕組み（スクショを撮ってドロップの色抽出から自動配置とか、パズドラの上に透過レイヤを載せて色を複写するとか？）を作らないといけなさそうでハードル高過ぎです。
今後は便利な機能やおもしろそうなアイデアが浮かんだらこっそり追加でもしようかなと思っています。