JS碰撞事件与CSS3动画结合的小游戏

JS碰撞事件与CSS3动画结合的小游戏

开发工具与关键技术：VisualStudio;JS,CSS3
作者：刘家龙
撰写时间：2019/1/20

下面跟大家分享一个简单的JS碰撞事件与css3动画结合的小游戏，这个游戏通过鼠标拖动小球来判断div与div之间是否发生碰撞来弹出提示框的小游戏，下面是游戏效果：

小球是靠鼠标拖动的，也可以通过控制上下左右4个键来实现移动，图中的轮子和两个大的div也是会动的，类似与机关之类的东西，当小球碰到机关时会弹出一个提示框1来告诉你游戏结束了，下面是效果图：

下面是用鼠标拖动div移动和div之间碰撞事件的代码：

这里声明了div1小球的上下左右4个边为t1,b1,l1,r1;div2的则为t2,b2,l2,r2；
当小球的边没碰到div2的边即l1>r2 ，b1<t2 ， t1>b2时不会弹出提示框，其他情况就是碰撞到了弹出提示框。当然，我这里这是简陋地设置了一下，你们也可以用object元素给它设置一个背景音乐，或者再给它加上一个遮罩层来当游戏开始的页面，再在游戏里多加上一些机关。也可以再写一个小球与终点的碰撞事件来弹出提示框来提示胜利，这里我是没有写判断死亡后自动刷新页面的代码，因为个人知识点不足也没有解决小球划到屏幕边缘时的溢出问题，还有很多有待改善，分享到此结束，谢谢大家的观赏。
JS代码参照于https://blog.csdn.net/u014205965/article/details/45971711