04/01
_ [パズドラ] 技術系パズドラ日記にリニューアルしました
この日記を、本日からよろずゲーム関連をやめて、パズドラに関する技術的なネタに集中するようにリニューアルします。この良き日に発表できることを嬉しく思います。
……や、元から半分くらいパズドラの話題で埋まっていて、あまり変わらないとも言います。
_ [パズドラ] パズドラ盤面シミュレーターを作りました
※このエントリーはIE8以前ではたぶん画像表示できません。また、PC版のGoogle Chrome, Mozilla Firefox 以外ではたぶんアニメーションが動きません。
表示機能
パズドラ盤面シミュレーターを作りました。このようにサイトにいくつでも埋め込めます。ドロップは「火水木光闇、回復、お邪魔」の7種類に対応しています。
サイトによって貼り付けたい大きさが変わると思います。これは拡大縮小に強いSVGという仕組みを使っていて、どのサイズにしても粗なく見えます。
ドロップの消えかたを確認
一部のブラウザでは、左側の図をクリックすると、どのように消えるかのアニメーションが始まります。もう一度クリックすると一時停止。動画のように何度も気になるところを一時停止しながら見直せます。非対応ブラウザのために右に途中の図を付けました。
動く方も好きな大きさで表示できます。
このシミュレーターではお邪魔ドロップは3個つないでも消えなくしています。お邪魔がいないと闇ドロップが落ちて繋がりが外れてしまいます。これを防ぐためです。最後まで消えないドロップはできるだけお邪魔だけにしたくて。
コンボは本家の一つずつではなく、一気に消えます。このため、早く最後の結果を素速く確認できます。コンボが繋がって気持ちいいのはゲーム中だけで良くて、知りたいのは盤面ドロップが消えたあとの配置というわけで。 誰がどう見ても実装が間に合わなかっただけ
この図だと右側に8コンボに加えて、次に木・光ドロップが降ってくると繋がる場所が5つあり、ここだけで平均落ちコン1回分ほど期待できます。
2色CTW
| 闇個数 | 消え方 | 闇個数 | 消え方 |
|---|---|---|---|
| 25 | 24 | ||
| 23 | 22 | ||
| 21 | 20 | ||
| 19 | 18 | ||
| 17 | 16 |
闇以外は消える単位で色分けしています。単色でも同じように連鎖します。お邪魔は最後まで残ります。
こんな複雑な連鎖はその場で考えてできるわけがなくて、暗記するかチートシートを手元に用意するかでしょう。
ソースファイル
- SVG(アニメーションつき)作成 rubyソースコード 最初の画像に対応
- SVG(アニメーションなし)作成 rubyソースコード 2つめの画像に対応
- SVG 闇16個 JavaScript, CSSといった関連ファイルもこちらから
配置は最初のこちらを編集してください。左上が盤面の左上で、数字は「-1: 空, 0: 火, 1: 水, 2: 木, 3: 光, 4: 闇: 5, 回復, 9: お邪魔」です。
a = [ 1, 1, 1, 4, 9, 4, 2, 9, 4, 0, 4, 4, 4, 4, 2, 4, 0, 4, 4, 2, 4, 4, 4, 0, 4, 3, 3, 3, 4, 4]
今後の予定
今回のネタは、ページ内埋め込み以外は [パズドラ 定石メーカー] さんでずっとすごいことができています。これをそのままいただく参考にすること中心に、
- エディターでレイアウトできる
- drop.html?layout=111494... みたいに引数を与えるとどんなレイアウト表示もできる
- ドロップを移動できる
- ドロップ移動の線をいつでもon/offできる
- ドロップの見た目を本物っぽくする
- スマートフォンやIE9以降で再生できる
- ムービーのように、再生できることを分かりやすくする
- ムービーのように、大きな画面でも再生できる
- ムービーのように、バーを動かすと好きな時間に移動できる
- ブログ等への埋め込みリンクを表示する
あたりできると良いかなと。
この再生以外も、技術系のネタを用意しています。この日記の方針変更が、良きパズドラライフのお供になれば良いなと思います。
