微信小游戏开发入门 1/5 _开发入门

要须心地收汗马，孔孟行世目杲杲。这篇文章主要讲述微信小游戏开发入门 1/5相关的知识，希望能为你提供帮助。
背景此前从来没开发什么游戏，一直是企业后台开发，偶尔也会写一些管理控制台界面，以及一些桌面客户端。
对于微信小游戏，此前没有接触过，这次就抱着好奇心学习一下入门。
现在可以直接通过微信小程序的开发者工具进行开发，"微信小程序开发者工具"提供了一个开发小游戏的示例，可以快速创建一个简单飞机射击的小游戏。

【微信小游戏开发入门 1/5】看起来还是有模有样的小游戏。
我的主要目的是了解小游戏的开发流程，以及做简单的小游戏功能即可。所以飞机射击小游戏里面的js代码基本上可以让我有个入门了解。

游戏的基本逻辑小游戏的??canvas??画板的坐标是从左上角为原点，x轴向右增大，y轴向下增大。
游戏的主题驱动基本是一个大循环，每次循环中：

都对场景图片进行渲染，
对游戏精灵进行计算和渲染，
对游戏精灵进行移动操作等计算
对所有物体进行物理碰撞计算或者其他物理系统计算，
动画效果，?这里动画效果实际上也是连续的几个时间点进行不同图片的渲染。?
计算得分，
判断是否结束。
浏览器的刷新一般时每秒60帧，这里我理解为每秒进行多少次循环。

游戏主模块Main.js?示例游戏中 main.js为入口代码，我们按照调用时序来分析代码。?

Main的构造函数

constructor()

// 维护当前requestAnimationFrame的id
this.aniId = 0

this.restart()

restart代码如下，进行启动的工作，比如创建背景、玩家、敌人、以及其他对象。
requestAnimationFrame
最后一行的requestAnimationFrame是浏览器提供的针对动画的html5的api，它是一个定时器，但是不同于setInterval。
有时间参数，定时间隔是根据浏览器的刷新频率，一般显示器刷新频率是60Hz，即每秒60次，浏览器就会根据这个参数限制刷新次数，过高的刷新没有太大意义，该api是基于系统时间，固定间隔，紧跟浏览器刷新频率，每次都是将这次回调中所有dom操作或者绘图操作都集中起来一次完成。
restart()

restart()
databus.reset()
canvas.removeEventListener(
touchstart,
this.touchHandler
)
this.bg = new BackGround(ctx)
this.player = new Player(ctx)
this.gameinfo = new GameInfo()
this.music = new Music()
this.bindLoop = this.loop.bind(this)
this.hasEventBind = false
// 清除上一局的动画
window.cancelAnimationFrame(this.aniId)
this.aniId = window.requestAnimationFrame(
this.bindLoop,
canvas
)

Loop()
回调函数为bindLoop成员，即Main对象自己的loop函数，此处用了bind语法将方法和对象作为一个变量赋值给了bindLoop。

// 实现游戏帧循环

loop()
//计算当前是第几针
databus.frame++
if(databus.gameOver==false)
//计算
this.update()
//渲染
this.render()

this.aniId = window.requestAnimationFrame(
this.bindLoop,
canvas
)