学习 Flexbox 的游戏网站

最近小编发现了一个不错的游戏网站 ,所以来跟大家分享一下~

游戏的主旨很简单,就是利用输入正确 Flexbox 语法指令, 来帮助画面中的青蛙们回到荷叶上;很重要的一点是:有繁体中文版耶~ ^_^

(当然,语法指令还是需要用英文输入的啦~)


如果同学们跟小编一样,会写基本的 CSS2 语法,又想要认识一下 Flexbox 这个 CSS3 新语法的排版方式,建议可以先从这个游戏网站开始迈出第一步萝~

藉由游戏的过程,除了可建立 Flexbox 所需要的逻辑观念,同时也可以习得 Flexbox 排版中几个重要的语法指令,轻鬆玩游戏之馀又可以动动脑,

像小编这种初心者都可以靠著每个关卡所给的提示,最后成功破解了每个关卡,所以各位也不用担心会太难~


底下就带大家浏览一下网站架构,文章会包含部分关卡的破解版游戏画面,如果不想要被雷到的同学请记得绕道喔~ XD

“Flexbox Froggy ” 网站介绍

网站的首页,也是直接进入第一级关卡的游戏画面:

CSS 語法 - 網頁設計 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】 – 「Flexbox Froggy」 : 學習 Flexbox 的遊戲網站 - 01-1

网页的左半边为目前游戏关卡的文字说明,相当的浅显易懂;

当滑鼠点至有反白效果的指令处,也会立刻出现提示对话框:

CSS 語法 - 網頁設計 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】 – 「Flexbox Froggy」 : 學習 Flexbox 的遊戲網站 - 02-1

只要根据提示,在下方空白栏位输入正确的 Flexbox 语法,网页右半边的青蛙就会即时互动,完成关卡要求,按下「继续」后就可以前进下一关了。

CSS 語法 - 網頁設計 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】 – 「Flexbox Froggy」 : 學習 Flexbox 的遊戲網站 - 03-1

这是第2关的游戏画面:

CSS 語法 - 網頁設計 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】 – 「Flexbox Froggy」 : 學習 Flexbox 的遊戲網站 - 04-1

点开上方关卡等级处,这裡有方便大家跳关或者重置游戏纪录的功能,

细节请参考下方的图示:

CSS 語法 - 網頁設計 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】 – 「Flexbox Froggy」 : 學習 Flexbox 的遊戲網站 - 05-1

不解的是,第10关的介面不知为何,会跳成英文版?!

而且这一关有一个小陷阱,大家记得看清楚提示才能顺利破关喔~

(提醒:下方图示有雷!)

CSS 語法 - 網頁設計 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】 – 「Flexbox Froggy」 : 學習 Flexbox 的遊戲網站 - 06-1

基本上,每关需注意的重点都会特别备注,大家只要照著指示打出语法,就没那麽困难了~

(提醒:下方图示有雷!)

CSS 語法 - 網頁設計 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】 – 「Flexbox Froggy」 : 學習 Flexbox 的遊戲網站 - 07-1

第14关解答很简单,但脑筋有时转不过来就会卡住….

(提醒:下方图示有雷!)

CSS 語法 - 網頁設計 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】 – 「Flexbox Froggy」 : 學習 Flexbox 的遊戲網站 - 08-1

如果顺利来到最后一关,就准备面对大魔王啦!

CSS 語法 - 網頁設計 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】 – 「Flexbox Froggy」 : 學習 Flexbox 的遊戲網站 - 09-1

最后一关的正解如下,大家有顺利答出正确语法吗?

(提醒:下方图示有雷!)


CSS 語法 - 網頁設計 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】 – 「Flexbox Froggy」 : 學習 Flexbox 的遊戲網站 - 10-1

最后提供一张小编破关的画面,哈!

假如想再玩一遍,只要按下「重置」按钮就可以删除破关纪录了~

希望大家都可以藉由这个游戏,轻松建立 Flexbox 相关语法的基本认识! ^_^

CSS 語法 - 網頁設計 Free Resource 好康報報 Good Design 好站報報  - 【好站分享】 – 「Flexbox Froggy」 : 學習 Flexbox 的遊戲網站 - 11-1


合作伙伴

网站备案:豫ICP备15023476号-1 唯特科技