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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
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者的疑难问答(2)
2006/10/09 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP 文件系统详解
2012/09/13 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
php使用google地图应用实例
2014/12/31 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
Python中的匿名函数使用简介
2015/04/27 Python
Python进程间通信用法实例
2015/06/04 Python
Python3几个常见问题的处理方法
2019/02/26 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
企业治理工作自我评价
2013/09/26 职场文书
矫正人员思想汇报
2014/01/08 职场文书
校运会入场式解说词
2014/02/10 职场文书
付款委托书范本
2014/04/04 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android