javascript实现多边形碰撞检测
javascript多边形碰撞检测
原理就是循环每个顶点判断是不是在多边形内
constapp=newPIXI.Application({antialias:true});
document.body.appendChild(app.view);
constgraphics=newPIXI.Graphics();
//drawpolygon
constpath=[600,370,700,460,780,420,730,570,590,520];
graphics.lineStyle(0);
graphics.beginFill(0x3500FA,1);
graphics.drawPolygon(path);
graphics.endFill();
app.stage.addChild(graphics);
varxuanzhuan=PIXI.Sprite.from('/moban/images/share.jpg');
xuanzhuan.width=120;
xuanzhuan.height=120;
xuanzhuan.x=13;
xuanzhuan.y=33;
app.stage.addChild(xuanzhuan);
xuanzhuan.interactive=true;
xuanzhuan.buttonMode=true;
xuanzhuan
.on('pointerdown',onDragStart)
.on('pointerup',onDragEnd)
.on('pointerupoutside',onDragEnd)
.on('pointermove',onDragMove);
functiononDragStart(event){
//storeareferencetothedata
//thereasonforthisisbecauseofmultitouch
//wewanttotrackthemovementofthisparticulartouch
this.data=event.data;
this.alpha=0.5;
this.dragging=true;
}
functiononDragEnd(){
this.alpha=1;
this.dragging=false;
//settheinteractiondatatonull
this.data=null;
}
varposPolygon=[];
vardianlist={};
dianlist['x']=600;
dianlist['y']=370;
posPolygon.push(dianlist)
vardianlist={};
dianlist['x']=700;
dianlist['y']=460;
posPolygon.push(dianlist)
vardianlist={};
dianlist['x']=780;
dianlist['y']=420;
posPolygon.push(dianlist)
vardianlist={};
dianlist['x']=730;
dianlist['y']=570;
posPolygon.push(dianlist)
vardianlist={};
dianlist['x']=590;
dianlist['y']=520;
posPolygon.push(dianlist)
functiononDragMove(){
if(this.dragging){
constnewPosition=this.data.getLocalPosition(this.parent);
this.x=newPosition.x;
this.y=newPosition.y;
varbaoweihe=this.getBounds();
varyouxiajiaox=baoweihe.x+baoweihe.width;
varyouxiajiaoy=baoweihe.y+baoweihe.height;
varposlist=[];
varpos={};
pos['x']=baoweihe.x;
pos['y']=baoweihe.y;
poslist.push(pos);
varpos={};
pos['x']=youxiajiaox;
pos['y']=baoweihe.y;
poslist.push(pos);
varpos={};
pos['x']=youxiajiaox;
pos['y']=youxiajiaoy;
poslist.push(pos);
varpos={};
pos['x']=baoweihe.x;
pos['y']=youxiajiaoy;
poslist.push(pos);
varispengzhuang=PolygonInPolygon(poslist,posPolygon,5);
if(ispengzhuang){
alert('碰撞了');
}
}
}
functionPolygonInPolygon(posPolygonA,posPolygonB,count){
console.log(posPolygonA);
varcount1=posPolygonA.length;
for(vari=0;iMath.max(p1.y,p2.y))
continue;
//计算交点X左边：(p2.y-p1.y)/(p2.x-p1.x)=(y-p1.y)/(x-p1.x)
//直线K值相等，交点y=pos.y
letx=(pos.y-p1.y)*(p2.x-p1.x)/(p2.y-p1.y)+p1.x
//只统计单边交点，即点的正向方向
if(x>pos.x)
cross++;
}
returncross%2==1;
}
以上就是javascript实现多边形碰撞检测的详细内容，更多关于javascript多边形碰撞检测的资料请关注毛票票其它相关文章！