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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
js 递归json树实现根据子id查父id的方法分析
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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP 变量类型的强制转换
2009/10/23 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
为数据添加append,remove功能
2006/10/03 Javascript
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
python实现将文本转换成语音的方法
2015/05/28 Python
Python 备份程序代码实现
2017/03/06 Python
flask框架路由常用定义方式总结
2019/07/23 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
Python字典实现伪切片功能
2020/10/28 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
文秘自荐信
2013/10/20 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
离婚协议书格式
2015/01/26 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers