网络游戏开发设计-2.pdf

第2章 DOM游戏开发入门 本章简介： 从本章开始，将围绕相关主题以边做边学的方式进行学习。 在深入探讨复杂的CSS3动画和HTML5Canvas游戏之前，先从传统的DOM游戏开发 出发，学习一些基本技术。 本章主要内容：  准备开发工具。  开发第一个游戏 《乒乓球》。  学习jQuery JavaScript脚本库的基础知识。  获取键盘输入。  为《乒乓球》游戏做计分板。 图2-1 本章完成的《乒乓球》游戏，它能让两个玩家同时玩。 2.1 准备开发工具 开发HTML5游戏的环境： 需要一个安装了所需插件的Web浏览器和一个优秀的文本编辑器。 浏览器应为现代浏览器，它需要支持最新HTML5、CSS3规范，能提供调试工具。 浏览器选择举例： AppleSafari （/safari） GoogleChrome(/chrome/) Opera() 本教材中绝大多数示例的演示都在GoogleChrome 中进行，它能快速平滑地运行CSS3 转换和Canvas 2.2 DOM游戏准备HTML文档 每个站点、Web页面以及HTML5游戏都是从默认的HTML文档开始执行的，而这个 文档又以基本的HTML代码开始。 HTML游戏开发将从index.html开始。 从头开始创建HTML5游戏，jQuery 是一个JavaScript库，借助于JavaScript库，可以 大大简化JavaScript逻辑。 实战时间安装jQuery库 1） 创建一个 “pingpong” 文件夹。 2） 在“pingpong”文件夹下创建一个“js”文件夹。 3）下载jQuery 库，打开/。 4）选择Production并单击DownloadjQuery 按钮。 5）将文件保存到“js”文件夹中，并命名为“jquery-1.4.4.min.js”。 6）创建一个“index.html”的文件并保存到“pingpong”文件夹中。 7）用文件编辑器打开“index.html”，并插入一个空白的HTML模板。 8） 添加下面的代码到body结束标签前，用于引用jQuery JavaScript文件： 9） 最后，需要确认jQuery 是否加载成功，在body结束标签前jQuery 引用代码后加入 以下代码： 10） 保存 index.html并用浏览器打开它。如果看到一个显示文本的警告窗口（如图 2-2），就意味著jQuery 已经设置好。 刚刚发生了什么 刚刚创建了一个引用jQuery 的HTML5页面，并确保jQuery 已经正确加载 2.2.1 新式HTML5 doctype声明 HTML5简化了DOCTYPE和meta标签的声明。 在HTML5 中，DOCTYPE声明为： !DOCTYPEhtml meta标签声明为： metacharset=utf-8 2.2 页眉和页脚 HTML5添加了页眉和页脚（header和footer）两个新元素。 页眉（header）用作段落和页面的介绍标题。 页脚（footer）用作段落和页面的页脚信息。 2.2.3 Javascript代码最佳位置 把JavaScript代码放置在body结束标签之前，且在页面所有内容之后。 如果JavaScript代码放置在head部分里，会导致JavaScript代码已加载完，而文档内 容还没有加载的情况。 如果浏览器在页面中间加载JavaScript代码，会中断正在进行的渲染和加载。 2.2.4 页面加载完后运行代码 要保证在页面加载完之后才执行JavaScript代码。jQuery 提供了在页面加载完后才执行 代码的方法。也可以使用如下代码： “$”是jQuery的快捷方式; $(something)，相当于ready(something); $(function_callback)是ready事件的另一个快捷方式。 $(document).ready(function_callback);