Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@rana_kualu

スーパーマリオ.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時間程度で作成したそうです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
19
Help us understand the problem. What are the problem?