微信小程序抽奖组件，这是一个基于canvas的刮刮乐效果，改进了之前流传在网上的一些方法，做了一些兼容性。

我们经常看到各类的消除游戏，最近玩了两把消消乐，有想着来理解下其中的规则，市场上主流的是地图型的，几乎是无尽模式，各种消除特效，各种各样的过关方式，玩起来还是不错的，就是遇到比较难的关卡，要多试几次，运气非常好的时候就过了，不然卡死。 由于篇幅关系，本章只会讲解生成地图的算法，…

这次的H5游戏是做在支付宝小程序中的，支付宝小程序官方并没有建议使用什么样的方式亦或是什么样的物理引擎去开发游戏相关内容，当然它也提供了Canvas的能力，如果使用原生canvas的能力去做，你就不可避免的需要处理图层，纹理，精灵图，Ticker，元素碰撞，动画时间轴，资源加载…

小精灵冒险 是 Learn Pixi.js 一书中最后一个案例。点击屏幕让小精灵飞起来，小精灵上升时，会拍打翅膀，并且会有小星星产生。如果她撞到柱子上，她会爆炸成一堆小星星。帮助她通过15个柱子的间隙到达终点，界面会显示一个巨大 Finish 标志。 还记得 学习 PixiJS…

碰撞检测，用来检查两个精灵是否接触。 Pixi 没有内置的碰撞检测系统， 所以这里我们使用一个名为 Bump 的库，Bump 是一个易于使用的2D碰撞方法的轻量级库，可与 Pixi 渲染引擎一起使用。它提供了制作大多数2D动作游戏所需的所有碰撞工具。 变量 b 现在代表 Bum…

补间动画指的是，我们可以通过为精灵的位置、比例、透明度，等属性，设置开始值和结束值，制作动画，动画中间需要的部分由软件自动计算填充。 Pixi 没有内置补间引擎，但是你可以使用很多很好的开源的补间库，比如 Tween.js 和 Dynamic.js 。如果要制作非常专业的自定义…

背景 现在越来越多的公司和APP开始使用游戏化的方式去做产品了，所谓游戏化，是指在非游戏环境中将游戏的思维和游戏的机制进行整合运用，以引导用户互动和使用的方法。支付宝里面的蚂蚁庄园、蚂蚁森林，通过游戏

以下是学习learn PIXI.js这本书的学习笔记，也是对我前一篇文章的补充——pixi的使用之创建和操作精灵，主要是个人读书笔记性质，为以后参考之用。本文是本人阅读并翻译原版书籍而来，原著虽短且浅，但翻译终归枯燥，断断续续花了我不少时间，如有对读者有所帮助，幸甚至哉。 我也…

某一天我收到了产品发来的微信消息。小X，我们的业务现在需要一个类似加入购物车的掉落动画，经过组织的慎重考虑，这个需求就交给你了。于是便有了这篇文章。本文并没有描述多少高深的技术，更多的是一些笔者在做动画时对动画原理的思考以及如何优化动画的一些思路。实现效果如下： 前端实现动画的…