网上有很多有助于学习CSS的游戏,本文收集了一些非常实用的免费CSS游戏,希望这些游戏可以帮助你再次体验CSS的乐趣!
作者 | 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的乐趣!
Flexbox Defense
上述我提到的就是这款游戏。它涵盖了flex的属性align-items、justify-content、flex-direction、align-self和order,游戏本身总共有12关。特别是最后4关非常有趣,而且难度也很高。
游戏地址:http://www.flexboxdefense.com
代码库:https://github.com/channingallen/tower-defense
作者:Channing Allen
Flexbox Froggy
这也是一款涉及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
Grid Garden
这款游戏总共有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
CSS Diner
这是一款有关各种CSS选择器的小游戏,总共有32关,打通关后你就可以自诩为CSS选择器专家了,而且你会越玩越饿。
游戏地址:http://flukeout.github.io
代码库:https://github.com/flukeout/css-diner
作者:Luke Pacholski
Unfold
这不完全是一款游戏,更像是一个有关CSS 3D变换的交互式演示。你可能会觉得无聊,但请相信我,游戏里面的动画非常燃,而且你肯定会觉得纯CSS不可能做出这样的效果。
游戏地址:https://rupl.github.io/unfold
代码库:https://github.com/rupl/unfold
作者:Chris Ruppel
Roadmap
你需要一定的技巧和速度才能打通关这款游戏,但游戏本身是只用CSS和HTML制作的。它并非直接地讲解了CSS,而且通过研究源代码学习了很多有关clip-path、transform和带有@keyframes的动画知识!请在下方留言,告诉我们你总共尝试了几次才通关,我试了8次!
游戏地址:http://victordarras.fr/cssgame
作者:Victor Darras
Carnival
你需要在8秒内击中所有目标!这是一款很不错的CSS小游戏,使用了复选框和CSS动画。
游戏地址:https://codepen.io/una/pen/NxZaNr
作者:Una Kravets
Tic-Tac-Toe (井字棋游戏)
这是一款经典的小游戏。这款纯CSS的井字棋游戏只有2关,也使用了复选框和CSS动画。
游戏地址:https://codepen.io/alvaromontoro/pen/BexWOw
作者:Alvaro Montoro
Flexbox Zombies
这款游戏带有故事情节,你可以从中学习如何使用Flexbox和弩来打僵尸。这款游戏需要注册。
游戏地址:https://mastery.games/p/flexbox-zombies
价格:179美元
作者:Dave Geddes
Service Workies
在这款冒险游戏中,你可以学习如何避免PWA的陷阱。你可以提高自己的技术力,并与游戏中的角色一起成长。也许你可以试着杀死在可怜的村子里肆虐了几个世纪的凶猛野兽!这款游戏需要注册。
游戏地址:https://serviceworkies.com
价格:179美元
作者:Dave Geddes
Grid Critters
在这款游戏中,你掌握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!相关推荐
- 通过「解救人质」小游戏教你学会碰撞检测
游戏开发中,碰撞检测无处不在,今天就通过一个简单的小游戏教你学会如何在 Cocos Creator 中进行碰撞检测.配合官方文档学习效果更加(官方文档传送门:https://docs.cocos.co ...
- 一分钟教你学会python_十分钟教你学会python编写小游戏
原标题:十分钟教你学会python编写小游戏 看过,估计大家都已经精通了吧,好的,话不多说,今天就活学活用,用python来编写纸牌游戏21点,江湖人称黑杰克,BLACK JACK-(注意法式卷舌). ...
- 一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到 所有零星图片 ...
- 开发一款游戏so easy教你如何识别靠谱的游戏外包公司
2022年伊始,很多品牌都在筹划新一轮的游戏营销投放的预算,以求在春节期间就能开个好头,提升营收和流水,随着技术的日益成熟,开发一款游戏在目前已经不是什么难事了,不过随着游戏外包公司的增多,如何识别靠 ...
- 5款可以教你编程的游戏
本文推荐五款WEB游戏,这些游戏非常有趣,可以把你带入迷人的编程世界. 1. CodeCombat CodeCombat是一个HTML5角色扮演游戏(RPG),这款游戏可以教你基本的编程概念. 在Co ...
- 推荐:5款可以教你编程的游戏
推荐:5款可以教你编程的游戏 2015-10-12 11:03 编辑: suiling 分类:游戏开发 来源:sixrevisions 0 3349 编程HTML5游戏 招聘信息: iOS开发工程师 ...
- python编写小游戏17_十分钟教你学会python编写小游戏
原标题:十分钟教你学会python编写小游戏 看过,估计大家都已经精通了吧,好的,话不多说,今天就活学活用,用python来编写纸牌游戏21点,江湖人称黑杰克,BLACK JACK-(注意法式卷舌). ...
- 【java项目】仅需俩小时教你学会自己用java做出自己的“黄金矿工’’游戏
游戏介绍: 黄金矿工是我们童年都玩过的游戏,非常的好玩,可以单人或者双人一起利用钩爪来获得地下的金子,但是难度也是相当的大.前几关看似非常的简单,但是却机关重重,此款小游戏可以在网站上打开,也可以下载 ...
- GameMaker Studio从头开始学习设计和开发3款游戏
从头开始学习设计和开发3款游戏(无需经验) 你会学到什么 如何塑造令人敬畏的角色 如何使用GameMakerStudio 2 视频游戏编程 基本二维动画 如何查找和修复bug 如何给你的游戏编故事 从 ...
最新文章
- 干货 | 目标检测入门,看这篇就够了(下)
- Xcode7中创建静态库
- 转Go语言TCP Socket编程
- SAP Spartacus的开发人员来自全球各地
- 【摄影测量原理】第四章:解析空中三角测量
- docker删除es数据_木杉入门Elasticsearch(4):安装ES
- cocos2dx 回调函数
- 陈绪:7月24日阿里云上海峰会出品人
- 分时操作系统与分布式操作系统
- web期末网站设计大作业 HTML+CSS+JS仿爱奇艺官网影视网站
- oracle temporarily delayed,temporarily closed造句
- locust 性能测试工具(V2.8.6)
- pdf转换成word转换器免费版
- 项目经理的工作就是胡搅蛮缠满地打滚
- 伪元素写竖线_[CSS] 用伪元素:after实现分割线和气泡
- Dynamic Convolution: Attention over Convolution Kernels
- Gitlab搭建及常用命令
- golang并发编程之Ticker
- 修改Markdown表格对齐方式、markdown表格内单元格换行
- Android 12系统源码_SystemUI(八)SystemUIVisibility属性
热门文章
- SharePoint 2010 使用代码创建视图查询条件
- PaddlePaddle线性回归示例
- 计算机专业挂职锻炼,计算机学院挂职体验谈
- 查看pytorch和匹配的CUDA版本
- 计算机控制系统的实时控制应用,计算机控制系统实时性的提高策略
- c java 引用类型_java中的引用类型
- leetcode题库1277-- 统计全为 1 的正方形子矩阵
- rust笔记13 闭包
- 2021-2025年中国船用炉灶行业市场供需与战略研究报告
- php接收post原始数据