JS实现碰撞检测效果
更新时间：2020年03月12日 10:48:54 作者：李尚书
这篇文章主要为大家详细介绍了JS实现碰撞检测效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现碰撞检测效果的具体代码，供大家参考，具体内容如下
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#all{
width: 500px;
height: 500px;
border: 2px solid sandybrown;
position: relative;
margin: 0 auto;
}
#div1{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
#center{
width: 150px;
height: 150px;
background-color: black;
position: absolute;
margin: 175px;
}
</style>
</head>
<body>
<div id="all">
<div id="div1"></div>
<div id="center"></div>
</div>
<script type="text/javascript">
var oAll = document.getElementById("all");
var oDiv1 = document.getElementById("div1");
var oCenter = document.getElementById("center");
var maxL = oAll.clientWidth - oDiv1.clientWidth;
var maxT = oAll.clientHeight - oDiv1.clientHeight;
oDiv1.onmousedown = function(){
var ev = ev || window.event;
var lessX = ev.clientX - oDiv1.offsetLeft;
var lessY = ev.clientY - oDiv1.offsetTop;
document.onmousemove = function(){
var ev = ev || window.event;
var posL = ev.clientX - lessX;
var posT = ev.clientY - lessY;
if(oCenter.offsetLeft-oDiv1.offsetWidth<posL && posL<325 && oCenter.offsetLeft-oDiv1.offsetWidth<posT && posT<325 ){
oCenter.style.backgroundColor = "red"
}else{
oCenter.style.backgroundColor = "black"
}
if(posL<0){
posL = 0;
}
if(posT<0){
posT = 0;
}
if(posL>maxL){
posL = maxL;
}
if(posT>maxT){
posT = maxT;
}
oDiv1.style.left = posL + "px";
oDiv1.style.top = posT + "px";
}
}
document.onmouseup = function(){
document.onmousemove = null;
oDiv1.onmousemove = null;
}
</script>
</body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Open and Print a Word Document
Open and Print a Word Document...2007-06-06
下面小编就为大家分享一篇js 取消页面可以选中文字的功能方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
今天小编就为大家分享一篇layui对工具条进行选择性的显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
单击某一段文字，改文字变为红色，再次单击之后，文字又变回黑色，示例如下,需要的朋友可以参考下2014-06-06
最近在实现flash的播放音乐的功能，这就涉及到js和as交互的问题，因为要实现动态改变音乐文件的功能,可是如何判定呢？2013-07-07
由于浏览器的安全限制,Javascript无法直接获取用户上传文件的绝对路径。但是我们可以通过一些技巧来获取文件的相对路径,这篇文章主要给大家介绍了关于js获得相对路径文件并上传到服务器的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了JavaScript实现同步于本地时间的动态时间显示方法,实例分析了javascript获取本地时间及动态显示的技巧,并对实现代码进行了较为详尽的分析说明,需要的朋友可以参考下2015-02-02
Object.defineproperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，这篇文章主要介绍了Object.defineproperty方法,需要的朋友可以参考下2022-12-12
最近的系统加的功能是越来越多了,前两天老板又让实现一个录音上传的功能,可以点击播放按钮打开音频播放器,点击暂停按钮暂定播放,想了想决定使用input框的file类型加上接收的参数为audio来实现此功能,感兴趣的朋友可以参考下2024-06-06
这篇文章主要介绍了URL中“#” “？” &“”号的作用浅析,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
最新评论