网站推广互联网推广,网站前台如何做访问量显示,中国中信建设有限责任公司,vps优化wordpress这里是引用 微信小游戏学习心得 简介了解微信小游戏理解2d游戏原理数据驱动视图总结 简介
本人通过学习了解微信小游戏#xff0c;学习微信小游戏#xff0c;加深了对前端框架#xff0c;vue和react基于数据驱动视图的理解#xff0c;及浏览器文档模型和javaScript之间的关… 这里是引用 微信小游戏学习心得 简介了解微信小游戏理解2d游戏原理数据驱动视图总结 简介
本人通过学习了解微信小游戏学习微信小游戏加深了对前端框架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的代码目录结构
templatediv{{helloWorld}}/div
/templatescript setupconst helloWorld 你好世界
/scriptconst HelloWorld () {const [helloWorld, setHelloWorld] useState()useEffect(() {setHelloWorld(你好世界)return () {}}, [])return (div{helloWorld}/div)
}vue中template标签中定义了视图的渲染相当于renderscript标签中定义渲染行为相当于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也是借助了系统的原生能力。
