前言：微信小游戏源码是基于HTML5和微信小程序库开发的网页小游戏，其具有运行速度快、互动性好和平台移植容易等特点。

全套小游戏源码及演示：y.wxlbyx.icu

微信小游戏源码所包含的库：

●一个相位-小游戏模板,准备使用；

●《Flappy Bird》的一一个完整的迷你游戏演示；

●微信小游戏指南；

●完全集成了phaser 2.9 + pixiJs + p5重力引擎(来源ittlee /微信小游戏phaser)；

●基于es6的可扩展代码结构(基于导入/导出特性)；

●游戏功能使用:

。基于JSON的精灵动画；

。导入和缓存资产系统；

。动画；

。一个重力系统；

。碰撞系统；

。基于Leancloud的社交排行榜系统。

代码结构：

├───game.js : main entry point, Phaser. Game main function declared here
├───game.json : minigame configuration
├───images : static assets repository
└───js
├───game
│ ├───managers : each manager is a set of functions
│ │ ├───collisions.js : handles all collision events
│ │ ├───db.js : backend CRUD functions for leaderboard (based on Leancloud API)
│ │ ├───events.js : main events of the game functions
│ │ ├───generators.js : objects generators functions
│ │ ├───leaderboard.js : functions that handle leaderboard and ranking algorithms
│ │ ├───wechat.js : functions that handle WeChat-related API (getting user profile, user friends list etc...)
│ └───objects : Each object is a Class, with its separated file
│ ├───Background
│ ├───Bird
│ ├───Button
│ ├───Floor
│ ├───Pipe
│ ├───objects.js : singleton namespace window.objects where all the game objects live
│ ├───phases.js : different game phases (preload, create, update (called every frame), render (called every frame))
│ └───state.js : singleton namespace window.state where all the game states and parameters live
└───libs
└───lodash-modules

微信小程序游戏开发指南：

1.微信小游戏源码是如何运作的?

2.我是否可以编写自己的小游戏?什么时候发布?

3.限制是什么?就表现而言,可接受的期望是什么?

4.网页-迷你游戏和迷你游戏→网页转换是否可行?

5.开始

6. IDE和调试工具演示

7.让你的小游戏具有社交性可用的api

8.开始的资源和链接

9.在你开始之前,给你一些建议

1)微信小游戏源码是如何运作的?

整体架构:就像网页游戏

微信小程序游戏是基于网页技术，主要使用的语言是Javascript。这个系统与网络上的类似:canvas元素是可访问的，我们可以在每一帧上绘制。我们可以访问WebGL API，因此能够使用GPU使用Shaders (GLSL语言)进行计算。

ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);

但是实施上有一些不同

然而，WebGL和Canvas API实现不同于你可以在大多数web浏览器上找到的本地web实现。小游戏的运行环境在iOS上是JavaScriptCore，在Android上是V8。它们都运行在没有BOM和DOM的环境中。没有全局文档，也没有窗口对象。因此，如果你想使用DOM API来创建像Canvas和Image这样的元素，它会抛出一个错误。更多官方小游戏文件(中文)。

Web Libraries可以适应小游戏环境

为了在网页和小游戏之间架起桥梁，微信小游戏团队一直在开发一个特殊的库，武器适配器。我们的目标是让网页库与迷你游戏兼容。然而，该库的当前实现仍然不完善，而且经常需要额外的工作来修复您打算使用的每个第三方库。

2)我是否能够编写自己的小游戏?什么时候发布?

我是否可以编写自己的小游戏?是的，你已经可以编写自己的小游戏了!你所需要的一切，从文档到开发工具，都是公开的。

有什么限制?就表现而言，可接受的期望是什么?

游戏图像风格:2D和3D都是可能的。

多亏了WebGL，我们还可以显示3D游戏，这将是GPU加速的。

性能:比Web游戏稍微优化的系统

这个系统还很年轻，处于beta测试阶段，但我们已经看到它的性能与网页游戏非常相似。就目前而言，一个很好的经验法则是，不要期望网页游戏能做的更多。

规模仍然是主要限制因素。

