微信小游戏开发之坦克大战（比羊了个羊还好玩系列）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小游戏开发之坦克大战（比羊了个羊还好玩系列）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

现在很多公司开始使用游戏化的方式去做产品，让产品呈现给用户时更好玩，以达到增加用户粘性，提升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：三⻆函数

微信小游戏开发之坦克大战（比羊了个羊还好玩系列）