CSSスクロールで(マリオ風)横スクロール、(マリオカート風)キャラクター操作

Wed, 09 May 2018 00:00:00 +0000

CSSだけで(JavaScript無しで)動くページを作る、というお題でこんなものが

“A"キーと"D"キーで車が左右に動いています。

こちらが作者のステファン・クックさん(Stephen Cook)による解説ページで、13行のhtml以外はすべてCSS、画像ファイルも使っていないということです。

CSS内に定義したデータから絵を描くのは、グラデーションとbox-shadow を使っています。1ピクセルごとに色を指定しているんですね。

キー入力の方はというと、こちらのCSSだけで検索エンジンを作るという記事(デモはこちら)にあるように、inputフィールドの value 属性に反応させればと思ったそうですが、ユーザーの入力に応じて value の値がアップデートされるということは無く、こちらの検索デモでは1行のJavaScriptを使っていることがわかりました。

クックさんは数週間前に間違ってブラウザのJavaScriptをオフにしてしまい、未だに戻す方法を見つけられていないということで、JavaScript を使わない方法を探さざるを得なかったよう。たいへんですね。

疑似セレクタ :valid, :invalid で、フォームフィールド内のタイプ内容がaを含むかどうかを場合分けし、さらにフォームフィールドにプレースホルダーを表示してるかどうかの :placeholder-shown と併せて、キー入力に応じて3値を見分けることにしたそうです。

レースゲームとして背景が動くところは、アルシデス・ケイロスさん(Alcides Queiroz)が公開していたマリオ風横スクロールにヒントを得たということです。

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.

横スクロール on akky@サイボウズラボ・ブログ

CSSスクロールで(マリオ風)横スクロール、(マリオカート風)キャラクター操作