脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS碰撞检测

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js页面跳转常用的几种方式

    js页面跳转常用的几种方式

    js实现页面跳转的几种方式，需要的朋友可以参考下。
    2010-11-11
  • javascript页面加载完执行事件代码

    javascript页面加载完执行事件代码

    本篇文章主要是对javascript页面加载完执行事件的代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • Bootstrap每天必学之日期控制

    Bootstrap每天必学之日期控制

    Bootstrap每天必学之日期控制，对Bootstrap日期控制感兴趣的小伙伴们可以参考一下
    2016-03-03
  • video.js 实现视频只能后退不能快进的思路详解

    video.js 实现视频只能后退不能快进的思路详解

    这篇文章主要介绍了video.js 实现视频只能后退不能快进的思路详解，主要思路是点击进度条需要获取拖动前的时间点，具体实例代码大家跟随小编一起看看吧
    2018-08-08
  • js闭包实现按秒计数

    js闭包实现按秒计数

    闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话，因为他描述的太学术。其实这句话通俗的来说就是：JavaScript中所有的function都是一个闭包。
    2015-04-04
  • 详解webpack模块加载器兼打包工具

    详解webpack模块加载器兼打包工具

    这篇文章主要介绍了webpack模块加载器兼打包工具，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • js实现烟花特效

    js实现烟花特效

    这篇文章主要为大家详细介绍了js实现烟花效果，实现鼠标点击出现模拟烟花爆炸的特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 使用jquery解析XML的方法

    使用jquery解析XML的方法

    这篇文章主要介绍了使用jquery解析XML的方法,代码简洁实用,需要的朋友可以参考下
    2014-09-09
  • JS获取子节点、父节点和兄弟节点的方法实例总结

    JS获取子节点、父节点和兄弟节点的方法实例总结

    这篇文章主要介绍了JS获取子节点、父节点和兄弟节点的方法,结合实例形式总结分析了JavaScript针对子节点、父节点和兄弟节点获取相关操作技巧与使用注意事项,需要的朋友可以参考下
    2018-07-07
  • 如何通过JS实现转码与解码

    如何通过JS实现转码与解码

    这篇文章主要介绍了如何通过JS实现转码与解码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02

最新评论