【微信小游戏学习心得】

这里是引用

简介

本人通过学习了解微信小游戏，学习微信小游戏，加深了对前端框架，vue和react基于数据驱动视图的理解，及浏览器文档模型和javaScript之间的关系。帮助本人更好的工作和学习前端领域的编程。

了解微信小游戏

微信小游戏是小程序其中的一个类目，是一种基于微信平台开发，不需要下载安装即可使用的全新游戏应用，体现了“用完即走”的理念，充分节省用户的手机空间。 小游戏无论是开发以及使用都相当轻便快捷，同时基于微信的社交属性，让小游戏具备较强的社交传播力，用户可以和朋友一起享受游戏的乐趣。
以上是官方的介绍。
根据官方的指引需要安装开发者工具
https://developers.weixin.qq.com/minigame/introduction/

选择小游戏类目创建小游戏

官方提供了一套基础版本飞机大战的代码，本文得学习就是在这个基础上进行的。

理解2d游戏原理

小游戏的2d版本是基于canvas的绘图能力，官方给提供的游戏界面其整个就是一个游戏画布。我们制作游戏就是在整个画布上绘制完成的。在开始前需要了解画图的基本能力。
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

数据驱动视图

其入口目录是main.js。这个目录中定义了侦动画的连续绘制和各个组件的引用。

找到loop方法，这个方法调用了requestAnimationFrame Api实现了贞动画的连续绘制。

  // 实现游戏帧循环loop() {this.update(); // 更新游戏逻辑this.render(); // 渲染游戏画面// 请求下一帧动画this.aniId = requestAnimationFrame(this.loop.bind(this));}

其中update和render方法是重点，分别表示更新逻辑和绘制画面。
更新逻辑是是对游戏中绘制行为，图片，音频资源的调度。绘制模型的判断。
更新画面是最把运行结果绘制到画面上。让画面是动态的，从而实现交互。
在实操了这两个方法之后我又看了vue的代码的组件结构，react的代码目录结构

<template><div>{{helloWorld}}</div>
</template><script setup>const helloWorld = '你好，世界'
</script>

const HelloWorld = ()  => {const [helloWorld, setHelloWorld] = useState('')useEffect(() => {setHelloWorld('你好，世界')return () => {}}, [])return (<div>{helloWorld}</div>)
}

vue中template标签中定义了视图的渲染相当于render，script标签中定义渲染行为相当于update。
react中函数入口在执行过程中相当于是update, 函数出口相当于是render。
在类组件版本中这两个框架都有一个render函数执行渲染。其余的是开发者义处理逻辑。
来到小游戏的基础类中，有关于render方法实现

  /*** 将精灵图绘制在canvas上*/render(ctx) {if (!this.visible) return;ctx.drawImage(this.img, this.x, this.y, this.width, this.height);}update () {this.y += 1this.x += 0.1this.width += 1this.height += 1}

作用是绘制一张图片到指定位置。其中绘制的图片，坐标，大小都是变量可以在update中更改。
前面提到的requestAnimationFrame Api根据刷新频率不一样一般是每秒60帧或者120帧，我们可以通过技术手段将其锁定到60帧。一帧代表一次，而一帧所做的事就是要执行一次update和render。当我理解了这一点的时候就是明白了，界面并不是一静止不动的而是一直在更新，只不过内容看上去并无变化，给人感觉是静止的。页面的形态就是由绘制的数据决定的。从而这个过程就是数据驱动视图。
vue和react本质上所做的事并无区别，就是实现方式不同。

总结

因为2d小游戏提供了一个画布，并没有浏览器文档模型和层叠样式表。所以整个绘制过程需要自己实现。其复杂度是大于常规网页开发的。借助一些游戏类引擎可以帮我们简化开发。而数据驱动视图应该是电脑系统的工作模式。我们开发的app也是借助了系统的原生能力。