![619a2298ec4b51f6a5883755bc1c5af4.gif](https://i-blog.csdnimg.cn/blog_migrate/938acd825082f6e0a7fd55af7d6f60eb.gif)
关注“脚本之家”,与百万开发者在一起
网上有很多有助于学习CSS的游戏,本文收集了一些非常实用的免费CSS游戏,希望这些游戏可以帮助你再次体验CSS的乐趣!
![996ce2b92ed2f3ffc4a6f2822c25c431.png](https://i-blog.csdnimg.cn/blog_migrate/a0215f6e83779be2524bdd5e5fb39b43.jpeg)
作者 | Andreas Müller
译者 | 弯月,责编 | 郭芮
出品 | CSDN(ID:CSDNnews)
以下为译文:
我必须承认,我的记性不是很好。特别是我记不住CSS,例如Flexbox布局等。flex容器的属性justify-content可以有12种以上的不同值,其中许多可以与关键字safe或unsafe组合。详细说明可以参照这篇文章《CSS技巧:flexbox的完整指南》(https://css-tricks.com/snippets/css/a-guide-to-flexbox/),这个页面只有两列,高度却超过了2万像素,虽然文章题目表明这是一篇完整的指南,但实际上文中并没有覆盖到所有内容。
最近,我在偶然间发现了一款塔防式的flexbox教学游戏,这款游戏真的是……
等等,你说什么?
你没听错,事实证明,网上的确有很多有助于学习CSS的游戏。我收集了一些非常实用的免费CSS游戏,希望这些游戏也可以帮助你再次体验CSS的乐趣!
![5f197244fa2bdb4ef52b472c4c317b3d.png](https://i-blog.csdnimg.cn/blog_migrate/38e0091f1b3b02ee46ef31af1809f36d.png)
Flexbox Defense
![9ead9146a09f9d70dfe38ab043aeb418.png](https://i-blog.csdnimg.cn/blog_migrate/53d00336979b0f6a9a4b71c8d33c59ec.jpeg)
上述我提到的就是这款游戏。它涵盖了flex的属性align-items、justify-content、flex-direction、align-self和order,游戏本身总共有12关。特别是最后4关非常有趣,而且难度也很高。
游戏地址:http://www.flexboxdefense.com
代码库:https://github.com/channingallen/tower-defense
作者:Channing Allen
![4ddea53c2df7669100d51f2708208c70.png](https://i-blog.csdnimg.cn/blog_migrate/87019bdffcf5cf79f8e4f81fcee6b147.png)
Flexbox Froggy
![6e7d4c9b0c57e4cf0b29934d3e6a7dde.png](https://i-blog.csdnimg.cn/blog_migrate/481a174d2d97d0739ad0741dcfcd9103.jpeg)
这也是一款涉及Flexbox的游戏,它涵盖的flex属性更多:align-items、justify-content、align-content、flex-direction、align-self、flex-wrap和flex-flow,而且游戏总共有24关,如果你打通关了,别忘了告诉我啊。
游戏地址:https://flexboxfroggy.com
代码库:https://github.com/thomaspark/flexboxfroggy
作者:Codepip
![459100b1f1e87a42da6583eaa1878728.png](https://i-blog.csdnimg.cn/blog_migrate/18eae0e3a993d5e0beeaf76404e01ce3.png)
Grid Garden
![ca05e3258d6662afdd3ab87d650fc109.png](https://i-blog.csdnimg.cn/blog_migrate/23c9f16c34689af8a8cc5d749c3d736d.jpeg)
这款游戏总共有28关,你可以从中学习CSS网格布局。它涵盖了以下网格属性:grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area、order、grid-template-columns、grid-template-rows以及grid-template。
游戏地址:https://cssgridgarden.com
代码库:https://github.com/thomaspark/gridgarden
作者:Codepip
![cff3351fecc1785562036225b4d2f012.png](https://i-blog.csdnimg.cn/blog_migrate/e4c79c47d770f6b4b17633c26820c4c6.png)
CSS Diner
![c237aeabd05d133e756e0108876c3e13.png](https://i-blog.csdnimg.cn/blog_migrate/be75b66eb9be5de1f0c84507de0f3327.jpeg)
这是一款有关各种CSS选择器的小游戏,总共有32关,打通关后你就可以自诩为CSS选择器专家了,而且你会越玩越饿。
游戏地址:http://flukeout.github.io
代码库:https://github.com/flukeout/css-diner
作者:Luke Pacholski
Unfold
![3932fe63a7f87ccae3dbe47ef98d4033.png](https://i-blog.csdnimg.cn/blog_migrate/9a7fd939ff6370a866c7f3dab588d093.jpeg)
这不完全是一款游戏,更像是一个有关CSS 3D变换的交互式演示。你可能会觉得无聊,但请相信我,游戏里面的动画非常燃,而且你肯定会觉得纯CSS不可能做出这样的效果。
游戏地址:https://rupl.github.io/unfold
代码库:https://github.com/rupl/unfold
作者:Chris Ruppel
![e852e85b31ec509d5e94b9a63d81f0c4.png](https://i-blog.csdnimg.cn/blog_migrate/145123d68366671416c892074956be5b.png)
Roadmap
![681547c80af49665fa5bf2c297188b0f.png](https://i-blog.csdnimg.cn/blog_migrate/0b3087940cf143963f159d2804f2e204.jpeg)
你需要一定的技巧和速度才能打通关这款游戏,但游戏本身是只用CSS和HTML制作的。它并非直接地讲解了CSS,而且通过研究源代码学习了很多有关clip-path、transform和带有@keyframes的动画知识!请在下方留言,告诉我们你总共尝试了几次才通关,我试了8次!
游戏地址:http://victordarras.fr/cssgame
作者:Victor Darras
![052b4cb1a9f4cbf46b344f6b5537779c.png](https://i-blog.csdnimg.cn/blog_migrate/7d77c8efa133f37dc210d0a38b945822.png)
Carnival
![5fdda5ae2a5829056291cda308e622de.png](https://i-blog.csdnimg.cn/blog_migrate/92b6ff89404341ed405b138a12c17e46.jpeg)
你需要在8秒内击中所有目标!这是一款很不错的CSS小游戏,使用了复选框和CSS动画。
游戏地址:https://codepen.io/una/pen/NxZaNr
作者:Una Kravets
![91db7218049782a25a2b3acbfeea5750.png](https://i-blog.csdnimg.cn/blog_migrate/f1c5b347df3cae7f30ce94d736a85f20.png)
Tic-Tac-Toe (井字棋游戏)
![7e7adedb1513fc939ff3b785065c1455.png](https://i-blog.csdnimg.cn/blog_migrate/3016eb5243f32c07bfde8d87176bcf11.jpeg)
这是一款经典的小游戏。这款纯CSS的井字棋游戏只有2关,也使用了复选框和CSS动画。
游戏地址:https://codepen.io/alvaromontoro/pen/BexWOw
作者:Alvaro Montoro
![7ca032168c0ff2fdfe5d13343acbeb9d.png](https://i-blog.csdnimg.cn/blog_migrate/6a8de04e8965ae98acc1cf7185bc22f8.png)
Flexbox Zombies
![e4899ae1e8c81877279abb4607a0b118.png](https://i-blog.csdnimg.cn/blog_migrate/6b1f35f661fe2c026db94e025a75ff62.jpeg)
这款游戏带有故事情节,你可以从中学习如何使用Flexbox和弩来打僵尸。这款游戏需要注册。
游戏地址:https://mastery.games/p/flexbox-zombies
价格:179美元
作者:Dave Geddes
![acea9c075babe837fe94d2e05a4bbedd.png](https://i-blog.csdnimg.cn/blog_migrate/e8d6a2714be6588b49a804623acbde89.png)
Service Workies
![a77d98551b5e522d78b4490dcfa2ee0f.png](https://i-blog.csdnimg.cn/blog_migrate/1707a732883261d936819bf771338b45.jpeg)
在这款冒险游戏中,你可以学习如何避免PWA的陷阱。你可以提高自己的技术力,并与游戏中的角色一起成长。也许你可以试着杀死在可怜的村子里肆虐了几个世纪的凶猛野兽!这款游戏需要注册。
游戏地址:https://serviceworkies.com
价格:179美元
作者:Dave Geddes
![413df5237d081941fd46969fed94408d.png](https://i-blog.csdnimg.cn/blog_migrate/d37d7b96080115a4c3267d70c7f89566.png)
Grid Critters
![6c1e51b8048dfa3285daab15b435b397.png](https://i-blog.csdnimg.cn/blog_migrate/5983bf38b7d7f498b01eb4222370814c.jpeg)
在这款游戏中,你掌握CSS Grid的旅程始于这位神秘的Grid勇士。你的任务是使用强大的Grid工具来拯救外星生物,使其免于灭绝。这款游戏需要注册。
游戏地址:https://gridcritters.com
价格:179美元
作者:Dave Geddes
总结
不论你是初学者还是专家,我都希望你能够在玩游戏的同时又能学习一些有关CSS的知识!另外,你可以在Codepen上找到很多只用HTML和CSS创建的非常很棒的游戏。
你还知道哪些非常有趣的学习CSS的游戏?请在下方留言。
原文:https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f
本文为 CSDN 翻译,转载请注明来源出处。
推荐阅读:
这五个有用的 CSS 属性完全被我忽视了
TCP 半连接队列和全连接队列满了,怎么破?
厉害了!Github标星113K的前端学习路线图有中文版了
![54ec051e652cef77f43525786c0dd6fd.png](https://i-blog.csdnimg.cn/blog_migrate/872d498c00beaba28ae71410d752e230.png)
每日打卡赢积分兑换书籍入口
??????![75d3c245a0f0e93fdb0992d73b1b4207.png](https://i-blog.csdnimg.cn/blog_migrate/adfe6bec449bcff565504aa9138bb663.jpeg)
![054f54fa408409f715236fca15687516.gif](https://i-blog.csdnimg.cn/blog_migrate/d6cf92ac18d529f92cee0b94fa25c13c.gif)