原生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中click事件的定义和用法
Dec 20 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
JavaScript中的类型检查
Feb 03 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
Node.js 深度调试方法解析
Jul 28 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判断字符以及字符串的包含方法属性
2008/08/30 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
jQuery 表格插件整理
2010/04/27 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
Vue中render方法的使用详解
2018/01/26 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
详解Django中的过滤器
2015/07/16 Python
Python 序列的方法总结
2016/10/18 Python
python实现树形打印目录结构
2018/03/29 Python
django创建超级用户过程解析
2019/09/18 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Python文件路径名的操作方法
2019/10/30 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
大学生实习证明范本
2014/01/15 职场文书
三万活动总结
2014/04/28 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
重阳节简报
2015/07/20 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python