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学习笔记(十) js对象 继承
Jun 19 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
PHP4和PHP5共存于一系统
2006/11/17 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
python之wxPython应用实例
2014/09/28 Python
Python字符串中查找子串小技巧
2015/04/10 Python
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
django model object序列化实例
2020/03/13 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
新教师工作感言
2014/02/16 职场文书
中学生评语大全
2014/04/18 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
2014年管理工作总结
2014/11/22 职场文书
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL