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

Love The Way You Lie 2024-04-01 09:14 59阅读 0赞

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

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

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

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

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

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

### ⼆、微信⼩游戏是什么 ###

**1、定位：**

![730e4c9b280348f1b0cd0fdf4f8bf0c5.png][]

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

**2、优势：**

a. api ⻛格简单

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

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

3、Runtime：

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

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

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

### 三、canvas ###

**1、基本概念：**

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

**2、基本能⼒：**

[使用 canvas 来绘制图形 - Web API 接口参考 | MDN][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、⻅缝插针类游戏**

![3c50f1e571d14044985debf50aedb609.png][]

**重点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：三⻆函数**

![d93a5ba8f48e4ff2a6be747ff71c46dd.png][]

**2、坦克⼤战**

![1c5a36f617bc4932a38d6ccf37dc9f7e.png][]

重点1：loop循环

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

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

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

![a323c20aaada4dc5aadb51f88b5128d7.png][]

### 五、基于webgl的渲染引擎库 ###

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

[http://pixijs.huashengweilai.com/guide/start/1.introduction.html][http_pixijs.huashengweilai.com_guide_start_1.introduction.html]

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

[Three.js – JavaScript 3D Library][Three.js _ JavaScript 3D Library]

[730e4c9b280348f1b0cd0fdf4f8bf0c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/736ae17208314209b553b2035e01c6cb.png
[a264d0ffab804cc8b254c47c139978ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/275a8aee70da4edbadbad200f63371b2.png
[canvas _ - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
[3c50f1e571d14044985debf50aedb609.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0114a048f44f4060a8f1c8986eccf6d8.png
[d93a5ba8f48e4ff2a6be747ff71c46dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b614c4e21469430fa845dd8baa8e756c.png
[1c5a36f617bc4932a38d6ccf37dc9f7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/66f23bbb2c374aebbcd6197d544e7159.png
[a323c20aaada4dc5aadb51f88b5128d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bbfa37a8d70543f3ba4b23a3baffe189.png
[http_pixijs.huashengweilai.com_guide_start_1.introduction.html]: http://pixijs.huashengweilai.com/guide/start/1.introduction.html
[Three.js _ JavaScript 3D Library]: https://threejs.org/