微信小程序游戏开发快速入门到实战(移动互联网开发技术丛书)

第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