CSSFlexboxカエルゲーム

Css Flexbox Frog Game

フロントエンド開発ブログをフォローし、「グループの追加」に返信してください

一緒に学び、毎日進歩するために私たちに参加してください

前書き

CSSの学習では、Flexboxはより実用的なCSSレイアウトプロパティですが、非常に複雑であり、一部の人々はそれをすばやく把握できない場合があります。今日はこれに関連したゲームをお勧めしたいと思います。ゲームでFlexboxを学ぶことは、人々を幸せにさせることではありませんか？

ゲーム紹介

このゲームの作者の具体的な紹介を見てください。

FlexboxFroggyと呼ばれるCSSFlexboxを学習するためのゲームを作成しました。このゲームの目的は、CSSコードを記述して、カエルがブラインドに到達できるようにすることです。あなたがすべてのレベルを打ち負かすことができるかどうか見てください！

Flexbox Froggyは、古典的なアーケードゲームのFroggerや、優れたCSSDinerやEraseAllKittensなどのネットワークリテラシーゲームに触発されています。 CSSセレクターとHTMLタグをそれぞれ学ぶことができます。

私がCSSフレックスボックスを選んだ理由の一部は、そのレイアウトプロパティがゲームの仕組みを素晴らしいものにしているからです。ゲームレベルは、Mozilla Thimbleチュートリアルで取り上げた「ゾンビの検索」アクティビティに似ていますが、絶対位置の代わりに強力な新しいフレックスボックスモデルを使用します。

Flexboxも良いトピックです。初心者はこの改善されたポジショニング方法を直接学ぶことができ、経験豊富なWeb開発者の多くはまだそれに慣れておらず、ようやく始めることができます。これは私がずっとずっと学びたかったことです。 CSS Tricks、Codrops、Scotch.ioなどのチュートリアルはすべて一流ですが、インタラクティブな学習体験はほとんどありません。