原生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 相关文章推荐
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
Vue实现背景更换颜色操作
2020/07/17 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python五子棋游戏的设计与实现
2019/06/18 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
Django框架表单操作实例分析
2019/11/04 Python
python机器学习库xgboost的使用
2020/01/20 Python
jupyter notebook 多行输出实例
2020/04/09 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
期终自我鉴定
2014/02/17 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
趣味运动会简讯
2015/07/20 职场文书
客户答谢会致辞
2015/07/30 职场文书
护士岗位竞聘书
2015/09/15 职场文书
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL