CSSでドット絵マリオを作るシリーズまとめ（随時更新）

画像を一切使わずいドット絵だけでマリオを作れるのか？そしてそれを動かせるのか？を試しているシリーズのまとめです（随時更新中！）

imgタグに色を付ける

liタグの中にimgタグを無数に入れて、:nth-childで「○行目の○番目のimg」といった指定で色を付ける。

※参考：CSSだけでドット絵マリオを描けるのか

CSS変数でルイージを作る

色をCSS変数に置き換えることでルイージを簡単に作る。

※参考：CSS変数でドット絵マリオをルイージにしたった！

立ちポーズ作成と切り替え

16マスドットを量産して、ジャンプポーズを作り、hoverアクションで切り替える。

※参考：【CSSドット絵】マリオ立ちポーズとジャンプポーズの切り替え

マリオをジャンプさせる（CSS animationとJS）

CSS animationを使ってマリオのジャンプループアニメを作る。:hoverと:actionを試すが相当通りにならず、JSのイベントリスナでclassの追加、削除して実現。

※参考：CSSドット絵マリオをCSSアニメでジャンプさせてみる

この次は、Tone.jsで「トゥ〜ン」というジャンプ音を作って鳴らしてみたいと思っています…