JS实现碰撞检测效果


Posted in Javascript onMarch 12, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 按位取反运算符 (~)
Feb 04 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
js的延迟执行问题分析
Jun 23 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
jQuery实现大图轮播
Feb 13 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
使用JS实现动态时钟
Mar 12 #Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 #Javascript
js实现动态时钟
Mar 12 #Javascript
package.json各个属性说明详解
Mar 11 #Javascript
package.json中homepage属性的作用详解
Mar 11 #Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 #Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 #Javascript
You might like
聊天室php&amp;mysql(五)
2006/10/09 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python小技巧之批量抓取美女图片
2014/06/06 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
Python异常处理机制结构实例解析
2020/07/23 Python
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
个人贷款承诺书
2014/03/28 职场文书
明信片寄语大全
2014/04/08 职场文书
二手房买卖协议书
2014/04/10 职场文书
目标责任书范文
2014/04/14 职场文书
文明寝室标语
2014/06/13 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
施工安全保证书
2015/05/09 职场文书
老人院义工活动感想
2015/08/07 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书