js实现div色块碰撞


Posted in Javascript onJanuary 16, 2020

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

描述:

生成两个div色块,一个可以拖动,一个不可以,用拖动的去撞击不能动的,会将这个色块随机撞到一个位置,改变颜色。

效果:

js实现div色块碰撞

js实现div色块碰撞

实现:

js文件:

function DragObj(_obj) {
 this.obj=_obj;
 this.point={};
 this.moveBool=false;
 this.obj.self=this;
 this.obj.addEventListener("mousedown",this.mouseHandler);
 this.obj.addEventListener("mouseup",this.mouseHandler);
 this.obj.addEventListener("mousemove",this.mouseHandler);
 this.obj.addEventListener("mouseleave",this.mouseHandler);
}
DragObj.prototype={
 mouseHandler:function (e) {
  if(!e){
   e=window.event;
  }
  if(e.type=="mousedown"){
   this.self.moveBool=true;
   this.self.point.x=e.offsetX;
   this.self.point.y=e.offsetY;
  }else if(e.type=="mousemove"){
   if(!this.self.moveBool) return;
   this.self.obj.style.left=(e.clientX-this.self.point.x)+"px"
   this.self.obj.style.top=(e.clientY-this.self.point.y)+"px"
  }else if(e.type=="mouseup" || e.type=="mouseleave"){
   this.self.moveBool=false;
  }
 },
 removeEvent:function () {
 
  this.obj.removeEventListener("mousedown",this.mouseHandler);
  this.obj.removeEventListener("mouseup",this.mouseHandler);
  this.obj.removeEventListener("mousemove",this.mouseHandler);
  this.obj.removeEventListener("mouseleave",this.mouseHandler);
 
  this.obj=null;
  this.point=null;
 }
};
var HitTest=HitTest || (function () {
 return {
  to:function (display0,display1) {
   var rect=display0.getBoundingClientRect();
   var rect1=display1.getBoundingClientRect();
   if(rect.left>=rect1.left && 
rect.left<=rect1.left+rect1.width
 && rect.top>=rect1.top && rect.top<=rect1.top+rect1.height){
    return true;
   }
   if(rect.left+rect.width>=rect1.left && rect.left+rect.width<=rect1.left+rect1.width && rect.top>=rect1.top
 && rect.top<=rect1.top+rect1.height){
    return true;
   }
   if(rect.left>=rect1.left && 
rect.left<=rect1.left+rect1.width 
&& rect.top+rect.height>=rect1.top && 
rect.top+rect.height<=rect1.top+rect1.height){
    return true;
   }
   if(rect.left+rect.width>=rect1.left && rect.left+rect.width<=rect1.left+rect1.width && 
rect.top+rect.height>=rect1.top 
&& rect.top+rect.height<=rect1.top+rect1.height){
    return true;
   }
  }
 }
})();
var LoadImg=LoadImg || (function () {
 return {
  load:function (listSrc,callBack) {
   this.callBack=callBack;
   this.listSrc=listSrc;
   this.num=0;
   this.imgArr=[];
   var img=new Image();
   img.addEventListener("load",this.loadHandler.bind(this));
   img.src=listSrc[0];
  },
  loadHandler:function (e) {
   if(!e){
    e=window.event;
   }
   e.currentTarget.removeEventListener
("load",this.loadHandler.bind(this));
   this.imgArr[this.num]=e.currentTarget;
   if(this.num==this.listSrc.length-1){
    this.callBack(this.imgArr)
    return;
   }
   var img=new Image();
   this.num++;
   img.addEventListener("load",this.loadHandler.bind(this));
   img.src=this.listSrc[this.num];
  }
 }
})();

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  div{
   width: 200px;
   height: 200px;
   position: absolute;
  }
 </style>
 <script src="js/dragObj.js"></script>
</head>
<body>
<div id="div0"></div>
<div id="div1"></div>
<script>
 window.addEventListener("mousedown",mousedownHandler);//生成一个
 function mousedownHandler(e) {
  if(!e){
   e=window.event;
  }
  e.preventDefault();
 }
 var div0=document.getElementById("div0");
 var div1=document.getElementById("div1");
 div0.style.backgroundColor=randomColor();
 div1.style.backgroundColor=randomColor();
 
 randomPosition(div0)
 randomPosition(div1)
 var drag0=new DragObj(div0);
 div0.addEventListener("mousemove",mouseMoveHandler)
 function randomColor() {
  var str="#";
  for(var i=0;i<3;i++){
   var color=Math.floor(Math.random()*256).toString(16);
   if(color.length<2){
    color="0"+color;
   }
   str+=color;
  }
  return str;
 }
 
 function randomPosition(div) {
  div.style.left=Math.random()*(document.documentElement.clientWidth-50)+"px";
  div.style.top=Math.random()*(document.documentElement.clientHeight-50)+"px";
 
 
 }
 
 function mouseMoveHandler(e) {
  if(!e){
   e=window.event;
  }
  if(!drag0.moveBool) return;
 
  if(HitTest.to(div0,div1)){
   randomPosition(div1);
   div1.style.backgroundColor=randomColor();
 
  }
 }
</script>
 
</body>
</html>

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

Javascript 相关文章推荐
JS 对象介绍
Jan 20 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 #Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 #Javascript
使用Karma做vue组件单元测试的实现
Jan 16 #Javascript
js实现div色块拖动录制
Jan 16 #Javascript
微信小程序实现二维码签到考勤系统
Jan 16 #Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 #Javascript
JavaScript实现简单的计算器
Jan 16 #Javascript
You might like
php 缩略图实现函数代码
2011/06/23 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
经营场所使用证明
2015/06/19 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers