2013 . 02 . 19
CSSとJavaScriptで実装されたストリートファイターのコードスニペット
CSSアニメーションとJavaScriptによるキーコマンドで再現されたゲーム『ストリートファイター』のコードスニペット。
アニメーションはCSSスプライトによる一枚のPNG画像を@keyframesで動かすといった感じで、キーコマンドでそれらを切り替えるようになっています。
下は出力結果で、実際にキーボードをタイプして動かすことができるのでお試し下さい。
（キーを打つ前にアニメ画像を一旦クリックしてフォーカスを当てて下さい）
HTML5＆Canvasでゲームを作るのとはちょっと趣旨が異なりますが、CSSテクニックの一つとしてとても面白いサンプルです。
Ken's Street Fighter II with animated sprites
