今日発見した「CSS Battle」というサービスがめちゃくちゃ面白かったので紹介します。

HTML/CSSを使って見本のデザインをピクセル単位で再現するゲームなんですけど、達成度が数字で出るのでスコアアップさせるために自然と頑張れちゃいます笑

楽しいのにCSSの勉強にもなるので、プログラミング学習の休憩にちょうどいいと思いますよ。（僕はハマって全ステージいっきにやってしまいました…笑）

CSS Battleの使い方

CSS Battleの開始画面では12種類のステージが一覧になっています。

右側には総合スコアでのランキングが載っています。

CSS Battleは2019年4月3日に始まったばかりのサービスなので、このステージは今後追加されていく予定です。

各ステージを選ぶとゲームにチャレンジできます。

右側に見本デザインがあるので、コードを書いて再現しましょう。

エディターに初めから書いてあるコメントは、遊び方の説明になっています。

最後のコメントは「採点する前にこのコメントを消してね」と言ってます。

コードを書き終えたら、エディター欄の右下にある「Submit」を押して採点に進みましょう。

真ん中のOUTPUT欄下部のYOUR SCOREでデザインの再現度％と点数を確認できます。

採点基準

公式のQ&Aにもあるのですが、スコアの採点基準について説明しておきます。

採点基準は二つで、

• デザインの再現度
• コードの短さ

となっています。

この二つのうちでも、デザインの再現度の方が圧倒的に重要になっています。

これは書いていなかったんですけど、おそらくデザインの再現度が100%になれば600点がもらえるようになっています。

その上で、コードが短ければ加点という感じですね。

問題のレベル

ひとつめのステージはかなり簡単なんですけど、後半にいくにつれて難しくなっていきます。

とはいえ、最後の方になると慣れてくるので、割とすぐクリアできるかもです。

僕の場合は、初案件がゴリゴリに要素重なっている複雑なデザインだったので、その時の学びのおかげで、そこまで苦しまずに全ステージ100％にできました。

positionやmarginのマイナス指定を使えたら十分最後までできると思います。

息抜きにCSS Battleで遊んでみよう

みなさんも力試しのつもりでCSS Battleで遊んでみてください！

ちなみに僕の現在のランキングは15402人中263位です。

これがいい順位なのかどうかはわかりませんが、普通の解き方で全クリした場合のランキング目安として参考にしてください。

また、それぞれのステージのトップスコアと、コーディング文字数が見られるのですが、「どうやったらそんなに少なくできるん！？」ってびっくりする文字数になっています。

僕は画像を読み込む方法でクリアしてるんだと疑って実践してみましたが、そのやり方ではクリアにならないよう対策されていいました。

彼らはガチであの文字数でクリアしています…

あの文字数は特に気にせず、まずは100%の再現度を目指しましょう。

CSS Battleはサービスが始まって1ヶ月も経っていないので、これからの追加コンテンツも楽しみですね！

試してみたい方はこちらからどうぞ。