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

Posted 2022-03-25 文先生爱学习

背景

此前从来没开发什么游戏，一直是企业后台开发，偶尔也会写一些管理控制台界面，以及一些桌面客户端。

对于微信小游戏，此前没有接触过，这次就抱着好奇心学习一下入门。

现在可以直接通过微信小程序的开发者工具进行开发，"微信小程序开发者工具"提供了一个开发小游戏的示例，可以快速创建一个简单飞机射击的小游戏。

看起来还是有模有样的小游戏。

我的主要目的是了解小游戏的开发流程，以及做简单的小游戏功能即可。所以飞机射击小游戏里面的js代码基本上可以让我有个入门了解。

游戏的基本逻辑

小游戏的​​canvas​​画板的坐标是从左上角为原点，x轴向右增大，y轴向下增大。

游戏的主题驱动基本是一个大循环，每次循环中：

1. 都对场景图片进行渲染，
2. 对游戏精灵进行计算和渲染，
3. 对游戏精灵进行移动操作等计算
4. 对所有物体进行物理碰撞计算或者其他物理系统计算，
5. 动画效果，​这里动画效果实际上也是连续的几个时间点进行不同图片的渲染。​
6. 计算得分，
7. 判断是否结束。
8. 浏览器的刷新一般时每秒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
)

 继续看loop函数，整个游戏的驱动就是这个loop函数，主要无非就是三件事：1.判断是否游戏结束，2.若没有结束就计算所有游戏元素，3.渲染显示。

​完成三步骤以后，就是继续下一次循环的requestAnimationFrame。​

本篇就到这了，要准备去测核酸了。