我用CSS写了一款游戏
共 1470字,需浏览 3分钟
·
2021-09-14 02:15
通过写CSS来栽种你的胡萝卜花园!
哈喽大家好!最近闲来无事,发现了一款叫做《GRID GARDEN》的伪“保卫萝卜”的游戏,今天推荐给大家一起玩!
GRID GARDEN 小游戏让你通过书写 CSS 代码来种植养护你的胡萝卜花园!在玩游戏的同时学习 grid 布局,劳逸结合就是 yyds!
网页左上角会讲解 grid 布局的各种属性,我们在左下角的代码框中输入正确的 CSS 语句就能触发动作,右边的花园会同步进行浇水、除草的操作,可以让我们知道网格中的哪些区域被选中。
游戏一共 28 个关卡,前 19 关主要讲解网格的选区,后 9 关主要讲解网格的布局。
接下来让我们一起看个示例玩玩吧!
浇水前:
使用grid-column-start
和grid-column-end
属性来给胡萝卜浇水。grid-column-start
指从第几列开始,grid-column-end
指到第几列结束。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: 1;
grid-column-end:4;
}
浇水后:
grid-column
是网格列属性,是grid-column-start
和grid-column-end
的一个缩写形式,它可以同时输入起始结束两个值,只需要中间用 '/' 分开。比如上面的内容我们也可以写为:
#water {
grid-column: 1 / 4;
}
grid-row
是网格的行属性,用法和grid-column
一致。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-row: 3 / 6;
}
浇水效果如下:
grid 布局还有许多其他属性,span
关键字、order
属性、grid-template
属性等等,感兴趣的朋友可以去玩玩这款《GRID GARDEN》小游戏~
欢迎有兴趣的同学试试,如果本文对您有帮助,也请帮忙点个 赞 + 在看 啦!❤️
⬇️ 点击下方阅读原文查看项目
往期文章: