ぽかぽかウンティの自由帳

ぽかぽか動物園から投稿します。

Prototype.js でつくるゲーム「デュエルシューティング」

ひとまずスマートフォンでも動くようになったので、敵機AIが糞のままだが開発は終了する。

デュエルシューティング -9leap-
Duel Shooting -github-

一番ハマったのは Audio 使った効果音周りで、同じ AppleWebkit 系ブラウザでも動作は様々であった。

効果音ファイルは当初 wav で用意したが、ゲームの内容が決闘型シューティングであるため、連射してるとブラウザが固まってくる事象に悩まされた。

音の重ねがけはせず、鳴らす度に pause(); currentTime=0; play(); するようにしているが、どうやら wav よりも mp3 の方が連続再生に耐えられるようだ。

しかし canPlayType() で使える MIME タイプを調べると、Firefox は audio/mpeg はダメで、Android のデフォルトブラウザは audio/mp3 はダメでも audio/mpeg は maybe が返ってきた。

mp3 が使えないブラウザは効果音を諦めた。

また、Windows Safari は Audio 自体が用意されていなかった。

Prototype.jsElement.addMethods で Audio の DOM 拡張を試みたが、Android のデフォルトブラウザでは一切できなかった。

about:debug でコンソール(参考)を出し、Audio にも Audio.prototype にもプロパティを追加できたのだが、実際に動かしてみるとできていないので謎である。

気が引けるがインスタンス化した Audio オブジェクトすべてにプロパティを追加するようにした。

そして最後にハマったのは、ChromeFirefox(wavで確認)などのPC版ブラウザでは、Audio を src 指定してインスタンス化しただけで音が鳴るようになっていたが、

Android のデフォルトブラウザでは、ちゃんと load() しないと currentTime へのセットや play() が使えない(INVALID_STATE_ERROR)という事象だった。

その他、スマートフォンでは ontouchstart ontouchmove ontouchend のイベントが監視できるが、onclick と ontouchstart とでは、モッサリ感が段違いであった。

決闘型とはいえ、シューティングなので onclick のレスポンスの悪さは致命的だった。

なお、Android のデフォルトブラウザでは onclick も拾ってくれたが、iPhonesafari だと ontouch系しか反応しなかった。

今回はすべてのオブジェクトを DOM で生成して動かしているが、enchant.jsArctic.jsを使ってもっと高度なものも作ってみたいと思った。

HTML5 は Audio しか使っていないが、canvasPaper.jsのようなぶっ飛んだエフェクトにもチャレンジしたい。