这篇文章主要为大家详细介绍了射流研究…实现碰撞检测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…实现碰撞检测的具体代码，供大家参考，具体内容如下
代码：
！声明文档类型
html lang=’en ‘
头
meta charset=’UTF-8 ‘
meta name=’ viewport ‘ content=’ width=device-width，initial-scale=1.0 ‘
标题文档/标题
/头
风格
部门{
位置：绝对；
top:0px；
右：0px
底部：0px
左：0px
边距：自动；
宽度：300像素
高度：300像素
背景色：绿色；
}
跨度{
位置：绝对；
top:0px；
左：0px
显示：块；
宽度：100像素
高度：100像素
背景色：rgb(10，151，233)；
}
/风格
身体
分区/分区
span/span
脚本
var div=文档。getelementsbytagname(‘ div ‘)[0]；
var span=文档。getelementsbytagname(‘ span ‘)[0]；
span.onmousedown=function(e) {
//事件对象兼容
e=window.event | | e
//添加全局捕获
if (span.setCapture) {
跨度。set capture()；
}
//鼠标按下获取鼠标距离页面左侧和顶部距离
var x=e.clientX
var y=e客户群.
//元素距离页面左侧和顶部距离
var elex=span.offsetLeft
var eley=span.offsetTop
//鼠标距离元素距离=鼠标距离页面距离-元素距离页面距离
var X=X-elex；
var Y=Y-eley；
文档。onmousemove=function(e){
//鼠标移动获取鼠标距离页面距离
//事件对象兼容
e=window.event | | e
var movex=e.clientX
var movey=e .客户
//元素的左边的和顶端值=鼠标距离页面距离-鼠标距离元素距离
var leftx=movex-X；
var lefty=movey-Y；
/* – */
//碰撞检测
//1.左侧安全距离=大盒子距离页面左侧距离-小盒子占位宽
var安全左=div。偏移左跨度。offsetwidth
//2.右侧安全距离大盒子距离页面左侧距离大盒子占位宽
var安全右=div。向左偏移。offsetwidth
//3.上侧安全距离=大盒子距离页面顶部距离-小盒子占位高
var safe top=div。顶部跨度偏移。偏移高度；
//4.下侧安全距离=大盒子距离页面顶部距离大盒子占位高
var安全底部=div。offsettop分区。偏移高度；
if(leftx safe left | | leftx safe right | | lefty safe top | | lefty safe bottom){
div。风格。背景=’绿色’；
}否则{
div。风格。background=’ red
}
/* – */
//边界值
//左
if (leftx=0) {
leftx=0；
}
//上
if (lefty=0) {
lefty=0；
}
//右
变量右x=文档。documentelement。客户端宽度跨度。offsetwidth
if (leftx=rightx)
leftx=rightx
//下
变量右y=文档。documentelement。客户身高跨度。偏移高度；
if (lefty=righty) {
左撇子=右撇子；
}
跨度。风格。left=leftx ‘ px
跨度。风格。top=lefty ‘ px
}
document.onmouseup=function() {
document.onmousemove=null
if (span.releaseCapture) {
跨度。释放capture()；
}
}
//阻止默认事件
返回错误的
}
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
来源：脚本之家
链接：https://www。jb51。net/article/205001。html文件的后缀
