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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
jquery遍历json对象集合详解
May 18 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
Vuex中实现数据状态查询与更改
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
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
vue实现单选和多选功能
2017/08/11 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
详解node.js 事件循环
2020/07/22 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
js制作提示框插件
2020/12/24 Javascript
Python随手笔记之标准类型内建函数
2015/12/02 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
优秀学生获奖感言
2014/02/15 职场文书
优乐美广告词
2014/03/14 职场文书
现金出纳岗位职责
2014/03/15 职场文书
php字符串倒叙
2021/04/01 PHP