现在很多公司开始使用游戏化的方式去做产品，让产品呈现给用户时更好玩，以达到增加用户粘性，提升DAU的效果。

同时随着硬件与底层系统的发展，用户的终端对动画的表现能力也越来越强，很多APP以引导用户互动的方式开发业务，所以开发互动类业务将成为前端工程师的必备技能之一。

今天会带大家实现一个坦克大战的小游戏，让大家掌握小游戏开发基本思路和开发流程，开发出属于自己的微信小游戏。

一、为什么要学习⼩游戏开发

1. ⼩游戏发展迅速，许多业务场景都引⼊游戏或者游戏元素以满⾜业务发展，增强⽤户体验。

2. 移动设备硬件配置越来越⾼，⽤户对于⾼质量的app需求越来越强。

⼆、微信⼩游戏是什么

1、定位：

⼩游戏是⼩程序的⼀个类⽬，它即点即玩，⽆需下载安装，体验轻便。同时，⼩游戏与微信 关系链捆绑，可以邀请微信好友、群好友进⾏PK、围观等，充分享受⼩游戏带来的乐趣。

2、优势：

a. api ⻛格简单

b. ⽤户基数⼤ 、强社交属性更易于传播，分享。

c. 微信⼩游戏联合游戏引擎⼚商，增强游戏开发能⼒。

3、Runtime：

游戏引擎通常会包含渲染器(利⽤Canvas和 WebGL为底层技术抽象的图像绘制库)，碰撞检测，物理 引擎，声⾳，控制器⽀持，动画等部分。适合⼤型复杂的游戏场景

canvas: 浏览器内核⽀持，可以绘制各种图形以及具备⾼性能的图⽚渲染能⼒。（WebGL: 基于 OpenGL ES ，提供硬件3D加速渲染) 相对静态的简单的游戏完全可以实现。

4、技术选型：游戏引擎/纯webgl+canvas

三、canvas

1、基本概念：

html提供的⼀个标签，简单理解就是⼀张画布，需要获得渲染上下⽂，然后在其上⾯进⾏绘制。渲染上 下⽂简单理解就是⼀根画笔，有2D/3D。

2、基本能⼒：

使用 canvas 来绘制图形 - Web API 接口参考 | MDN

既然我们已经设置了 canvas 环境，我们可以深⼊了解如何在 canvas 上绘制。到本⽂的最后，你将学...

1、fillText(text, x, y [, maxWidth]) //绘制⽂字

2、arc(x, y, radius, startAngle, endAngle, anticlockwise) //绘制⼀个圆弧(顺
时针)

备注： arc() 函数中表示⻆的单位是弧度，不是⻆度。
⻆度与弧度的 js 表达式：弧度=(Math.PI/180)*⻆度。

3、drawImage(image, x, y,width,height) //绘制图⽚

4、ctx.fillStyle = "orange"; //填充颜⾊

5、ctx.strokeStyle = "red"; //图形轮廓颜⾊

6、ctx.save/ctx.restore() //⽅法被调⽤后，当前的状态就被推送到栈中保存

7、ctx.translate(100, 100); //移动画布原点位置

3、使⽤requestAnimationFrame执⾏动画

canvas动画的本质是不断地擦除和重绘，再结合⼀些时间控制的⽅法达到动画的⽬的，其实他跟动画 的本质是⼀样的， 都是在⼀段连续间隔的时间内去频繁的 改变位置。

requestAnimationFrame是浏览器提供的针对动画的HTML5的api，该api是16ms 回调⼀次，我们就可 以在这次回调中更新所有的数据，然后再重绘，这样就实现动画效果了。

window.requestAnimationFrame(callback)

四、实战

1、⻅缝插针类游戏

重点1：利⽤requestAnimationFrame实现游戏循环，从⽽使所有元素动起来。 

this.beginGame()
beginGame(){
 window.cancelAnimationFrame(this.aniId)
 this.aniId = window.requestAnimationFrame(
 ()=>this.loop(),
 canvas
 )
}
loop() {
 this.update()
 this.render()
 this.aniId = window.requestAnimationFrame(
 ()=>this.loop(),

如上代码在loop⽅法中同样调⽤了window.requestAnimationFrame，从⽽使得每⼀帧都会调⽤⼀次 loop()，从⽽实现了游戏的帧循环，那我们只要在update函数⾥⾯，频繁更新⼩球位置就可以使⼩球动起 来了

重点2：三⻆函数

 2、坦克⼤战

 重点1：loop循环

重点2：⾯向对象思想抽象Sprite精灵绘制基类

重点3：抽象游戏四类元素，wall、enemy、player，bullets

重点4：边缘碰撞（转换为数学问题，两个矩形是否相交）

 

五、基于webgl的渲染引擎库

1、pixi.js 2D渲染引擎库

http://pixijs.huashengweilai.com/guide/start/1.introduction.html

2、three.js 3D渲染引擎库

Three.js – JavaScript 3D Library