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

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

图2.17 Snail Bait游戏的网页背景

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

图2.18 The CSS3 Patterns Gallery网站主页

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

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

图2.19 Snail Bait游戏的小图标

时间: 2024-10-27 03:14:01

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

《HTML5 2D游戏编程核心技术》——第1章,第1.1节Snail Bait游戏

本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第1章,第1.1节,作者[美] 戴维·吉尔里,更多章节内容可以访问"华章计算机"公众号查看. 第1章 概 述 令人激动的是,开发人员可以使用软件开发技术使屏幕上出现任何想象的场景.与其他领域受一些物理条件的束缚不同,开发人员长期以来一直使用图形化API和UI工具包来实现富有创造性且引人注目的应用程序.可以说,最有创意的软件开发就是游戏编程.比起让游戏愿景变成现实,优秀的创意还可使我们通过少许努力便获得更多的回

《HTML5 2D游戏编程核心技术》——第1章,第1.2节HTML5游戏开发最佳实践

本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第1章,第1.2节HTML5游戏开发最佳实践,作者[美] 戴维·吉尔里,更多章节内容可以访问"华章计算机"公众号查看. 1.2 HTML5游戏开发最佳实践 我们将在本书中持续地讨论一些关于游戏开发的最佳实践,首先介绍7个与HTML5有关的实践. 1)窗口失去焦点时暂停游戏. 2)窗口重新获得焦点时实现倒计时. 3)使用CSS实现UI特效. 4)对于运行缓慢的游戏做出检测和处理. 5)添加社交功能. 6)把所有

《HTML5 2D游戏编程核心技术》——第1章,第1.7节小结

1.7 小结Snail Bait游戏是一款HTML5平台游戏,是通过canvas元素的2D API实现的.正如你将在本书接下来的章节中看到的那样,这个API提供了一个强大且直观的功能函数集,通过这个函数集,你几乎可以实现任何一款能想象到的2D游戏.在这一章里,我们从一个最顶层了解了Snail Bait游戏的结构,这是为了获得一些比较直观的概念,并了解实现它的一些最佳实践.尽管通过阅读本章,你可以对游戏有一个直观的印象,但是如果试玩一下,将会对游戏有更好的理解,你可以在corehtml5games

《HTML5 2D游戏编程核心技术》——第3章,第3.1节滚动背景和监控帧频

第3章 图形和动画是视频游戏的基础.能够绘制图形和图像是创造平滑的.不闪烁的动画最重要的技能之一,也是游戏开发人员必须要掌握的能力. 动画会持续地绘制动画帧,一般每秒30-60次.这个速率称为动画帧速率.每一个动画帧如同连环画的一页,每帧几乎和上一帧一样,仅仅存在着微小的差别,这样就可以在游戏快速显示动画帧时,创造出运动的效果.更多有关连环画的内容请阅读3.2节. 图3.1显示了一个单独的动画帧截图.这个游戏版本会保持这一状态到本章结束,图中显示了背景和平台从右向左滚动时的动画帧速率. 平台在动

《HTML5 2D游戏编程核心技术》——第2章,第2.1节使用开发者工具

第2章 在本书中,我们将从头开始编程实现一款游戏.像所有的游戏开发者一样,在开始之前,我们必须收集原始素材,并熟悉我们的工具.对于大多数游戏来说,下面的原始素材是必备的. 图像 音效 音乐 下面的内容则是可选的,使用它们可以给你的HTML5游戏增色. 网站图标 网页背景 GIF动画 网站图标是一些小的图标,可以在浏览器的地址栏或者标签中显示.网页背景可以是图像,也可以像Snail Bait游戏一样,用CSS画出来.Snail Bait游戏在加载资源时,会显示一个GIF动画. 幸运的是,所有必要的

《HTML5 2D游戏编程核心技术》——第1章,第1.4节特别功能

1.4 Snail Bait游戏中的HTML和CSS Snail Bait游戏使用了HTML.CSS和JavaScript,其中大部分是JavaScript,事实上,本书接下来的章节主要关注JavaScript,只是偶尔谈及HTML和CSS.图1.12显示了游戏上半部白色轮廓中的HTML元素,以及它们对应的CSS代码. 图1.12 Snail Bait上半部对应的CSS Snail Bait游戏中的所有事件都发生在arena内,arena是一个HTML DIV元素.arena的margin属性值

《HTML5 2D游戏编程核心技术》——第2章,第2.6节小结

2.6 小结浏览器开发者工具对于编程实现HTML5游戏来说是必不可少的,在本书写作时,所有的主流浏览器都提供了合适的工具集.本章简要地描述了Chrome浏览器开发者工具,对实现游戏所需的大部分工具进行了简要介绍.其他浏览器厂商实现了类似的工具集,你在本章中学到的有关Chrome浏览器开发者工具的知识,同样也适用于其他浏览器.你很少会遇到一个熟练的视频游戏开发人员,同时也是技艺高超的艺术家或者音乐家.大多数游戏开发人员都会依赖于一些开源的图形.音效以及音乐资源.本章中,你了解了如何获取开源资源,并

《HTML5 2D游戏编程核心技术》——第1章,第1.5节开始Snail Bait游戏编程

1.5 开始Snail Bait游戏编程图1.16显示了Snail Bait游戏的初始文件集合.在本书中,我们将逐步增加更多的文件.但是现在,我们需要一个HTML文件来定义游戏中HTML元素的结构:一个CSS文件来定义这些元素的可见属性:一个JavaScript文件来定义游戏的逻辑:以及两张图像,一个作为背景,一个作为跑步小人. 图1.16 Snail Bait游戏的初始文件集合 图1.17显示了游戏的开始时间点,只绘制出了背景和跑步小人.开始时,跑步小人并不是一个sprite对象,而是直接绘制

《HTML5 2D游戏编程核心技术》——第3章,第3.5节滚动游戏背景

3.5 滚动游戏背景除跑步小人外,Snail Bait游戏中的所有物体,在游戏运行时都会在水平方向上滚动.本节将讨论这个滚动功能的实现.3.5.1 平移坐标系每一个canvas元素都包含两个部分:HTML元素以及绘图区域,如图3.3所示的一个画框和一片绘图区域.绘图区域有一个坐标系,这样你就可以在指定的位置上绘制图形,如图3.3中的文字,它位于坐标(150,100).可以使用程序清单3.11中的代码,在canvas元素中绘制那段文本. 图3.3 canvas元素(画框)和它的绘图区域 程序清单3