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

1.7 小结
Snail Bait游戏是一款HTML5平台游戏,是通过canvas元素的2D API实现的。正如你将在本书接下来的章节中看到的那样,这个API提供了一个强大且直观的功能函数集,通过这个函数集,你几乎可以实现任何一款能想象到的2D游戏。
在这一章里,我们从一个最顶层了解了Snail Bait游戏的结构,这是为了获得一些比较直观的概念,并了解实现它的一些最佳实践。尽管通过阅读本章,你可以对游戏有一个直观的印象,但是如果试玩一下,将会对游戏有更好的理解,你可以在corehtml5games.com上找到这个游戏。
在本章的结尾,我们一起学习了开始阶段的Snail Bait游戏的文件组成及相关代码。开始阶段仅仅是简单地绘制出了背景和跑步小人。在Snail Bait游戏开始阶段代码的基础上,继续深入地编写具体功能代码之前,我们需要在下一章展开对其他内容的学习,以便熟悉浏览器的开发环境,学习如何获取免费的图像、声音和音乐资源,为后续的游戏开发做准备。如果你已经掌握了HTML5的相关开发技术,知道如何在线获取开源集,你可以直接跳到第3章。

时间: 2024-10-21 18:33:33

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

《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.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游戏编程核心技术》——第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游戏编程核心技术》——导读

目 录第1章 概述 1.1 Snail Bait游戏1.2 HTML5游戏开发最佳实践 1.2.1 窗口失去焦点时暂停游戏1.2.2 窗口重获焦点时实现倒计时功能1.2.3 使用CSS实现UI特效1.2.4 对游戏运行缓慢的状态做出检测和处理1.2.5 添加社交功能 1.2.6 将所有游戏图像放在单独的sprite表单中1.2.7 在服务器中存储高分榜和实时游戏数据1.3 特别功能 1.4 Snail Bait游戏中的HTML和CSS1.5 开始Snail Bait游戏编程 1.6 本书中使用的

《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游戏编程核心技术》——第2章,第2.6节小结

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

《HTML5 2D游戏编程核心技术》——第3章,第3.2节实现平滑的HTML5动画

3.2 实现平滑的HTML5动画简单地说,编程实现动画效果是简单的:你不断地绘制一个图像序列,产生图像正在以某种方式运动的效果.同样,这也意味着你需要实现一个能够持续绘制图像的循环.传统的做法是,动画循环在JavaScript中使用setTimeout()函数或者使用程序清单3.4描述的setInterval()函数来实现.如果实现了一个draw()函数来绘制下一个动画帧,程序清单3.4中的代码将会通过持续地调用这个函数来绘制一段动画.但是,你可能会对这个结果感到不满意,因为setInterva