リバーシ for 3DS を公開

Nintendo 3DS のウェブブラウザで遊べるリバーシを公開しました。

公式サイト： http://yokano.github.io/reversi3ds/
アプリ本体： http://okanoworld.appspot.com/reversi3ds
(アプリは 3ds のウェブブラウザ専用です)

MITライセンスです。公式サイトからソースコードが落とせます。

3DSのWebブラウザ上で動きます

十字キーとAボタンで操作出来ます

ウェブアプリですが、十字キーとAボタンで遊べます。
もちろんタッチペンでも操作出来ます。
CPU と対戦することができます。１台で２人対戦することもできます。
２人対戦はタッチペンが２本あるとやりやすいかも。

十字キーの上下で画面がスクロールされないようにコンテンツを下画面にフィットさせています。(320x212px)
イベントのコールバック中に return false; しても、
preventDefault() してもイベントがキャンセルできないため、
コンテンツを２画面に広げてしまうと十字キーの上下でスクロールが発生してしまいます。
２画面で十字キーの上下を使えれば理想なのですが・・・。

Canvas は使わず DOM で動作しています。
アニメーションはスプライトを作成して、CSS の background-position を操作しています。
3ds は @keyframe にも対応しているのですが、step() を指定できずパラパラアニメができません。
結局、JavaScript から定期的に background-position を操作しています。
アニメはすべて CSS でやりたいのですが、良い方法が無いものか・・・。