WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

強い奴に会いに行く……Canvasの対戦格闘ゲーム

      2011/05/10

IEがバージョン9からCanvasに対応したということで、過去の作品をリメイク、対戦格闘ゲームを作りました。フルCanvasとはいかないものの、スプライトなど主要なパーツはCanvasで描画、背景画像のような重いものは通常のDOM操作にしました。 ミニキャラがところ狭しと暴れまわる! canvas-fighterCanvasの対戦格闘ゲーム Canvas Fighter IE9でテストしたところしっかりと動作! しかし、IE8以下ではキャラクターのスプライトが表示されないなど(動作が止まることはない模様)、致命的な不具合が発生。IE8以下ではFlashCanvasを使っているので、これ絡みなのかも。一応、背景画像をなくすとスプライトが表示されて何とかプレイできるので、IE8以下では思い切って背景をなくすことにしました。 一方で、Canvasを使うことで、やはり負荷がかなりかかるようになるため、ブラウザやPCのスペックによっては著しく重くなることがあります。今回フレームレート(fps)を左下に表示するようにしているので確認してみてください。問題なければ通常40fpsと表示されるはずです。使用ブラウザはGoogle Chromeド推奨しています! その次に推奨するのが何とIE9だったりする。ただし、IEだとリロード時に音楽再生ができなくなるケースがあります。また、音楽再生を完全にFlashに頼っていて、Flashがインストールされてないと音が出ません。 ちなみに一人プレイではCPUが相手になります。単純に攻撃や魔法を繰り出すだけなので、頭は悪いですが徐々に改良する予定です。今回はキャラやグラフィックのスクリプトと、ゲーム進行のスクリプトを分けているので、後々からキャラクターや必殺技を追加するのが比較的容易になっていて、キャラの数も増えるかもしれません。

 - JavaScript/Ajax, ゲーム , , ,