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定时器和优化的取消定时器方法
Jul 03 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
js 数据类型判断的方法
Dec 03 Javascript
html实现随机点名器的示例代码
Apr 02 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中显示数组与对象的实现代码
2011/04/18 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
后勤自我鉴定
2013/10/13 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
少儿节目主持串词
2014/04/02 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
爱国教育主题班会
2015/08/14 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL