2013 . 02 . 19

CSSとJavaScriptで実装されたストリートファイターのコードスニペット

CSSアニメーションとJavaScriptによるキーコマンドで再現されたゲーム『ストリートファイター』のコードスニペット。

アニメーションはCSSスプライトによる一枚のPNG画像を@keyframesで動かすといった感じで、キーコマンドでそれらを切り替えるようになっています。


下は出力結果で、実際にキーボードをタイプして動かすことができるのでお試し下さい。

(キーを打つ前にアニメ画像を一旦クリックしてフォーカスを当てて下さい)


HTML5&Canvasでゲームを作るのとはちょっと趣旨が異なりますが、CSSテクニックの一つとしてとても面白いサンプルです。

Ken's Street Fighter II with animated sprites