ユージンさん提唱の、おなじみのカスタおはじき競技玩具「フリックス・アレイ」。
その中でも今熱い、アクティブバトルタイプBルール。
やってみると非常に面白いんだけど、
対戦時に現在のHP(ヒットポイント)が解りづらい
という意見がよく出ていた。
また、対戦動画化する際、編集してHPを付けるのも多少面倒だし、編集環境が必要になってしまう。
おはじきをHPカウントとして使う方式も悪くないけど映像だと少々見にくい。
というわけで専用webツールを作ってみました！
せっかく単なるブログからVPS(サーバー)に引っ越したのでさっそく活用！
使い方
①タップ(クリック)するとHPカウントが減る。
②再戦するときはresetを押す。
それだけ。
webベースなのでjavaScriptが動く環境ならばwindowsからでもapple系からでもandroidからでもOK。
ブラウザの更新をかけると画面の大きさに合わせて自動調整機能が働く。
実際はURLバーなどで隠れてしまうこともあるけど、画面幅最大にしようとすると丁度右下にピッタリ宣伝が入るのは個人的なこだわり。
スマートフォンがあれば屋外の対戦にもそのまま使える。
jsベースなのでカウントとリセットはネットにつながなくとも動く。
だから事前に読み込んでおけば電波が無くとも、通信しなくても使うことができる！
(画面サイズの変更は無理だけど)
スマホを横向きにして使えばカメラ越しでもそれなりにしっかりと見える！！
なので、対戦ならば1人のスマホで撮影してもう一人のスマホでカウントなんて使い方もあり。
ここまでなら今まででもDropBoxの公開フォルダやまぐろシロップwebページを駆使すれば不可能ではなかった。
でも今はサーバー。
すなわちPHPが自由に使える。
というわけでURLに情報を追加することで多人数対戦でも対応可能なおまけ機能をつけてみました。
urlの最後に「/?n=参加人数」を追加すればOK。
具体例：8人対戦
最小1人から最大8人まで対応しています！
言い訳を兼ねたO&A
Q：javascript上でセレクトボックスや要素の追加を使えばPHP無し(通信なし)で人数変更作れたのでは？
A表：
極限までシンプルなインターフェースにしたかった。
2人対戦以上は特殊なケースなので、そのためだけに画面に余計な情報を増やしたくなかった。
A裏：
ある程度作った後に気が付いた。
今回は早く完成させたかったのでこの仕様。
jsとcssは勉強中なので機会を見てまたいつか作ってみても良いかも。
Q：何で作ったの？
A:ちょうどJavaScript＋jQuery＋coffeeScriptの勉強をしたかった。
Q:coffee-script.jsという重いファイルがあるA:開発環境で毎回コンパイルするのが面倒だったのでcoffeeScript公式が配布している実行時にコンパイルしてくれるスクリプトを使って開発していた。それがこの「coffee-script.js」。
「最後にコンパイルすれば良いや」と軽い気持ちでいたけど何故か今回コンパイルしたものは上手く動かなかった…
原因がわからなかったので今はやむを得ずこの仕様。直したい…。
(2015/3/18追記)
A:原因がわかったので修正を行いました。
というわけでフリックス用のダメージカウントツールでした。
対戦から動画撮影などご自由にお使いください！その際宣伝部分が入るように使っていただけると非常に喜びます。
万が一バグがあった場合コメント欄やtwitterでお知らせください。
2025/9/21追記：HP15点用も公開しました。(追記ついでにこのページのレイアウトも修正)
コメント