摇一摇面包机

1项目背景

项目需求：要制作一个面包机，面包机不断往上滚动层板，层板上有很多个面包，而只要用户摇手机，就会随机掉下来一些面包。

用户不断摇，面包不断掉，而面包机不断生产面包，不断往上滚动补充面包。

2实现思路

为了得到更好的性能，选择在关键的动画上都使用css3而不使用javascript，最终的思路非常简单：

1）有4个层板（DIV），他们重复着向上移动的动画。

2）每个层板上有3个面包，当其中如果有面包需要掉落时，隐藏该面包，并同时增加一个专门用来掉的面包，然后开始让它执行掉的动作。

3）层板移动到面包机顶端时候，即开始重复动画之时，把之前隐藏的面包重新展示。

3具体实现及遇到的问题

1）重复移动的动画

 4个层板都共用了同样的样式（.roll），我们利用了infinite让其不断重播，只不过他们执行的动画之前有不同的延时，这样就实现了层板之间有平均的空隙来放面包（此处也决定了面包从底到顶一共需要4s的时间）

最终得到的效果是这样的：

但是这里存在着一个问题，我们希望动画一开始时候层板就布满面包机，而不希望要等个3秒钟才铺满，于是巧妙地利用到了动画延时可以支持负数的特性，改了一下代码如下：

这样就达到我们的目的了，动画一开始，面包机就布满了层板：

2）如何精准地掉面包

上面的思路中提到，真正掉下来的面包其实不是层板上的面包，而是我们临时新增的一个独立的面包，我们只是让层板上的面包隐藏一段时间而已。

所以我们需要解决一个问题，要让即将掉落的面包出现在对应时刻隐藏的面包的位置上，而由于循环滚动是用css写的，我们无法通过js很好地算出来即将掉落面包的位置坐标，于是我们只能利用 offset() 实时获取该面包相对于文档的位置来决定“要掉的面包”的位置，而比较庆幸的是，这个面包机只会不断往上滚动，而且面包个数是固定的，所以其实left的值是相对固定的：

3）如何在精确的时间点补充面包

掉落了面包之后，层板上就会存在着隐藏的面包，我们希望层板在完成当次动画循环时，即在下一次动画重新开始的时候，把面包补充上（即把隐藏的重新展示），但是非常遗憾的是，css3的动画并不存在完成后执行回调的说法（css与js的鸿沟还是无法跨越啊=。=），那怎么办呢？我们只能通过计算，然后用定时器setTimeout来实现补充面包了。

此处的思路是，在面包隐藏的时候，算出其当前位置距离面包机顶部还有多长的距离，然后用距离除以速度，就可以知道它继续移动到达顶部的时间需要多久，此时我们创建一个定时器，让它到达顶部的时候，补充面包。

 以上3个点就是整个项目的关键啦，相信看到这里大家都知道怎样可以实现跟这种类似的其他项目了。

4一些优化的小事情

1）性能优化

上面的思路中提到，“掉落的面包”是临时“增加”的，也就意味着会有DOM节点的插入，由于这个游戏是允许同时有多个面包掉落的，所以这个“掉落的面包”还不能通用一个DOM，这就导致了DOM节点随着不断摇，会越来越大的问题。

看下图（注意力放在右侧的DOM节点）：

过多的DOM节点可能会影响到页面的性能，于是决定将掉落的面包及时清扫掉：

可以看到通过定时去清理，没有了很多的垃圾面包的DOM存在，但是却没能解决不断插入DOM节点导致的性能问题，而且还引入了很多定时器，整体性能甚至更加低下了。

于是换了一个思路：

其实整个面包机同时最多存在的面包是固定的（4个层板，每层3个面包），所以其实最多同时掉落的面包也是固定的，我们完全可以循环去利用这个掉落的面包DOM，即：

a. 当掉落的面包少于12个时，仍然采用原先的规则，插入一个DOM；

b. 当第13个面包要掉的时候，不再插入DOM，而是用回第一个插入的DOM；

c. 以此类推。

看下效果：

细心的会发现，上面使用了 .children() 和 .eq() 选择器，而且随着面包不断的掉落，是大量的使用，所以其实也存在性能优化空间，最后最后的方案是换成ID选择器：

2）兼容性问题

众所周知，部分史前手机

不支持陀螺仪的，而本项目的核心

摇一摇

需要利用陀螺仪来判断摇晃的剧烈程度

从而决定面包掉落的多少

那遇到不能摇的手机怎么办呢？

是针对这种用户换一种游戏方式（比如换成点击掉落）？

还是提醒他手机不支持，让他尽快换手机呢？

最后的决定是

对于这种用户

脚本设置了自动每秒掉2个面包

（=。=）

反正我也不想告诉你的手机有问题了

反正你看到提示之后也开始使劲摇了

我就假装着掉吧，反正也就是个游戏嘛，嗯，开心就好

嗯，大家开心就好

扫码下方二维码

随时关注更多前端干货文章！

▼

微信：IMWebTech