本文实例为大家分享了js实现div色块碰撞的具体代码,供大家参考,具体内容如下
<强>描述:
生成两个div色块,一个可以拖动,一个不可以,用拖动的去撞击不能动的,会将这个色块随机撞到一个位置,改变颜色。
<>强效果:
<>强实现:
js文件:
函数DragObj (_obj) {
this.obj=_obj;
this.point={};
this.moveBool=false;
this.obj.self=;
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:函数(e) {
如果(e) {
e=window.event;
}
如果(e.type==癿ousedown”) {
this.self.moveBool=true;
this.self.point.x=e.offsetX;
this.self.point.y=e.offsetY;
}else if (e.type==癿ousemove”) {
如果(! this.self.moveBool)返回;
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。类型==" mouseup " | | e.type==癿ouseleave”) {
this.self.moveBool=false;
}
},
removeEvent:函数(){
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=零;
this.point=零;
}
};
var HitTest=HitTest | |(函数(){
返回{
:函数(display0 display1) {
var矩形=display0.getBoundingClientRect ();
var通过rect1=display1.getBoundingClientRect ();
如果(rect.left>=通过rect1。离开,,
rect.left<=rect1.left + rect1.width
,,rect.top>=通过rect1。前,,rect.top<=rect1.top + rect1.height) {
返回true;
}
如果(rect.left + rect.width>=通过rect1。离开,,rect.left + rect.width<=rect1.left +通过rect1。宽度,,rect.top>=rect1.top
,,rect.top<=rect1.top + rect1.height) {
返回true;
}
如果(rect.left>=通过rect1。离开,,
rect.left<=rect1.left + rect1.width
,,rect.top + rect.height>=通过rect1。前,,
rect.top + rect.height<=rect1.top + rect1.height) {
返回true;
}
如果(rect.left + rect.width>=通过rect1。离开,,rect.left + rect.width<=rect1.left +通过rect1。宽度,,
rect.top + rect.height>=rect1.top
,,rect.top + rect.height<=rect1.top + rect1.height) {
返回true;
}
}
}
})();
var LoadImg=LoadImg | |(函数(){
返回{
负载:功能(listSrc,回调){
this.callBack=回调;
this.listSrc=https://www.yisu.com/zixun/listSrc;
this.num=0;
this.imgArr=[];
var img=新形象();
img.addEventListener(“负载”,this.loadHandler.bind(这));
img.src=https://www.yisu.com/zixun/listSrc [0];
},
loadHandler:函数(e) {
如果(e) {
e=window.event;
}
e.currentTarget.removeEventListener
(“负载”,this.loadHandler.bind(这));
this.imgArr [this.num]=e.currentTarget;
如果(this.num==this.listSrc.length-1) {
this.callBack (this.imgArr)
返回;
}
var img=新形象();
this.num + +;
img.addEventListener(“负载”,this.loadHandler.bind(这));
img.src=https://www.yisu.com/zixun/this.listSrc [this.num];
}
}
})();
html:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; style>
div {
宽度:200 px;
身高:200 px;
位置:绝对的;
}
& lt;/style>
& lt;脚本src=" https://www.yisu.com/zixun/js/dragObj.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=" div0 "祝辞& lt;/div>
& lt; div id=" div1 "祝辞& lt;/div>
& lt; script>
window.addEventListener (“mousedown”, mousedownHandler);//生成一个
函数mousedownHandler (e) {
如果(e) {
e=window.event;
}
e.preventDefault ();
}
var div0=. getelementbyid (“div0”);
var div1=. getelementbyid (“div1”);
div0.style.backgroundColor=randomColor ();
div1.style.backgroundColor=randomColor ();
randomPosition (div0)
randomPosition (div1)
var drag0=new DragObj (div0);
mouseMoveHandler div0.addEventListener (“mousemove”)
函数randomColor () {
var str=" # ";
(var i=0; i
