原生JS实现判断碰撞的方法（趣味实例）

来源：动视网责编：小采时间：2020-11-27 19:48:54

原生JS实现判断碰撞的方法（趣味实例）

原生JS实现判断碰撞的方法（趣味实例）:下面是我给大家整理的原生JS实现判断碰撞的方法，有兴趣的同学可以去看看。HTML页面代码：<div id="d1"></div> <div id="d2"></div>CSS页面代码：<style type="tex

推荐度：

点击下载本文 文档为doc格式

导读原生JS实现判断碰撞的方法（趣味实例）:下面是我给大家整理的原生JS实现判断碰撞的方法，有兴趣的同学可以去看看。HTML页面代码：<div id="d1"></div> <div id="d2"></div>CSS页面代码：<style type="tex

下面是我给大家整理的原生JS实现判断碰撞的方法，有兴趣的同学可以去看看。

HTML页面代码：

<div id="d1"></div> 
<div id="d2"></div>

CSS页面代码：

<style type="text/css"> 
 * { 
 padding: 0px; 
 margin: 0px; 
 } 
 #d1{ 
 width: 100px; 
 height: 100px; 
 background: red; 
 position: absolute; 
 } 
 #d2{ 
 width: 200px; 
 height: 200px; 
 background: yellow; 
 position: absolute; 
 top: 200px; 
 left: 400px; 
 position: absolute; 
 } 
</style>

JS页面代码：

<script type="text/javascript"> 
 div=document.querySelectorAll("div"); 
function hit(obj){ 
 obj.onmousedown=function(e){ 
 var e=e||window.event; 
 var dX=e.offsetX; 
 var dY=e.offsetY; 
 document.onmousemove=function(e){ 
 var x=e.clientX; 
 var y=e.clientY; 
 obj.style.left=x-dX+"px"; 
 obj.style.top=y-dY+"px"; 
 if(div[0].offsetTop+div[0].offsetHeight>=div[1].offsetTop && div[0].offsetTop<=div[1].offsetTop+div[1].offsetHeight && div[0].offsetLeft+div[0].offsetWidth>=div[1].offsetLeft && div[0].offsetLeft<=div[1].offsetLeft+div[1].offsetWidth){ 
 console.log("你撞我了！再撞一个试试！") 
 }; 
 } 
 document.onmouseup=function(){ 
 document.onmousemove=null; 
 } 
} 
} 
hit(div[0]); 
hit(div[1]); 
</script>

上面是我整理给大家的原生JS实现判断碰撞的方法，希望今后会对大家有帮助。

JS下载文件流的简单操作（附上代码）

在js中生成验证码并验证(含有代码，简单粗暴，包教包会)

有关在JS 获取JSON数据简单调用（代码附上，简单粗暴）