移动互联网开发技术丛书HTML5 网页游戏设计从基础到开发

基 础 篇 第1章 HTML5概述... 3 1.1 HTML基础... 3 1.1.1 HTML的定义... 3 1.1.2 HTML的历史... 4 1.2 HTML4基础... 5 1.2.1 HTML基础知识... 5 1.2.2 HTML基本标记... 6 1.3 HTML5的新特性... 10 1.3.1 简化的文档类型和字符集... 11 1.3.2 HTML5的新结构... 12 1.3.3 支持本地存储... 13 1.3.4 全新的表单设计... 13 1.3.5 强大的绘图功能... 13 1.3.6 获取地理位置信息... 15 1.3.7 支持多媒体功能... 17 1.3.8 支持多线程... 18 第2章 JavaScript语法基础... 19 2.1 在HTML中使用JavaScript语言... 19 2.2 基本语法... 20 2.2.1 数据类型... 20 2.2.2 常量和变量... 21 2.2.3 注释... 22 2.2.4 运算符和表达式... 22 2.3 常用控制语句... 25 2.3.1 选择结构语句... 26 2.3.2 循环结构语句... 31 2.4 函数... 36 2.4.1 创建自定义函数... 36 2.4.2 调用函数... 36 2.4.3 变量的作用域... 38 2.4.4 函数的返回值... 38 2.4.5 定义函数库... 39 2.4.6 JavaScript内置函数... 40 2.5 调试JavaScript程序的方法... 43 第3章 JavaScript事件处理... 45 3.1 JavaScript事件的基本概念... 45 3.1.1 事件类型... 45 3.1.2 JavaScript处理事件的基本机制... 46 3.2 JavaScript绑定事件的方法... 47 3.3 JavaScript事件的event对象... 49 3.3.1 获取event对象... 49 3.3.2 JavaScript获取鼠标坐标... 50 3.3.3 JavaScript获取事件源... 51 3.4 JavaScript取消浏览器默认动作... 51 第4章 JavaScript面向对象程序设计... 53 4.1 面向对象程序设计思想简介... 53 4.1.1 对象的概念... 53 4.1.2 面向对象编程... 54 4.2 JavaScript类的定义和实例化... 55 4.2.1 类的定义... 55 4.2.2 创建对象（类的实例化）... 55 4.2.3 通过对象直接初始化创建对象... 56 4.3 JavaScript访问和添加对象的属性和方法... 57 4.3.1 访问对象的属性和方法... 57 4.3.2 向对象添加属性和方法... 59 4.4 继承... 60 4.4.1 原型实现继承... 61 4.4.2 构造函数实现继承... 62 4.4.3 重新定义继承的方法... 62 4.5 JavaScript内置对象... 63 4.5.1 JavaScript的内置对象框架... 63 4.5.2 基类Object 64 4.5.3 Date类... 64 4.5.4 String类... 66 4.5.5 Array类... 68 4.5.6 Math对象... 75 4.5.7 Object对象... 76 4.6 HTML DOM编程... 78 4.6.1 HTML DOM框架... 78 4.6.2 Document 对象... 80 4.6.3 Node（节点）对象... 81 4.6.4 NodeList对象... 88 第5章 使用Canvas画图... 89 5.1 Canvas元素... 89 5.1.1 Canvas元素的定义语法... 89 5.1.2 使用JavaScript获取网页中的Canvas对象... 89 5.2 坐标与颜色... 90 5.2.1 坐标系统... 90 5.2.2 颜色的表示方法... 90 5.3 绘制图形... 91 5.3.1 绘制直线... 91 5.3.2 绘制矩形... 93 5.3.3 绘制圆弧... 95 5.4 描边和填充... 95 5.4.1 描边... 95 5.4.2 填充图形内部... 96 5.4.3 渐变颜色... 96 5.4.4 透明颜色... 98 5.5 绘制图像与文字... 99 5.5.1 绘制图像... 99 5.5.2 组合图形... 101 5.5.3 输出文字... 102 5.6 图形的操作... 104 5.6.1 保存和恢复绘图状态... 104 5.6.2 图形的变换... 104 5.7 HTML5 Canvas动画实例... 106 5.7.1 动画的概念及原理... 106 5.7.2 游戏人物的跑步动画... 107 第6章 CSS3和jQuery动画... 109 6.1 CSS3语法基础... 109 6.1.1 CSS基本语句... 109 6.1.2 在HTML文档中应用CSS样式... 110 6.1.3 CSS 选择器... 110 6.2 CSS3动画... 112 6.2.1 变形... 112 6.2.2 过渡变换... 113 6.2.3 动画... 115 6.3 jQuery基础... 118 6.3.1 认识jQuery语法... 118 6.3.2 元素的属性与CSS样式控制... 119 6.3.3 CSS样式控制... 120 6.3.4 事件和Event对象... 124 6.4 jQuery动画... 130 6.4.1 显示和隐藏HTML元素... 130 6.4.2 淡入淡出效果... 132 6.4.3 滑动效果... 136 6.4.4 执行自定义的动画... 138 6.4.5 动画队列... 139 实 战 篇 第7章 HTML5人物拼图游戏... 147 7.1 人物拼图游戏介绍... 147 7.2 程序设计的思路... 147 7.3 程序设计的步骤... 148 第8章 扑克翻牌游戏... 153 8.1 扑克翻牌游戏介绍... 153 8.2 程序设计的思路... 153 8.2.1 HTML5倒计时功能... 153 8.2.2 扑克牌的显示与隐藏... 156 8.2.3 扑克牌的删除... 157 8.2.4 添加删除类别Class 158 8.3 程序设计的步骤... 159 8.3.1 设计CSS（matchgame.css）... 159 8.3.2 游戏页面index.htm.. 160 8.3.3 设计脚本（matchgame.js）... 163 第9章 推箱子游戏... 165 9.1 推箱子游戏介绍... 165 9.2 程序设计的思路... 166 9.3 程序设计的步骤... 168 9.3.1 游戏页面pushbox.htm.. 168 9.3.2 设计脚本（pushbox1.js）... 169 第10章 五子棋游戏... 178 10.1 五子棋游戏简介... 178 10.2 五子棋游戏的设计思想... 178 10.3 关键技术... 179 10.3.1 判断输赢的算法... 179 10.3.2 图形上色... 181 10.4 程序设计的步骤... 181 10.4.1 游戏页面five.html 181 10.4.2 设计脚本（Main.js）... 181 10.5 人机五子棋游戏的开发... 183 第11章 黑白棋游戏... 193 11.1 黑白棋游戏介绍... 193 11.2 黑白棋游戏设计的思路... 194 11.2.1 棋子和棋盘... 194 11.2.2 翻转对方的棋子... 194 11.2.3 显示执棋方可落子位置... 195 11.2.4 判断胜负的功能... 195 11.3 关键技术... 195 11.3.1 Canvas对象支持的JavaScript的鼠标事件... 195 11.3.2 获取鼠标在Canvas对象上的坐标... 196 11.4 黑白棋游戏设计的步骤... 196 11.4.1 游戏页面... 196 11.4.2 设计脚本（Main.js）... 197 第12章 俄罗斯方块游戏... 205 12.1 俄罗斯方块游戏介绍... 205 12.2 程序设计的思路... 205 12.2.1 俄罗斯方块形状设计... 205 12.2.2 俄罗斯方块游戏面板屏幕... 207 12.2.3 定位和旋转形状... 208 12.3 程序设计的步骤... 210 12.3.1 游戏页面... 210 12.3.2 设计脚本... 210 第13章 贪吃蛇游戏... 220 13.1 贪吃蛇游戏介绍... 220 13.2 程序设计的思路... 220 13.3 程序设计的步骤... 221 13.3.1 游戏页面... 221 13.3.2 设计脚本... 221 第14章 雷电飞机射击游戏... 228 14.1 雷电游戏介绍... 228 14.2 游戏设计的思路... 228 14.2.1 游戏素材... 228 14.2.2 地图滚动的原理实现... 229 14.2.3 飞机和子弹的实现... 230 14.3 游戏关键技术——碰撞检测... 231 14.3.1 矩形碰撞... 231 14.3.2 圆形碰撞... 233 14.3.3 像素碰撞... 233 14.4 雷电飞机游戏设计的步骤... 234 14.4.1 设计子弹类... 234 14.4.2 设计飞机类... 236 14.4.3 爆炸类... 238 14.4.4 设计主程序... 238 14.4.5 游戏页面... 242 第15章 FlappyBird游戏... 244 15.1 Flappy Bird游戏介绍... 244 15.2 Flappy Bird游戏设计的思路... 245 15.2.1 游戏素材... 245 15.2.2 游戏实现的原理... 245 15.3 Flappy Bird游戏设计的步骤... 245 15.3.1 设计Bird类（小鸟类）... 245 15.3.2 设计Obstacle类（管道障碍物类）... 246 15.3.3 设计FlappyBird类... 246 15.3.4 主程序... 250 15.3.5 游戏页面... 252 第16章 中国象棋... 253 16.1 中国象棋介绍... 253 16.2 中国象棋设计思路... 254 16.2.1 棋盘表示... 254 16.2.2 棋子表示... 254 16.2.3 走棋规则... 255 16.2.4 坐标转换... 256 16.3 中国象棋实现的步骤... 257 16.3.1 设计棋子类（Chess.js）... 257 16.3.2 设计游戏逻辑类（ChessGame.js）... 258 16.3.3 游戏页面... 270 第17章 两人麻将游戏... 272 17.1 麻将游戏介绍... 272 17.2 两人麻将游戏设计的思路... 273 17.2.1 素材图片... 273 17.2.2 游戏逻辑实现... 274 17.2.3 碰吃牌判断... 275 17.2.4 和牌算法... 276 17.2.5 实现电脑智能出牌... 279 17.3 两人麻将游戏设计的步骤... 281 17.3.1 麻将牌类设计（Card.js）... 281 17.3.2 设计游戏逻辑脚本（main2.js）... 282 17.3.3 游戏页面（index2.html）... 300 第18章 21点扑克牌游戏... 303 18.1 21点扑克牌游戏介绍... 303 18.2 设计思路... 303 18.3 程序设计的步骤... 304 18.3.1 扑克牌类MCard. 304 18.3.2 一副牌类MCard. 304 18.3.3 主程序... 305 第19章 基于lufylegend游戏引擎开发... 311 19.1 lufylegend游戏引擎介绍... 311 19.1.1 游戏引擎原理... 311 19.1.2 引入lufylegend游戏引擎... 312 19.1.3 利用引擎初始化游戏... 312 19.2 lufylegend游戏引擎基本功能... 313 19.2.1 图片的加载与显示... 313 19.2.2 图层... 316 19.2.3 利用图层实现游戏中的卷轴... 317 19.2.4 使用LGraphics对象绘图... 320 19.2.5 使用LTextField显示文字... 323 19.2.6 LGlobal全局类... 323 19.2.7 LLoadManage加载文件... 324 19.2.8 事件处理... 325 19.2.9 动画的实现... 327 19.3 lufylegend游戏引擎案例——接水果游戏... 331 参考文献 338