ページの先頭へ
トップに戻る
2017年3月5日 Web制作, ゲーム

CSSだけでマリオ(ドット絵)を作ってジャンプさせてみた

恒例のPureCSSネタ第3弾です。今回は、ファミコン版スーパーマリオブラザーズのマリオを作ってみました。ドット絵って良いよね。

…んで、ただドットを打つだけだと簡単すぎるという事に途中で気付いてしまったので、急遽アニメーションも加えることにしました。マリオがピョンピョンジャンプします

Pure CSS Mario

See the Pen LWZWRW by Kuzlog (@Kuzlog) on CodePen.

制作時間は約2時間。意外と短め?

今回頑張った所

SCSSの@mixinを使いまくって、かなり効率よく作業を進めることが出来ました。
まずドット絵全体を囲うdiv要素position:relativeを指定して、ドット部分は下記の関数を使っています。 例えばこの関数にp(4,8,1,3,$r);という感じで引数を渡すと… …と展開されます。X軸とY軸を直感的に指定出来るので、ミスったときの修正がめっちゃ楽でした。

アニメーションについては、ただtranslateYで位置を動かしているだけです。「立ち」と「ジャンプ」の絵を比べて色が変化している部分は、animationで無理矢理色を変化させています。

今回分かったこと

根気があれば大体何でも作れる。