CSS
戸田奈津子訳

スーパーマリオ.css

なんか変なのを見付けた。
だいたいタイトルどおりです。

以下はSuper Mario World made only with CSS gradients - no JS, no embedded images/data URIs, no external images and using a micro HTML =)の戸田奈津子訳です。
タイトル長い。

Super Mario World made only with CSS gradients - no JS, no embedded images/data URIs, no external images and using a micro HTML =)

この投稿では、簡単に、単刀直入に解説します。

01.gif

このgif画像は、CSSだけで作られたスーパーマリオのアニメーションです。
埋め込み画像も外部画像も、ましてやJavaScriptも一切使用していません。
CSSと小さなHTMLだけで作られています。

<main class="game">
  <div class="game__background"></div>
  <div class="game__foreground">
    <div class="foreground__mario"></div>
    <div class="foreground__ground"></div>
  </div>
</main>

比較用に、以下はSNESの本家スーパーマリオワールドです。

02.gif

残念ながら、スーパーマリオCSSはプレイ可能なゲームではなく、単なるアニメーションです。

これがどのように作られたかについては、コメントに記載してあります。

森や草原、マリオ自身など、表示されている内容の99.99%はCSSグラデーションで実装されています。

MacのChrome64では正常に動作することを確認しています。
Firefoxでも正しく動作しますが、動作が少し遅くなります。
Safariでは全く動きませんし、わざわざ対応させるほどの根気と時間はありませんでした。
他のブラウザやデバイスでは動作確認をしていません。

CodePenはこちらです。

See the Pen Mario made only with CSS gradients - no JS, no embedded images/data URIs, no external images and using a micro HTML =) by Alcides Queiroz (@alcidesqueiroz) on CodePen.

新たな実験もリリースしました。
この記事を読んだ後、ぜひこちらも見てみてください。

Bonus

atom-pigmentsを使ってスプライトを表示してみるとこんなかんじです =)
03.png

感想

数秒歩いてるだけなので、次は1ステージ全部やってほしいですね(無茶振り)

CSSだけでキャラクターやアニメーションを作る試みというのはわりとよくある話で、少し調べただけでもいくつも出てきます。
もちろん自分には全く作れませんけどね。
ちなみに2日、8時間程度で作成したそうです。