js实现div色块碰撞
程序员文章站
2022-06-22 14:08:28
本文实例为大家分享了js实现div色块碰撞的具体代码,供大家参考,具体内容如下
描述:
生成两个div色块,一个可以拖动,一个不可以,用拖动的去撞击不能动的,会将这个色块随机撞到一...
本文实例为大家分享了js实现div色块碰撞的具体代码,供大家参考,具体内容如下
描述:
生成两个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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 基于vue.js实现购物车