PixiJS 实现娃娃机

起因

2018年俄罗斯世界杯，公司说要和俄罗斯世界杯合作搞一场大型的营销活动，为了增加用户的互动和体现世界杯的元素，经过设计师和运营人员的反复敲定，这个活动就这样诞生了，设计简图如下：

前端游戏引擎

因为之前用 CreateJS 做过一个简单的交互类游戏，它主要是4个主要组件：EaselJS、TweenJS、SoundJS、PreloadJS，它可以进行短期快速简单的开发，但社区活跃度不高、性能等问题让我没有继续用的想法。经过同事推荐，PixiJS 引起了我的注意，而且这两者对于主要对象定义也很类似，有了前者的基础，入手也比较快，代码维护性也高。而对于这种我没用过的库，我都有一种想试一试的冲动，好奇和探究感觉是最有意思的。

正式开始

创建画布和绘制舞台stage

let app = new PIXI.Application({
    width: 667, 
    height: 472,
    transparent: true,
    resolution: 1,
});
document.body.appendChild(app.view);
复制代码

缓存图片资源

使用canvas绘制图片的时候，需要图片提前加载完成

PIXI.loader.add([
    { name: 'paw', url: '',}
    { name: 'convey', url: '',}
    ...
])
.on("progress", loadProgressHandler) // 监视加载进程
.load(setup);
复制代码

绘制精灵

function loadProgressHandler (loader, resource) { 
    console.log("loading: " + resource.url);
    console.log("progress: " + loader.progress + "%");
}
funtion setup() {
    let paw = new PIXI.Sprite(PIXI.loader.resources.paw.texture);  // 爪子
    paw.x = 0;   // 精灵的位置（以画布左上角为中心点）
    pax.y = 0;
    let convey = new PIXI.Sprite(PIXI.loader.resources.convey.texture); // 传送带
    elemtScale([paw, convey]); // 精灵缩放比例
    app.stage.addChild(paw, convey); // 把绘制的图片加入舞台
    ...
}
// 精灵缩放比例
elemtScale(arr) {
    const bit = window.innerWidth / 375;  // 750的设计图
    for (let i = 0; i < arr.length; i += 1) {
        arr[i].scale.set(bit, bit);
    }
},
复制代码

这时候你需要的图片和娃娃机的大概布局已经显示在画布了。

实现动画

PixiJs 的FPS是60帧 提供了ticker方法，就是每一秒刷新舞台60次。

function setup() {
    app.ticker.add(() => gameLoop(delta));
}
let speed = 5;
gameLoop() {
    paw += speed;
}
复制代码

需求与思考

为了满足运营方的需求，在保证两排娃娃一直在匀速运动的同时，当按下按钮时，要保证爪子能正好抓到娃娃的头而实现娃娃抓住的效果。

我的思路

在基于娃娃匀速移动，爪子向下移动的速度不变的情况下，当按下按钮的那一刻，首先确定要抓起来的是哪个娃娃来倒推计算。爪子到达娃娃顶部所需的时间t1与距离s1,来反算在同样时间娃娃所走过的距离s1，来取大于等于s1距离最近的娃娃为被抓起来的娃娃。而这段时间差，而让爪子延迟下落，实现正好抓住娃娃头的方案。（不知道我说的明白不明白）

这种方案可能会让用户感觉有0.5s左右的延迟，也许不是最优方案，大家有更好的想法可以留言讨论哈。

最后

虽然不是第一次用类似的游戏引擎，但是对于各种定时器、公共方法的封装、实现思路的思路感觉自己还是有所欠缺。其中遇到的精灵层级、偶尔动画晃动的原因还是没有完美解决，希望自己以后可以多总结、思考，才能提高。

转载于:https://juejin.im/post/5c7113a16fb9a049df24b15d