我相信每一个程都有这样一个梦想，有一天他可以自己玩一个游戏。现在微信游戏让这个梦想唾手可得。

系列文章

小程序的基础：微信小游戏的初试(本文)如果你有开发h5游戏的经验，相信可以直接上手微信小游戏。就算你跟我一样，之前没有游戏开发经验，也没关系。看完这篇文章，相信你也可以尝试开发一个简单的小游戏来玩。

文件结构

任何应用都会有一个入口文件，微信游戏也是如此。游戏的入口文件是根目录下的game.js。从文件名可以看出，这个条目文件仍然是一个js文件。的确，小游戏的开发语言没有像小程序那样的另一套规范，但仍然使用js作为开发语言。

其次，一般来说，一个应用的代码除了功能逻辑之外，还有一些配置文件。对于小游戏来说，它只有一个必要的配置文件game.json，配置项不到十个。所以，如果你之前有开发h5游戏的经验，可以说基本没有学习成本。

有了这两个文件，游戏就可以正常运行了。

Adapter

虽然微信游戏使用js作为开发语言，但是游戏的运行环境是JavaScriptCore(iOS)和V8(Android)，而不是大家熟悉的浏览器或者Node，所以没有BOM、DOM或者文件操作等API。

你可能会想，没有DOM怎么玩？别担心，微信本身就提供了一系列的API来完成创建画布、绘制图形、显示图片、响应用户交互等基本功能。

“还有另一个API。你不是说没有学习成本吗？”又来了一波微信。

微信提供了一个很棒的库文件，名为weapp-adapter，用于浏览器或Node API与微信API之间的适配。只需将其引入门户文件，就可以直接使用DOM或其他(如Node)API编写小游戏，无需额外学习微信API。

注意：适配器将自动创建一个画布，并将其暴露给全局。这个画布也是主画布。稍后创建的画布不会直接显示。如果您想要显示它们，您需要在主画布上绘制它们。

当然，这个适配器并不完美，它还有很多缺点。

微信官方立场是第三方库，不属于小游戏范畴，以后不会维护。但是微信提供下载现有适配器实现的源代码，然后可以根据自己的需要添加功能进行维护。

其次，所有的适配最终都是通过微信提供的API来实现的，因此其对浏览器API的模拟是不完整的。

另外，图中的游戏引擎之前没有接触过，就不多说了。有兴趣的可以关注官方文件。

游戏大纲写完了，就不多说了。让我们先练习一个简单的游戏。

敲砖块小游戏

很久以前我在学习画布的时候，碰巧玩了一个用MDN敲砖的小游戏，所以这次就直接尝试了。

代码迁移

原来的代码模块划分做得不好，都写在一个文件里，但也方便了这次迁移。

首先创建一个game.js文件，在第一行介绍适配器，非常重要。同时，不要忘记创建一个game.json文件，只需设置显示方向即可。

然后，将原始代码从画布元素的获取一直复制到game.js，并保存运行。

没有警告！成功了。

但是这个游戏还不能开始，所以我们需要把原来的鼠标事件转换成触摸事件。

事件转换

首先，控制游戏开始和暂停的最初一系列点击、鼠标进入和鼠标退出事件被收集到touchstart事件中。

这个。帆布。addeventlistener(' touch start '，function () { if(！这个。游戏。start){ $ this。游戏。start=true这个。ref=窗口。RequestanimationFrame(函数(){ $ this。抽奖($ this)；});} else { $ this。游戏。start=false窗户。cancellanimationframe($ this。ref)；} });接着是控制挡板左右移动的事件，原先是通过鼠标的移动来控制

的，在移动端自然没有了鼠标，原本打算还是用 touch 事件来控制。在翻阅了小游戏的 API 之后，我发现了一个更好的选择——重力控制。

  wx.onAccelerometerChange(function (e) {    if ($this.game.start && !$this.game.over) {      $this.ct.clearRect(0, $this.canvas.height - $this.board.height, $this.canvas.width, $this.canvas.height);      var distance = e.x * $this.canvas.width;      $this.board.x = $this.getBoardX($this.canvas.width / 2 + distance, $this.board);      $this.board.draw();    }  });

现在就可以通过左右倾斜手机来控制挡板的移动了，是不是更有趣了？

从wx.onAccelerometerChange方法就可以看到，微信还提供了许多浏览器以外的功能，这里就不一一举例了，有兴趣的同学可以查阅下文档。微信小游戏的初探就到这里，消除砖块的功能就留给大家自己去尝试了。

PS：截止最新，微信小游戏还未正式开放。

写在最后

就如上一篇文章中所提到的，微信小游戏相较于原生 APP 的主要优势在于：微信——拥有庞大用户数，强社交，易推广。

等小游戏正式开放上线...