十一款游戏教你学会 CSS！

最新推荐文章于 2025-02-26 23:22:57 发布
转载 最新推荐文章于 2025-02-26 23:22:57 发布 · 7.7k 阅读 · 773 ·
CC 4.0 BY-SA版权
原文链接：https://bss.youkuaiyun.com/m/topic/dev_survey2019?source_id=zx

本文推荐了8款免费的CSS游戏，包括Flexbox Defense、Flexbox Froggy和Grid Garden等，旨在通过游戏化的学习方式帮助玩家掌握CSS技能，如Flexbox布局、网格布局和选择器等。

网上有很多有助于学习CSS的游戏，本文收集了一些非常实用的免费CSS游戏，希望这些游戏可以帮助你再次体验CSS的乐趣！

640?wx_fmt=jpeg

作者 | Andreas Müller
 
译者 | 弯月，责编 | 郭芮
 
出品 | 优快云（ID：优快云news）
 
以下为译文：
 
我必须承认，我的记性不是很好。特别是我记不住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的乐趣！

 

640?wx_fmt=png

Flexbox Defense

 

640?wx_fmt=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

 

640?wx_fmt=png

Flexbox Froggy

 

640?wx_fmt=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

 

640?wx_fmt=png

Grid Garden

 

640?wx_fmt=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

 

640?wx_fmt=png

CSS Diner

 

640?wx_fmt=jpeg

这是一款有关各种CSS选择器的小游戏，总共有32关，打通关后你就可以自诩为CSS选择器专家了，而且你会越玩越饿。
 
游戏地址：http://flukeout.github.io
 
代码库：https://github.com/flukeout/css-diner
 
作者：Luke Pacholski
 

640?wx_fmt=png

Unfold

 

640?wx_fmt=jpeg

这不完全是一款游戏，更像是一个有关CSS 3D变换的交互式演示。你可能会觉得无聊，但请相信我，游戏里面的动画非常燃，而且你肯定会觉得纯CSS不可能做出这样的效果。
 
游戏地址：https://rupl.github.io/unfold
 
代码库：https://github.com/rupl/unfold
 
作者：Chris Ruppel

 

640?wx_fmt=png

Roadmap

 

640?wx_fmt=jpeg

你需要一定的技巧和速度才能打通关这款游戏，但游戏本身是只用CSS和HTML制作的。它并非直接地讲解了CSS，而且通过研究源代码学习了很多有关clip-path、transform和带有@keyframes的动画知识！请在下方留言，告诉我们你总共尝试了几次才通关，我试了8次！
 
游戏地址：http://victordarras.fr/cssgame
 
作者：Victor Darras

 

640?wx_fmt=png

Carnival

 

640?wx_fmt=jpeg

你需要在8秒内击中所有目标！这是一款很不错的CSS小游戏，使用了复选框和CSS动画。
 
游戏地址：https://codepen.io/una/pen/NxZaNr
 
作者：Una Kravets

 

640?wx_fmt=png

Tic-Tac-Toe （井字棋游戏）

 

640?wx_fmt=jpeg

这是一款经典的小游戏。这款纯CSS的井字棋游戏只有2关，也使用了复选框和CSS动画。
 
游戏地址：https://codepen.io/alvaromontoro/pen/BexWOw
 
作者：Alvaro Montoro

 

640?wx_fmt=png

Flexbox Zombies

 

640?wx_fmt=jpeg

这款游戏带有故事情节，你可以从中学习如何使用Flexbox和弩来打僵尸。这款游戏需要注册。
 
游戏地址：https://mastery.games/p/flexbox-zombies
 
价格：179美元
 
作者：Dave Geddes

 

640?wx_fmt=png

Service Workies

 

640?wx_fmt=jpeg

在这款冒险游戏中，你可以学习如何避免PWA的陷阱。你可以提高自己的技术力，并与游戏中的角色一起成长。也许你可以试着杀死在可怜的村子里肆虐了几个世纪的凶猛野兽！这款游戏需要注册。
 
游戏地址：https://serviceworkies.com
 
价格：179美元
 
作者：Dave Geddes

 

640?wx_fmt=png

Grid Critters

 

640?wx_fmt=jpeg

在这款游戏中，你掌握CSS Grid的旅程始于这位神秘的Grid勇士。你的任务是使用强大的Grid工具来拯救外星生物，使其免于灭绝。这款游戏需要注册。
 
游戏地址：https://gridcritters.com
 
价格：179美元
 
作者：Dave Geddes
 

640?wx_fmt=png

总结

 

不论你是初学者还是专家，我都希望你能够在玩游戏的同时又能学习一些有关CSS的知识！另外，你可以在Codepen上找到很多只用HTML和CSS创建的非常很棒的游戏。
 
你还知道哪些非常有趣的学习CSS的游戏？请在下方留言。
 