迷你游戏的最大限制之一是它的大小。微信目前只允许最多4mb的游戏包。你的游戏可能能够从外部服务器下载额外的资产，但要考虑到这些资产必须在每次游戏启动时获取。所以，就资产而言，游戏应该是相当轻的，3D游戏应该使用低多边形3D对象和低质量纹理。

4)网页游戏→微信迷你游戏转换是否可行?微信小游戏→网页游戏的转换如何?

网页→迷你游戏转换:主要取决于底层代码库

将网页游戏转换成迷你游戏是可能的。然而，根据所使用的特定库和游戏引擎，这个过程可能需要数天甚至数月的开发时间。事先审核游戏源代码是必要的，以估计具体的调整需要多少时间。

迷你游戏→网页转换:非常快!

如果使用标准的网页游戏框架进行迷你游戏开发，如Phaser，你的代码将基本兼容网页，所以无需太多调整就可以在浏览器上运行。

以官方迷你游戏为例

a、下载微信miniapp和迷你游戏IDE；

b、按照以下步骤运行腾讯示例代码；

c、你现在可以在你的手机上通过点击Eye按钮和扫描QRcode预览迷你游戏样本。

6)IDE和调试工具演示

IDE和调试工具与迷你应用程序相同。不过，这些都是纯中文的。总的来说，调试经验是非常好的，尽管它可能有一些bug，因为它的年轻。

为了清晰起见，这里将整个界面翻译成英文。

7)让你的小游戏具有社交性:可用微信api

迷你游戏的核心趣味之一是无缝接入微信平台内的社交功能，这增加了它们的活力和用户粘性。下面介绍主要机制以及如何使用它们。

获取当前用户信息

wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})

你得到什么:

。用户名；

。城市；

。语言；

。性别；

。照片URL；

●你还不能得到的:

。openID(但这可能是因为迷你游戏还没有绑定到官方账号,尽管openID很快就可以访问；

●你永远不会得到的:

。电话号码；

。真实姓名；

。任何其他个人资料资料。

你可以获得的其他个人信息:

wx.getLocation() => user location
wx.getWeRunData() => get podometer data from werun

获取玩游戏的好友数据列表

wx.getFriendCloudStorage()

从用户的好友列表获取每个用户的数据;；

这些数据可以被修改和写入；

有利于好友排行榜和游戏中的好友状态提示；

获取Group-who-played-the-game数据列表

wx.getGroupCloudStorage()

从共享小游戏的群组中获取每个用户的数据；

这些数据可以被修改和写入；

适合群体游戏；

8)开始的资源和链接

迷你游戏

●文档

。迷你游戏官方文档

●代码存储库

。Phaser +小游戏模板，准备用户littlelee /微信小游戏Phaser。Threejs +小游戏端口

●IDE

移相器游戏库

●移相器的网站

●Phaser:创建你的第一 个游戏教程

●移相器的例子

●2.6移相器文档

9)在你开始之前给你一些建议

不要相信预览，一定要在真实设备上进行测试。

static preload(game) {
game.load.image(\'bg\', \'js/game/objects/Background/bg.jpg\') => working on both emulator + phone
// game.load.image(\'bg\', \'./js/game/objects/Background/bg.jpg\') => working only on emulator
}

这是在模拟器上工作的一段代码，但不是在真实设备上:

限制第三方库的使用，因为经常需要额外的工作

像lodash这样的图书馆并不是现成的。您经常需要进入源代码，并根据DOM/BOM api修改部件，以真正实现加载它们。在Lodash上，您可以通过逐个添加特定的模块来解决问题，而不是一次性添加整个库。但这并不总是那么容易!

npm install --save lodash.forEach
NOT
npm install --save lodash
将代码分成更小的文件，使调试更容易

当前的IDE调试系统的工作方式与Chrome和Firefox上的调试系统不同。我遇到过的最大的挫折之一是，许多问题最终都会抛出一个非常模糊的、非特定的错误消息，除了失败的文件之外，没有任何关于问题来自哪里的信息。因此，将代码划分为更小的块是非常重要的，因为在1000行文件中寻找一个拼写错误，而没有任何提示，比在50行文件中找到一个拼写错误要困难得多。