原生js实现碰撞检测


Posted in Javascript onMarch 12, 2020

本文实例为大家分享了js实现碰撞检测的具体代码,供大家参考,具体内容如下

随手写了个简单的碰撞检测的代码。检测box1和box2是否发生碰撞,若发生碰撞,box2颜色发生随机改变,并反弹到随机位置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box1,.box2{
      width: 100px;
      height: 100px;
      background-color: #f00;
      position:absolute;
    }
    .box2{
      background-color: #00f;
      left: 200px;
      top: 200px;
    }
    
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
<script>
  var box1=document.querySelector(".box1");
  var box2=document.querySelector(".box2");
  box1.addEventListener("mousedown",mouseHandler);
  function mouseHandler(e){
    if(e.type==="mousedown"){
      e.preventDefault();
      document.elem=this;
      document.pointX= e.offsetX;
      document.pointY= e.offsetY;
      document.addEventListener("mousemove",mouseHandler);
      this.addEventListener("mouseup",mouseHandler);
    }else if(e.type==="mousemove"){
      this.elem.style.left= e.x-this.pointX+"px";
      this.elem.style.top= e.y-this.pointY+"px";
      hitText(this.elem,box2);
    }else if(e.type==="mouseup"){
      document.removeEventListener("mousemove",mouseHandler);
      this.removeEventListener("mouseup",mouseHandler);
    }
  }
  function hitText(elem1,elem2){
    var rect1=elem1.getBoundingClientRect();
    var rect2=elem2.getBoundingClientRect();
    var ponit1={x:rect1.x,y:rect1.y};
    var ponit4={x:rect1.x+rect1.width,y:rect1.y+rect1.height};
    if(
      ponit4.x>rect2.x
        &&ponit1.x<(rect2.x+rect2.width)
        &&ponit4.y>rect2.y
        &&ponit1.y<(rect2.y+rect2.height)){
      elem2.style.backgroundColor=randomColor();
      elem2.style.left=Math.round(Math.random()*document.documentElement.clientWidth)+"px";
      elem2.style.top=Math.round(Math.random()*document.documentElement.clientHeight)+"px";
    }
  }
  function randomColor(){
    var a=Math.round(Math.random()*255);
    var b=Math.round(Math.random()*255);
    var c=Math.round(Math.random()*255);
    var color="rgb("+ a+","+b+","+c+")";
    return color;
  }
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT HashTable
Jan 22 Javascript
JQuery 常用方法基础教程
Feb 06 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 #Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 #Javascript
JS实现碰撞检测效果
Mar 12 #Javascript
使用JS实现动态时钟
Mar 12 #Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 #Javascript
js实现动态时钟
Mar 12 #Javascript
package.json各个属性说明详解
Mar 11 #Javascript
You might like
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
PHP之变量、常量学习笔记
2008/03/27 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python配置grpc环境
2019/01/01 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
python实现简单的tcp 文件下载
2020/09/16 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
护士辞职信范文
2014/01/19 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
关于诚信的活动方案
2014/08/18 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
环境卫生整治简报
2015/07/20 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
微信小程序基础教程之echart的使用
2021/06/01 Javascript
Nginx反向代理学习实例教程
2021/10/24 Servers