未加星标

原生JS实现的碰撞检测功能示例

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文实例讲述了原生JS实现的碰撞检测功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net JS碰撞检测</title>
<style>
div{width:100px;
height:100px;
}
#box{background:red; position:absolute; }
#box1{background:green;position:absolute;top:300px; left:300px;}
</style>
<script>
//两个碰撞的盒子。是建立在一个不动的基础上。所以可以根据不动的盒子求出四个方向的left和top值。然后再判断其是否碰撞,且碰撞的过程随时改变其层级,(原需 var 8个变量,现在只需4个变量)
function collText(obj,left,top,obj1){
var l1=obj.offsetLeft-obj.offsetWidth;
var t1=obj.offsetTop-obj.offsetHeight;
var r1=obj.offsetLeft+obj.offsetWidth;
var b1=obj.offsetTop+obj.offsetHeight;
if(left<l1||top<t1||left>r1||top>b1){
obj.style.zIndex=3;
obj1.style.zIndex=1;
return true;
}else{
obj.style.zIndex=1;
obj1.style.zIndex=3;
return false;
}
};
window.onload=function(){
var oBox=document.getElementById('box');
var oBox1=document.getElementById('box1');
oBox.onmousedown=function(ev){
var oEvent= ev || event;
var disX=oEvent.clientX-oBox.offsetLeft;
var disY=oEvent.clientY-oBox.offsetTop;
document.onmousemove=function(ev){
var oEvent= ev || event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
oBox.style.left=l+'px' ;
oBox.style.top=t+'px' ;
if(collText(oBox1,l,t,oBox)){
oBox1.style.background='green';
}else{
oBox1.style.background='yellow';
}
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
oBox.reseaseCapture&&oBox.reseaseCapture();
};
oBox.setCapture&&oBox.setCapture();
return false;
}
oBox1.onmousedown=function(ev){
var oEvent= ev || event;
var disX1=oEvent.clientX-oBox1.offsetLeft;
var disY1=oEvent.clientY-oBox1.offsetTop;
document.onmousemove=function(ev){
var oEvent= ev || event;
var le=oEvent.clientX-disX1;
var to=oEvent.clientY-disY1;
oBox1.style.left=le+'px' ;
oBox1.style.top=to+'px' ;
if(collText(oBox,le,to,oBox1)){
oBox.style.background='red';
}else{
oBox.style.background='#000';
}
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
oBox1.reseaseCapture&&oBox1.reseaseCapture();
}
oBox1.setCapture&&oBox1.setCapture();
return false;
}
}
</script>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>

这里使用在线HTML/CSS/javascript运行工具http://tools.jb51.net/code/HtmlJsRun测试运行效果如下(碰撞判定时颜色改变):

 
原生JS实现的碰撞检测功能示例

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。


您可能感兴趣的文章:JS实现碰撞检测的方法分析js实现碰撞检测特效代码分享javascript制作游戏开发碰撞检测的封装代码JS实现判断碰撞的方法JavaScript拖拽、碰撞、重力及弹性运动实例分析JS碰撞运动实现方法详解JS实现小球的弹性碰撞效果JS+CSS实现带有碰撞缓冲效果的竖向导航条代码原生JS实现多个小球碰撞反弹效果示例JS实现简单的浮动碰撞效果示例

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: lt,gt,var,oBox,style,oBox1,oEvent,JavaScript,document,碰撞,obj,ev,function,top
分页:12
转载请注明
本文标题:原生JS实现的碰撞检测功能示例
本站链接:https://www.codesec.net/view/576835.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(123)