使用了webpack作为构建工具,webpack-dev-server热加载。部分代码用了ES6,有些语法糖用起来还是非常爽的了😁,大部分还是ES5了。绘图用的canvas
- npm install
- npm run dev // 本地调试
- npm run build // 打包生成代码
- localhost:8080 访问
难点在于如何使物体爆炸后向下移动,我这里用的方法是,每个元素都有一个向下运动的趋势ty,这个趋势的默认值是根初始值的y值一样,每次有相同元素找到的时候将这个值加上他的上面有多少个元素爆炸了,然后绘制的时候用这个element.y += (element.ty - element.y) * 0.08来一个缓动,为了实现这个效果,每次循环的时候我还得重新设置下当前所有元素的值,因为元素向下移动的时候它的位置也发生变化了