原文：https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f
 
本文为 优快云 翻译，转载请注明来源出处。
通关这8个游戏，保证你能精通CSS
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
05-10 4883
在知乎上随便一艘，CSS难学，就会找到很多关于CSS为什么这么难学的提问？各种回答都有，但是我觉得在游戏中学习CSS是最好的，毕竟人的天性就是爱玩。以以 Flexbox 布局为例。弹性容器的属性justify-content可以有12 个不同的值，我们要怎么记住呢？在Flexbox Froggy这款游戏就可以很快学会并记住。 下面出现的8个游戏，请一定要好好利用，通过这8个游戏，你一定能精通CSS。 1. Flexbox Defense 我只是提到了这个游戏。它涵盖了 flex 属性align-items
打造经典游戏：HTML5与CSS3实现俄罗斯方块
interest_ing_的博客
03-08 2820
俄罗斯方块是一款经典的电子游戏，它不仅考验玩家的反应速度，还能锻炼逻辑思维能力。本文将指导你如何使用HTML5、CSS3和JavaScript来创建一个简单的俄罗斯方块游戏。我们将从游戏的基本结构开始，逐步构建游戏逻辑，并在最后提供一个完整的代码示例。
GridGarden一个学习CSS网格布局的游戏
08-10
Grid Garden 一个学习CSS网格布局的游戏
纯CSS游戏，超级玛丽
05-05
超级玛丽纯css版
css游戏
weixin_30563917的博客
07-17 151
flex 布局塔防游戏 http://www.flexboxdefense.com/ css selector http://flukeout.github.io/ 转载于:https://www.cnblogs.com/cglWorkBook/p/5678179.html
学会CSS，只需玩这10款小游戏
qqrrjj2011的博客
12-25 2243
这是一款为速度狂人设计的游戏！在18个挑战关卡中，用你的flex技巧指挥骑士们，让他们在餐桌上大显身手！拿起你的键盘武器，通过12个紧张刺激的关卡，用flex布局移动你的炮台，保护你的道路不受邪恶攻击，你能成为终极防御大师吗？想象一下，你是一个园丁，你的任务是用水滋润所有的胡萝卜。你有24个关卡的时间来施展你的flex魔法，把小青蛙送到位，准备好了吗？通过解决一道道有趣的题目，挑选出餐桌上的特定物品，享受动画特效带来的欢乐，你就是那位选择器大师！面对画面和三个选项，发动你的CSS脑力引擎，找出正确的答案。
精选资源
利用HTML5CSS3和WebGL开发HTML5游戏.zip
08-12
5. 学会优化游戏性能，例如通过Web Workers分担计算任务。 此外，为了成为一名成功的HTML5游戏开发者，还需要掌握JavaScript基础，理解DOM操作，熟悉现代前端框架（如React或Vue），以及对游戏设计原理的理解。通过...
教你学会开发游戏代码
05-30
在本教程中，我们将深入探讨如何开发一款名为2048的游戏。2048是一款简单却极具挑战性的数字拼图游戏，通过合并相同数字来不断生成更大的数字，直到达到2048为止。这个游戏的设计理念简洁，但背后的编程逻辑却蕴含了...
HTML+CSS+JavaScript网页设计与布局实用教程 (第2版) .rar
07-02
通过学习，读者可以理解如何创建标题、段落、链接、图像以及表格等基本元素，并学会使用表单来收集用户数据。 CSS（Cascading Style Sheets）是用于控制网页样式的语言。本教程将深入讲解CSS的选择器、盒模型、布局...
css-game:css游戏
06-19
CSS 游戏 css的游乐场！ 编写 css 以匹配模拟。 跑步 安装 安装依赖 > npm install 运行项目 > grunt 在现代浏览器中打开localhost:8080 （需要 HTML5 画布支持） 待办事项 添加更多测试用例 添加计时器 实施记分牌 允许拖放以添加模拟
CSS-Games:使用CSS和HTML开发的游戏和应用程序，无需一行JavaScript
05-11
CSS应用程序和游戏 无需使用任何JavaScript即可在CSS和HTML上开发的微型应用程序和游戏的集合 项目 该项目分为两个部分：游戏和应用程序，它们都有自己的文件夹。 在每个游戏内部，不同的游戏和应用均按字母顺序组织（请注意可能有多个版本）。 代码位于这些文件夹中，下面的链接是CodePen上的实时演示。 您可以在看到其中的许多内容。 游戏类 驾驶游戏： 蛇与梯子： 井字游戏： 琐事： v2：WWTBAM样式 hack鼠 应用 卡西欧键盘 Clocks：查看其他GitHub存储库。 魔术技巧 问答环节 为什么？ 为什么不？ ...但为什么？ 开发这些代码片段不仅很有趣，而且也确实具有教育意义。 真的。 如何？ ...即将推出...
HTML5.Games.Creating.Fun.with.HTML5.CSS3.and.WebGL.2nd.Edition
08-21
HTML5 Gamesshows you how to combine HTML5, CSS3 and JavaScript to make games for the web and mobiles - games that were previously only possible with plugin technologies like Flash. Using the latest open web technologies, you are guided through the process of creating a game from scratch using Canvas, HTML5 Audio, WebGL and WebSockets. Inside, Jacob Seidelin shows you how features available in HTML5 can be used to create games. First, you will build a framework on which you will create your HTML5 game. Then each chapter covers a new aspect of the game including user input, sound, multiplayer functionality, 2D and 3D graphics and more. By the end of the book, you will have created a fully functional game that can be played in any compatible browser, or on any mobile device that supports HTML5. Topics include: Dealing with backwards compatibility Generating level data Making iOS and Android web apps Taking your game offline Using Web Workers Persistent Game Data Drawing with Canvas Capturing player input Creating 3D graphics with WebGL Textures and lighting Sound with HTML5 Audio And more… Table of Contents Part I: Getting Started with HTML5 Games Chapter 1: Gaming on the Web Chapter 2: Taking the First Steps Chapter 3: Going Mobile Part II: Creating the Basic Game Chapter 4: Building the Game Chapter 5: Delegating Tasks to Web Workers Chapter 6: Creating Graphics with Canvas Chapter 7: Creating the Game Display Chapter 8: Interacting with the Game Chapter 9: Animating Game Graphics Part III: Adding 3D and Sound Chapter 10: Creating Audio for Games Chapter 11: Creating 3D Graphics with WebGL Part IV: Local Storage and Multiplayer Games Chapter 12: Local Storage and Caching Chapter 13: Going Online with WebSockets
6个学习CSS的免费在线游戏网站
weixin_43550766的博客
07-21 1296
CSS在线学习网站
CSS3游戏集合
weixin_30896763的博客
10-09 208
这是一些采用HTML, CSS, 和Javascript开发的游戏。有些甚至只用到了CSS技术。 1. Whack-a-Rat – CSS only game 2. SURVIVOR (1982 Commodore 64 game remake) 3. Sumon 4. 3D – CSS puzzle 5. Duck Hunt 6. Dino Pairs Game 7. Cops an...
前端游戏巨制! CSS居然可以做3D游戏了，高效web开发
2301_79099480的博客
04-05 1143
前端校招精编面试解析大全点击这里免费获取完整版pdf查看case ‘w’:break;case ‘d’:自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
CSS语言的游戏开发
最新发布
2501_90770591的博客
02-26 531
虽然CSS并不是游戏开发的唯一工具，但它在开发过程中的重要性不容忽视。通过合理运用CSS的选择器、盒模型、布局、动画及变换等特性，开发者可以创建出引人注目的游戏界面，为玩家提供更好的体验。在进行游戏开发时，理解并善用CSS，结合HTML5和JavaScript的强大功能，可以让我们在游戏设计中游刃有余。未来，随着Web技术的不断发展，CSS在游戏开发中的应用无疑还会继续扩展，带来更多的可能性。希望本文能为希望使用CSS进行游戏开发的你提供一些启示和帮助。
html+css小游戏
I_study_ing的博客
07-29 1530
游戏源码及知识来自：http://www.jikexueyuan.com/course/158_1.html?ss=1 第一部分简介： 游戏简介： 一共三种颜色球，红白蓝。目标是用红球将篮球围住算是赢，否则，算输。 三个文件： index.html，app1.js，Circle.js 需要库:createJs,下载地址：createJs.com 本人开发环境：ecli
面试官：你用纯CSS来写个游戏吗？
鱼头的Web海洋
03-29 5094
作者：陈大鱼头 github： KRISACHAN 前言 不知道大家小时候有没有玩过一款游戏叫『井字棋』的。 它长这样： （我赢了，快夸我 ~o(´^｀)o） 上面的就是本次文章的最终结果，一个用纯CSS实现的AI井字棋游戏，Mmmm，虽然看起来有点蠢。。。 地址在此： https://codepen.io/krischan77/pen/qBdYZLy 游戏的规则比较简单，就是在一个九宫...
CSS-Press：通过游戏学习CSS
weixin_30481539的博客
10-22 715
本文还有配套的精品资源，点击获取 简介：CSS-Press是一款结合了教育和娱乐的CSS学习游戏，允许玩家通过编写CSS代码来修复并操作一台虚构的印刷机。游戏通过一系列挑战教授CSS的基础知识和高级特性，如选择器、属性、值、盒模型、定位、布局、选择器组合、响应式设计以及动画和过渡。该工具采用实践操作的方式，结合即时反馈机制，为用户提供了互动式学习的经验，有助于巩固CSS技能...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值