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 读取图片文件的大小
Jun 25 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
canvas实现图像放大镜
Feb 06 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 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 高手之路(三)
2006/10/09 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
详解Vue SPA项目优化小记
2018/07/03 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
python的常见命令注入威胁
2013/02/18 Python
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
flask中的wtforms使用方法
2018/07/21 Python
Django密码系统实现过程详解
2019/07/19 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
Python自动登录QQ的实现示例
2020/08/28 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
英国Amara家居法国网站:家居装饰,现代装饰和豪华礼品
2016/12/15 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
8和9的加减法教学反思
2014/05/01 职场文书
2014年国庆标语
2014/06/30 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
Java 数组的使用
2022/05/11 Java/Android