微信小游戏入门(一)

本系列文章的目的是为初学微信小游戏（不是小程序）开发的人提供一个起步，因为微信小游戏的开发资料比小程序的开发资料要少很多，起步相对而言更困难一些。

本系列文章的案例使用了新建微信小游戏时自带的那个游戏作为起点，通过对该游戏的分析逐步让大家理解其中的工作原理和重要的API。

新建一个小游戏

打开”微信开发者工具”, 选择新建项目，在弹出窗口的左边菜单中选择”小游戏”，然后输入项目名称: “GettingStart”, AppID 选择测试号，后端服务选择”不使用云服务”。然后选择”新建”。微信开发者工具会帮助建立一个小游戏的框架。该框架是一个简化版的”雷电”游戏，包括如下一些目录和文件，我们先来看第一级目录:

+ audio
+ images
+ js
  README.md
  game.js
  game.json
  project.config.json

很明显， audio 目录中保存了游戏中需要的音乐、音效文件；images 用来放置游戏中用到的图片资源；js 目录显然是放置 javascript 程序用的， game.js 是小游戏的入口点。

打开 js 目录，可以看到如下的结构（此处借用了 README.md 文件中的内容）:

./js
├── base                                   // 定义游戏开发基础类
│   ├── animatoin.js                       // 帧动画的简易实现
│   ├── pool.js                            // 对象池的简易实现
│   └── sprite.js                          // 游戏基本元素精灵类
├── libs
│   ├── symbol.js                          // ES6 Symbol简易兼容
│   └── weapp-adapter.js                   // 小游戏适配器
├── npc
│   └── enemy.js                           // 敌机类
├── player
│   ├── bullet.js                          // 子弹类
│   └── index.js                           // 玩家类
├── runtime
│   ├── background.js                      // 背景类
│   ├── gameinfo.js                        // 用于展示分数和结算界面
│   └── music.js                           // 全局音效管理器
├── databus.js                             // 管控游戏状态
└── main.js                                // 游戏入口主函数

主程序与游戏帧循环

为了方便理解小游戏的运作方式，我们先将样例游戏进行简化，再按功能实现的步骤，一步一步的将程序搭建起来。

为此，我们将先删掉一些程序，以便使我们的起步足够好理解。为此，我们需要:

保持 audio, images 目录不变，将 js 中的 base, npc, runtime, player 这几个目录及目录中的文件删除。
删除 databus.js 文件
修改 main.js 文件为一下内容:

let ctx   = canvas.getContext('2d')

/**
 * 游戏主函数
 */
export default class Main {
  constructor() {

    this.restart()
  }

  restart() {
  }


  render() {
  }

  update() {
  }

  // 实现游戏帧循环
  loop() {

    this.update()
    this.render()

  }
}

这样，我们就比较方便的看清楚这个小游戏的主要结构了。基本的执行顺序就是:

构造对象
在构造函数中初始化数据，然后调用 restart 方法启动游戏帧循环（具体方法在后续介绍）
在帧循环中不断的调用 update 来处理游戏逻辑，调用 render 来显示游戏内容

下一步

在下一步中，我们将介绍在屏幕上显示图片的方法。