原生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 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
跟我学习javascript的循环
Nov 18 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 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
PHP对象Object的概念 介绍
2012/06/14 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
前端性能优化建议
2020/09/17 Javascript
python 文件操作api(文件操作函数)
2016/08/28 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
校本教研工作方案
2014/01/14 职场文书
酒店员工检讨书
2014/02/18 职场文书
超市商业计划书
2014/05/04 职场文书
2015新年寄语大全
2014/12/08 职场文书
美容院管理规章制度
2015/08/05 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python