微信小程序游戏开发快速入门到实战

第1篇 基 础 篇
第1章 微信小程序基础 3
1.1 微信小程序介绍 3
1.1.1 什么是微信小程序 3
1.1.2 注册开发者账号 4
1.2 微信小程序开发工具的使用 5
1.2.1 获取微信小程序AppID 5
1.2.2 安装微信开发者工具 5
1.2.3 微信小程序发布流程 8
1.3 微信小程序框架文件 9
1.3.1 创建一个微信小程序项目 9
1.3.2 小程序的框架结构 10
1.3.3 Page( )注册页面 16
1.4 微信小程序视图 18
1.4.1 绑定数据 18
1.4.2 条件渲染 21
1.4.3 循环渲染 21
1.4.4 WXML模板 23
1.4.5 WXML视图中的事件 23
1.4.6 WXSS 25
1.4.7 Flex布局 29
1.5 微信小程序页面组件 33
1.5.1 视图容器组件 34
1.5.2 基础内容组件 41
1.5.3 表单组件 45
1.5.4 导航组件 53
1.5.5 媒体组件 54
1.5.6 map地图组件 59
1.5.7 canvas画布组件 60
1.6 使用canvas画图 60
1.6.1 canvas组件定义语法 60
1.6.2 坐标系统 61
1.6.3 颜色的表示方法 61
1.6.4 绘制直线 62
1.6.5 绘制矩形 65
1.6.6 绘制圆弧 66
1.6.7 绘制图像 67
1.6.8 输出文字 68
1.6.9 保存和恢复绘图状态 71
1.6.10 图形的变换 72
1.7 canvas动画实例 73
1.7.1 动画的概念及原理 73
1.7.2 游戏人物的跑步动画 75
第2章 JavaScript语法基础 77
2.1 JavaScript语言概述 77
2.1.1 JavaScript语言简介 77
2.1.2 运行JavaScript语言 77
2.2 基本语法 79
2.2.1 数据类型 79
2.2.2 常量和变量 80
2.2.3 注释 81
2.2.4 运算符和表达式 82
2.3 常用控制语句 86
2.3.1 选择结构语句 86
2.3.2 循环结构语句 91
2.4 函数 94
2.4.1 创建自定义函数 95
2.4.2 调用函数 95
2.4.3 变量的作用域 96
2.4.4 函数的返回值 97
2.4.5 JavaScript内置函数 97
第3章 JavaScript面向对象程序设计 99
3.1 面向对象程序设计思想简介 99
3.1.1 什么是对象 99
3.1.2 面向对象编程 100
3.2 JavaScript类的定义和实例化 101
3.2.1 类的定义 101
3.2.2 创建对象（类的实例化） 101
3.2.3 通过对象直接初始化创建对象 102
3.3 JavaScript访问和添加对象的属性和方法 103
3.3.1 访问对象的属性和方法 103
3.3.2 向对象添加属性和方法 105
3.4 继承 106
3.4.1 原型实现继承 107
3.4.2 构造函数实现继承 108
3.4.3 重新定义继承的方法 108
3.5 JavaScript内置对象 109
3.5.1 JavaScript的内置对象框架 109
3.5.2 基类Object 110
3.5.3 Date类 110
3.5.4 String类 112
3.5.5 Array类 113
3.5.6 Math对象 120
3.5.7 Object对象 121
3.6 ES6简介 123
3.6.1 变量相关 123
3.6.2 数据类型 123
3.6.3 对象 124
3.6.4 class类 125
3.6.5 模块功能 127
3.6.6 箭头函数 128
第2篇 开 发 篇
第4章 石头剪刀布游戏 133
4.1 石头剪刀布游戏功能介绍 133
4.2 程序设计的思路 133
4.2.1 控制剪刀、石头、布的快速切换 133
4.2.2 用户出拳 134
4.3 关键技术 134
4.3.1 事件的绑定 134
4.3.2 事件对象 136
4.3.3 事件对象数据参数的传递 137
4.4 程序设计的步骤 138
4.4.1 游戏布局 138
4.4.2 游戏脚本 141
第5章 井字棋游戏 144
5.1 井字棋游戏介绍 144
5.2 程序设计的思路 144
5.2.1 计算机智能下棋 144
5.2.2 井字棋输赢判断 145
5.3 关键技术 146
5.3.1 画布canvas 146
5.3.2 响应canvas组件事件 147
5.4 程序设计的步骤 148
5.4.1 选择对战模式页面 148
5.4.2 人人对战游戏页面 150
5.4.3 人机对战游戏页面 153
第6章 贪吃蛇游戏 156
6.1 贪吃蛇游戏介绍 156
6.2 程序设计的思路 156
6.3 关键技术 157
6.3.1 获取屏幕大小 157
6.3.2 小程序中this和that的使用 158
6.3.3 JavaScript数组操作 158
6.4 程序设计的步骤 159
6.4.1 index.wxml视图文件 159
6.4.2 index.js文件 159
第7章 看图猜成语游戏 165
7.1 看图猜成语游戏介绍 165
7.2 程序设计的思路 165
7.2.1 游戏素材 165
7.2.2 设计思路 166
7.3 关键技术 166
7.3.1 动态控制按钮组件的文字 166
7.3.2 通过条件渲染显示不同结果 167
7.4 程序设计的步骤 168
7.4.1 guess.wxml文件 168
7.4.2 guess.js文件 169
第8章 智力测试游戏--button版 172
8.1 智力测试游戏介绍 172
8.2 程序设计的思路 172
8.3 程序设计的步骤 173
8.3.1 exam.wxml文件 173
8.3.2 exam.js页面文件 174
8.3.3 exam.wxss样式文件 177
8.3.4 简单的结束页面 178
8.4 拓展知识 179
8.4.1 读取本地TXT文本 179
8.4.2 云文件存储题目 180
第9章 智力测试游戏--radio版 182
9.1 智力测试游戏介绍 182
9.2 程序设计的思路 182
9.3 关键技术 183
9.3.1 radio组件 183
9.3.2 列表渲染 184
9.3.3 checkbox组件 187
9.4 程序设计的步骤 189
9.4.1 radio.wxml文件 189
9.4.2 radio.js文件 189
第10章 连连看游戏 193
10.1 连连看游戏介绍 193
10.2 程序设计的思路 194
10.3 程序设计的步骤 205
第11章 推箱子游戏 210
11.1 推箱子游戏介绍 210
11.2 程序设计的思路 211
11.3 程序设计的步骤 213
11.3.1 游戏视图文件index.wxml 213
11.3.2 设计脚本index.js 214
第12章 五子棋游戏 225
12.1 五子棋游戏简介 225
12.2 五子棋设计思想 226
12.3 关键技术 226
12.3.1 判断输赢的算法 226
12.3.2 图形上色 228
12.3.3 调用模块代码 228
12.4 程序设计的步骤 229
12.4.1 游戏视图index.wxml 229
12.4.2 设计脚本index.js 229
12.5 人机五子棋游戏的开发 231
第13章 黑白棋游戏 241
13.1 黑白棋游戏介绍 241
13.2 黑白棋游戏设计的思路 242
13.2.1 棋子和棋盘 242
13.2.2 翻转对方的棋子 242
13.2.3 显示执棋方可落子位置 242
13.2.4 判断胜负功能 243
13.3 黑白棋游戏设计的步骤 243
13.3.1 游戏页面视图WXML 243
13.3.2 设计脚本index.js 243
第14章 拼图游戏 252
14.1 拼图游戏介绍 252
14.2 程序设计的思路 253
14.3 数字拼图游戏程序设计的步骤 254
14.3.1 游戏页面 254
14.3.2 pintu2.js文件 255
14.4 人物拼图游戏程序设计的步骤 257
14.5 图片组件拓展案例——翻牌游戏 257
14.5.1 游戏页面 258
14.5.2 查看排行榜页面 263
第15章 Flappy Bird游戏 265
15.1 Flappy Bird游戏介绍 265
15.2 Flappy Bird游戏设计的思路 266
15.2.1 游戏素材 266
15.2.2 游戏实现原理 266
15.2.3 游戏关键技术——碰撞检测 266
15.3 Flappy Bird游戏设计的步骤 270
15.3.1 设计Bird类（小鸟类） 270
15.3.2 设计Obstacle类（管道障碍物类） 270
15.3.3 设计FlappyBird类 271
15.3.4 主程序 275
15.3.5 游戏页面视图文件 276
第16章 摇一摇变脸游戏 278
16.1 摇一摇变脸游戏介绍 278
16.2 程序设计的思路 278
16.3 关键技术 279
16.3.1 小程序的加速度计API 279
16.3.2 加速度计API的简单应用 280
16.4 程序设计的步骤 281
16.4.1 游戏页面视图WXML 281
16.4.2 设计脚本index.js 281
第17章 抽奖小游戏 283
17.1 抽奖小游戏介绍 283
17.2 程序设计的思路 283
17.3 关键技术 284
17.3.1 动画实例 284
17.3.2 动画描述 285
17.3.3 动画导出 287
17.4 程序设计的步骤 288
17.4.1 游戏页面视图WXML 288
17.4.2 设计脚本index.js 289
第3篇 提 高 篇
第18章 原生微信小游戏开发基础 295
18.1 微信小游戏的发展史 295
18.2 什么是微信小游戏 295
18.3 微信小游戏开发过程 296
18.4 微信小游戏目录结构 298
18.5 微信小游戏开发API 298
18.6 微信小游戏动画和触摸事件 300
18.7 微信小游戏全局对象 302
18.8 微信小游戏Adapter（适配器） 303
第19章 微信小游戏——接宝石箱子游戏 304
19.1 接宝石箱子游戏介绍 304
19.2 程序设计的步骤 304
19.3 游戏功能改进 307
19.3.1 增加炸弹功能 307
19.3.2 增加游戏失败功能 308
19.3.3 增加背景音乐功能 309
第20章 Cocos Creator游戏开发基础 311
20.1 Cocos Creator介绍 311
20.1.1 Cocos Creator安装和启动 311
20.1.2 Cocos Creator发布到原生平台 312
20.2 第一个Hello项目 314
20.2.1 打开场景 314
20.2.2 预览场景 315
20.2.3 项目结构 316
20.3 Cocos Creator编辑器的使用 317
20.3.1 资源管理器 317
20.3.2 场景编辑器 318
20.3.3 层级管理器 320
20.3.4 属性检查器 321
20.3.5 控件库 323
20.4 Cocos Creator游戏开发入门 323
20.4.1 使用组件（控件） 324
20.4.2 事件响应 334
20.4.3 坐标系 336
20.4.4 节点属性和方法 338
20.4.5 动作 340
第21章 Cocos Creator开发实战——跳跳猫 342
21.1 跳跳猫小游戏介绍 342
21.2 创建项目 342
21.2.1 添加资源和游戏场景 343
21.2.2 创建游戏场景 344
21.2.3 添加游戏背景 345
21.2.4 添加游戏地面 345
21.3 添加游戏主角 346
21.3.1 添加游戏的主角小猫 346
21.3.2 编写主角脚本 346
21.3.3 实现主角跳跃和移动 348
21.3.4 实现主角移动控制 349
21.4 添加星星 352
21.4.1 制作Prefab（预制）资源星星 352
21.4.2 游戏主逻辑脚本 353
21.4.3 随机位置添加星星 355
21.4.4 主角碰触收集星星 356
21.5 游戏逻辑实现 357
21.5.1 显示游戏得分 357
21.5.2 添加得分逻辑 357
21.5.3 失败判定和重新开始 359
21.5.4 加入音效 360
21.6 发布到微信小游戏平台 362
第22章 Cocos Creator开发实战——俄罗斯方块 364
22.1 俄罗斯方块小游戏介绍 364
22.2 创建项目 365
22.2.1 添加资源 365
22.2.2 创建游戏场景 365
22.3 项目核心代码实现 367
22.3.1 游戏方块的七种形状 367
22.3.2 游戏逻辑实现 369
22.3.3 形状的旋转和移动 372
22.3.4 游戏方块消除 376
22.3.5 游戏失败逻辑 377
22.3.6 游戏暂停以及得分和音效 378
22.3.7 记录历史成绩功能 380
参考文献 381