CSSの可能性を広げる、ブラウザで遊べるCSSゲーム8選

CSSはもはや当たり前の存在ですが、実は驚くほどに強力になってきています。テキストを様々なデザインでスタイリングするための簡単な方法としてスタートしたCSSですが、今やさらなる進化をとげ、レイアウトやアニメーションなどを簡単に実装することができます。

 

しかしCSSにできることはそれだけではなく、インタラクティブなUIを構築するためにも利用されています。以前ならばJavaScriptが必要でしたが、最近ではすべてのWebブラウザではじめからサポートされているCSSを使用して実装できるようになりました。

 

CSSの進化が表れている最も良い例は、近年登場しているCSSだけで設計されたゲームです。これらのゲームは遊んで楽しいだけでなく、創造力をほんの少し働かせるだけでCSSで何ができるかについてのヒントを私たちに教えてくれます。

 

CodePenに投稿されている、CSSだけで実装されている素晴らしいゲームの例をいくつか見てみましょう。ばかばかしいほど単純なものから「CSSでこんなことができるのか！」と驚くようなものまで様々です。

ではお楽しみください！

 

※100万種類以上のWebテンプレートやテーマ、プラグイン、デザイン素材などが無料でダウンロードできる、Webデザイナーツールボックスはこちら(Envato Elementsサイト)

 

 

じゃんけんゲーム

じゃんけんは暇つぶしにもってこいなゲームです。対戦相手がいないなら、このバーチャルじゃんけんゲームを試してみてください。出すものをクリックで選択してから「ファイト！」ボタンを押し、結果を確認してください。このゲームでは、HTMLのラジオボタンと試合を強化するためのランダム生成CSSが使用されています。

 

See the Pen
Pure CSS Game Rock Paper Scissor by Jerry Low (@jerrylow)
on CodePen.

Git Commits のためのマインスイーパ

このゲームは、マインスイーパとGit Commits （ファイル編集の進捗を管理するコマンド）のビジュアルを組み合わせたものです。地雷に出会わないように気を付けながら、なるべく多くの正方形を塗りつぶしましょう。ここでもCSSは地雷の位置をランダムに生成するために使用されています。

 

See the Pen
CommitSweeper – Pure CSS Game by Stephanie Eckles (@5t3ph)
on CodePen.

悪魔の手から世界を救え

これは悪魔の手先を連れ出す簡単なシューティングゲームです。カーソルを悪魔に合わせ、クリックすることで倒すことができます。コードを見てみると、HTMLのチェックボックスとGIFアニメーションだけでこのゲームが動いていることがわかります。

 

See the Pen
Demon Killer II by Mark Sottek (@mark_sottek)
on CodePen.

ケーキが食べたい？なら自分でとってきて。

誰しもケーキが食べたいものです。しかしこのゲームではマウス操作に器用さが求められるため、あなたを怒らせるかもしれません。小さなボックスにカーソルを合わせて、降ってくるカケラをに当たらないようにしましょう。よけ続けることができれば成功です。ただしカーソルをボックスから遠くに移動させすぎてしまうと最初からやり直しになります。

 

See the Pen
Pure CSS Cake 100×50 Game 🎂🎉 by Jhey (@jh3y)
on CodePen.

映画の名前あてクイズ

雑学クイズかつ単語あてゲームであるこのゲームでは、CSSの:validや:invalid疑似クラスを利用して正しい答えを導いていきます。映画を表す絵文字の羅列が表示されるので、それを見て映画のタイトルを想像し入力してください。それぞれのフォームに当てはまる有効な文字は1つしかありません。入力した文字が正しいかどうか、CSSが教えてくれます（ソースコードを見れば答えはわかってしまうのですが）。

 

See the Pen
Guess The Movie – a mini CSS game by Inès (@inescodes)
on CodePen.

幽霊なんて怖くない

これはすこしひねったシューティングゲームです。モグラ叩きを使って幽霊を追い詰めていきます。このゲームでは制限時間は15秒しか与えられておらず、CSSを使用したタイミングアニメーションの優れたデモンストレーションであると言えます。あなたは何匹の幽霊を爆破できるでしょうか？

 

See the Pen
Pure CSS ghost bustin’ game w/ CSS variables 👻🕹#CodePenChallenge by Jhey (@jh3y)
on CodePen.

積んだブロックの高さを競え

テトリスを彷彿とさせるこのゲームは、移動しているブロックを積み重ねるゲームです。簡単そうに思えるかもしれませんが、うまくやるには正確なタイミングで操作することが必要です。（もし私の古いゲームボーイが見つかったら上手にできるのですが…）

 

See the Pen
Pure CSS Game: Stacker by Jerry Low (@jerrylow)
on CodePen.

私の戦艦を沈めたのは君

友達（もしくはあなたの分身）と一緒に、CSSだけで動くこの生き生きとした戦艦ゲームで遊んでみましょう。本物の戦艦ほど緊張感のあるものではありませんが、条件付きロジックに関する優れたゲームです。コードを調べてどのように機能しているのか確認してみてください。

 

See the Pen
CSS Game: Battleships by Daniel Schulz (@iamschulz)
on CodePen.

 

CSSで遊んでみよう

 

CSSはWebサイトを魅力的に見せる以上のことを可能にしてくれます。それだけで動的でインタラクティブなコンテンツを作ることができるのです。

 

この記事でご紹介したゲームは日常生活における実用性には欠けるかもしれませんが、CSSの強力さを表しています。このようなゲームでどのようにCSSが活用されているのか調べることで、CSSを活用したインタラクティブなユーザ体験を構築する方法を知ることができます。

 

もう少しCSSゲームで遊んでみたい？CSSだけでできたゲームについてもっと知りたければ、CodePenコレクションをチェックしてみましょう！