原生js实现碰撞检测
更新时间：2020年03月12日 11:33:35 作者：qq_43606265
这篇文章主要为大家详细介绍了原生js实现碰撞检测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现碰撞检测的具体代码，供大家参考，具体内容如下
随手写了个简单的碰撞检测的代码。检测box1和box2是否发生碰撞，若发生碰撞，box2颜色发生随机改变，并反弹到随机位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1,.box2{
width: 100px;
height: 100px;
background-color: #f00;
position:absolute;
}
.box2{
background-color: #00f;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
<script>
var box1=document.querySelector(".box1");
var box2=document.querySelector(".box2");
box1.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
if(e.type==="mousedown"){
e.preventDefault();
document.elem=this;
document.pointX= e.offsetX;
document.pointY= e.offsetY;
document.addEventListener("mousemove",mouseHandler);
this.addEventListener("mouseup",mouseHandler);
}else if(e.type==="mousemove"){
this.elem.style.left= e.x-this.pointX+"px";
this.elem.style.top= e.y-this.pointY+"px";
hitText(this.elem,box2);
}else if(e.type==="mouseup"){
document.removeEventListener("mousemove",mouseHandler);
this.removeEventListener("mouseup",mouseHandler);
}
}
function hitText(elem1,elem2){
var rect1=elem1.getBoundingClientRect();
var rect2=elem2.getBoundingClientRect();
var ponit1={x:rect1.x,y:rect1.y};
var ponit4={x:rect1.x+rect1.width,y:rect1.y+rect1.height};
if(
ponit4.x>rect2.x
&&ponit1.x<(rect2.x+rect2.width)
&&ponit4.y>rect2.y
&&ponit1.y<(rect2.y+rect2.height)){
elem2.style.backgroundColor=randomColor();
elem2.style.left=Math.round(Math.random()*document.documentElement.clientWidth)+"px";
elem2.style.top=Math.round(Math.random()*document.documentElement.clientHeight)+"px";
}
}
function randomColor(){
var a=Math.round(Math.random()*255);
var b=Math.round(Math.random()*255);
var c=Math.round(Math.random()*255);
var color="rgb("+ a+","+b+","+c+")";
return color;
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇JS获取复选框的值,并传递到后台的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了Bootstrap实现模态框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了基于JS实现textarea中获取动态剩余字数的方法的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-05-05
这篇文章主要为大家详细介绍了微信小程序实现带滑块的进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
Symbol是es6引入的一个新的原始数据类型，是一个独一无二的值。这篇文章主要为大家介绍了JavaScript中原始数据类型Symbol的使用，感兴趣的可以了解一下2023-02-02
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
这篇文章主要介绍了Bootstrap组件之下拉菜单,多级菜单及按钮布局方法,结合完整实例形式分析了Bootstrap多级菜单布局相关样式功能与具体使用技巧,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了JS Canvas接口和动画效果大全，对Canvas感兴趣的同学，可以参考下2021-04-04
一个对于js this关键字的问题...2007-01-01
本文为大家讲解下JS的千分位算法的具体实现，先去除空格,判断是否空值和非数；针对是否有小数点，分情况处理；感兴趣的朋友可以参考下2013-07-07
一个父容器也是window的window下的comboBox在页面中点击无效，但是在控制台中查看它的store却是有值的，问题在于没有显示。下面小编给大家分享Extjs下拉框不显示的问题，需要的的朋友参考下吧2017-06-06
最新评论