水果掉落小游戏（原生js+css动画）

摘要

水果下落小游戏，采用原生js的dom操作和css的animation，做的比较粗糙，目的是练习原生js的常用操作。游戏功能与界面均为他人设计，本demo具体代码实现由本人独立实现。

样式

demo功能：

1. 水果随机位置下落
2. 水果图片随机
3. 在水果下落至底部前点击它，加 1 分
4. 在水果下落到消失前没有点击到，扣 1 分
5. 随时完成分数的统计
6. 当水果被点击时产生抖动效果，随后消失
7. 点击”开始“进入游戏，再次点击按钮，游戏结束
8. 结束游戏时清空游戏界面，即使还有正在下落的水果

主要实现方式

1. 页面总体布局采用flex布局。
2. 游戏界面固定宽度为600px，position设置为relative。
3. 水果下落，首先创建img元素，采用随机数设置src和left，添加大小类img，下落类lower（动画），同时设置监听器与定时器。下落时间为5s，定时器用于监听5s后该元素是否存在，存在则removeChild并扣分。监听器用于监听点击事件。
4. 点击水果，首先暂停动画。而后采用getBoundingRect().y获取元素目前绝对高度，减去父元素得到相对高度；设置style.top的值后移除lower类和