仿写“跳一跳”微信小游戏

课程简介

2017-12-28 下午，微信发布最新版本，蓄势已久的“微信小游戏”终于来了。在 2018 微信公开课 Pro 上，微信游戏产品总监孙春光指出，小游戏的累计用户达到了 3.1 亿（微信日活超过 9 亿）。

孙春光表示，2017 年移动游戏的自然人有 4 亿多，他们用 20 天就达到了这样一个数据。

作为微信小游戏的入门教程，此达人课共计10篇文章，带你一步一步实战仿写微信“跳一跳”小游戏。本课程共包含三大部分。

第一部分（第1-2篇）微信小游戏初识篇，包括微信小游戏的现状和发展，以及如何创建和发布微信小游戏。

第二部分（第3-6篇）页面组件构建篇，我们使用 EUI 来随机加载游戏方块，以及设计游戏开发中常见的资源加载、场景切换、音频播放、内存优化。

第三部分（第7-10篇）动画效果实现篇，这里我们使用 Tween 动画库，进行跳跃动画，压缩动画，舞台的整体位移动画等缓动动画的实现。

作者简介

王省伟，白鹭时代游戏高级开发工程师，亲自带领团队开发了《斗地主》《德州扑克》等 H5 游戏，参与开发《修罗武神 H5》、《富翁时代》H5 游戏项目。有5年互联网从业经验，3年 iOS 开发经验，3年 H5 游戏开发经验，2年课堂教学经验。曾先后就职于小米、盛大网络、腾讯文学等知名互联网公司担任高级软件工程师、架构师、项目经理等职位。

课程内容

第01课：初步认识

序言

2017年12月28日下午，微信发布最新版本，蓄势已久的“微信小游戏”终于来了。

腾讯在多个官方的公共号里推送了这条消息，iPhone 版微信（Android 版本在当天深夜推送了更新）更新后，用户在登入时，微信通过开屏向用户推荐了小游戏“跳一跳”。

垃圾回收

通过调用 wx.triggerGC() 方法，可以加快触发 JavaScriptCore Garbage Collection（垃圾回收），从而触发 JavaScript 中没有引用的 Canvas、Image 回收，释放对应的实际纹理储存。但 GC 具体触发时机还要取决于 JavaScriptCore 自身机制，并不能保证调用 wx.triggerGC() 能马上触发回收，建议在每局游戏开始或结束触发一下。

微信开发者工具

在对官方文档有了基本了解后，接下来我们启动开发过程。首先，我们可以去官网下载微信开发工具，安装完成之前，打开并通过微信扫一扫登录。

微信开发者工具目前可以选择小程序项目和微信公众号开发，这里我们选择进入小程序开发。

所有信息填写之后点击确定，进入微信开发工具。

我们将 databus.frame % 20 === 0 改为 databus.frame % 10 === 0，之后保存（Windows 系统下快捷键是 Ctrl+S，Mac系统下为 Command+S）运行，可以看出子弹射击的速度明显提升。

如何申请申请小游戏

上面带着大家创建了一个微信小游戏（微信工具自带的飞机大战），那将来如何发布到微信平台，让自己的小伙伴玩上自己写的游戏呢/p>

根据微信官方的说法，所有组织（包括企业、政府、非营利组织等等）和个人，在将来都可以注册小程序帐户，自己开发一款小游戏。

注册小游戏的流程，与注册小程序的流程基本一致。只需准备资质证明文件，并提供管理员的身份证明，就可以完成小游戏的开发。

截至本文发稿时，微信还未开放小游戏的注册，2018微信公开课 Pro 上，官方表示定于一个月内开放。

需要注意的是，小游戏也是一个小程序，所以注册小游戏将占用小程序的注册限额，即企业、政府等组织最多可注册50个小游戏和小程序，而个体户、个人，则只能注册5个小游戏和小程序；若个人已经绑定超过5个小程序管理员，也无法再绑定其他小游戏管理员。

对游戏引擎的支持

对于新入门的开发者来说，立刻着手写一个游戏，还是十分困难的。在此，推荐大家借助专业的 H5 游戏引擎，以快速轻松地开发自己的微信小游戏。

目前官方推荐的游戏引擎有 Egret Engine、Cocos-JS、LayaAir 三家，它们已经完成了自身引擎及其工具对小游戏的适配和支持。

结语

这篇文章带着大家使用微信开发者工具创建了一个微信小游戏的工程。下一篇，我们使用 egret 游戏引擎来一步一步创建“跳一跳”小游戏。

第03课：编译发布

第04课：场景管理

第05课：事件绑定

第06课：随机方块

第07课：触摸事件

第08课：落点计算

第09课：跳跃动画

第10课：优化总结

阅读全文: http://gitbook.cn/gitchat/column/5a6598c63862d16c8e92c871

文章知识点与官方知识档案匹配，可进一步学习相关知识小程序技能树首页概览3660 人正在系统学习中 相关资源：实例讲解分布式缓存软件Memcached的Java客户端使用-其它代码类…

来源：蔚1