JS实现碰撞检测实例详解

本文实例讲述了JS实现碰撞检测的方法。分享给大家供大家参考，具体如下：

一个简单的碰撞检测例子，检测p1是否和p2发生碰撞，当p1碰到p2时，改变p2的颜色，看测试图

看一下分析图：

当p1在p2的上边线(t2)以上的区域活动时，始终碰不上
当p1在p2的右边线(r2)以右的区域活动时,始终碰不上
当p1在p2的下边线(b2)以下的区域活动时,始终碰不上
当p1在p2的左边线(r2)以左的区域活动时,始终碰不上

除了以上四种情况，其他情况表示p1和p2碰上了，下面试完整测试代码

HTML部分：

<p id="p1"></p>
<p id="p2"></p>

css部分：

<style>
    #p1{
      width:100px ;height: 100px;background: green;
      position: absolute;
    }
    #p2{
      width:100px ;height: 100px;background: yellow;
      position: absolute;left: 300px;top: 200px;z-index: -1;
    }
</style>

JS部分：

相关推荐：

JS实现简单的浮动碰撞效果实例分享

实例详解JS实现小球的弹性碰撞效果

javascript制作游戏开发碰撞检测的封装代码_javascript技巧

以上就是JS实现碰撞检测实例详解的详细内容，更多请关注Gxl网其它相关文章！