开发者社区> 华章计算机> 正文

《HTML5 2D游戏编程核心技术》——第2章,第2.3节使用CSS背景

简介:
+关注继续查看

**本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第2章,第2.3节,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
**

2.3 使用CSS背景
HTML5游戏运行在Web浏览器中,因此除了游戏运行的背景(例如Snail Bait游戏的砖红色背景)外,还需考虑网页的背景。
图2.17显示了Snail Bait游戏的网页背景,是使用CSS过渡绘制的。CSS背景不涉及图像的操作开销,并且CSS背景在水平和垂直方向上的无限重复很容易实现,这样无论窗口大小如何,背景看起来总是一样的。

图2.17 Snail Bait游戏的网页背景


7a634291d2a4209d17a23cf459eb08848c4063df

图2.17所示网页背景的CSS代码列在了程序清单2.2中。它使用了重复的线性过渡,创造出菱形花纹的效果。这段代码拷贝自CSS3 Patterns Gallery网站,网站主页如图2.18所示。

图2.18 The CSS3 Patterns Gallery网站主页


2ee15b4bafd1994fd4e4c1b6681bc614adf854a8

程序清单2.2 Snail Bait游戏的背景CSS代码(摘自snailbait.css)


2a59ef928059fa7fc803189b5cecd848fd76ae92

CSS3 Patterns Gallery通过让你自己选择复制CSS代码来创作网页上的显示背景。你需要做的仅仅是点击你想要的背景,随后复制CSS代码,并将它们放在你自己的CSS代码中就可以了。

图2.19 Snail Bait游戏的小图标


2af733869bc98333fcd50e75f138ed85159c2cdf

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
最近这个 GitHub 项目,增长有点猛
今天给大家分享一个 GitHub 刷题项目,也是目前我们 Doocs 成员们在积极维护的一个项目。
5 0
手撸一款简单高效的线程池(一)
线程池大家应该都用过,不过如何从 0 到 1 的设计一款简单好用且性能较好的线程池?我们在接下来的几篇文章中,为您一一介绍。
4 0
SpringMVC 视图解析器 方法返回值 异常处理器
SpringMVC 视图解析器 方法返回值 异常处理器
7 0
比赛-以企业为服务目标的政策大数据应用
比赛-以企业为服务目标的政策大数据应用
5 0
Vue入门 基本使用 与 事务管理【1】
Vue入门 基本使用 与 事务管理【1】
10 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载