微信小游戏源码|微信答题小程序游戏源码支持H5及手机WAP
前言：微信小游戏源码是基于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.开始
- 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行文件中找到一个拼写错误要困难得多。