javascript多边形碰撞检测原理就是 循环每个顶点判断是不是在多边形内
const app = new PIXI.Application({ antialias: true });
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics();


// draw polygon
const path = [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);

var xuanzhuan = 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);


function onDragStart(event) {

// store a reference to the data

// the reason for this is because of multitouch

// we want to track the movement of this particular touch

this.data = event.data;

this.alpha = 0.5;

this.dragging = true;
}

function onDragEnd() {

this.alpha = 1;

this.dragging = false;

// set the interaction data to null

this.data = null;
}

var
posPolygon=[];

var dianlist={};

dianlist['x']=600;

dianlist['y']=370;

posPolygon.push(dianlist)

var dianlist={};

dianlist['x']=700;

dianlist['y']=460;

posPolygon.push(dianlist)


var dianlist={};

dianlist['x']=780;

dianlist['y']=420;

posPolygon.push(dianlist)


var dianlist={};

dianlist['x']=730;

dianlist['y']=570;

posPolygon.push(dianlist)

var dianlist={};

dianlist['x']=590;

dianlist['y']=520;

posPolygon.push(dianlist)
function onDragMove() {

if (this.dragging) {

const newPosition = this.data.getLocalPosition(this.parent);

this.x = newPosition.x;

this.y = newPosition.y;


var baoweihe=this.getBounds();

var youxiajiaox=baoweihe.x+baoweihe.width;

var youxiajiaoy=baoweihe.y+baoweihe.height;


var poslist=[];

var pos={};

pos['x']=baoweihe.x;

pos['y']=baoweihe.y;


poslist.push(pos);



var pos={};

pos['x']=youxiajiaox;

pos['y']=baoweihe.y;


poslist.push(pos);


var pos={};

pos['x']=youxiajiaox;

pos['y']=youxiajiaoy;


poslist.push(pos);


var pos={};

pos['x']=baoweihe.x;

pos['y']=youxiajiaoy;


poslist.push(pos);







var ispengzhuang=PolygonInPolygon(poslist, posPolygon,5);

if(ispengzhuang){

alert('碰撞了');

}



}
}

function PolygonInPolygon(posPolygonA, posPolygonB, count){

console.log(posPolygonA);

var count1=posPolygonA.length;

for(var i=0;i
var pos=posPolygonA[i];

console.log(pos);

var ispengzhuang=PointInPolygon( pos, posPolygonB, count);

if(ispengzhuang){

alert('碰撞了')

}

}
}

function PointInPolygon( pos, posPolygonB, count)
{

var cross = 0; //交点个数



for( var i = 0; i < count; i++ )

{

var p1 = posPolygon[i];

var p2 = posPolygon[(i + 1) % count]; //下一个节点


// p1p2这条边与水平线平行

if( p1.y == p2.y )

continue;


// 交点在p1p2的延长线上

if( pos.y < Math.min( p1.y, p2.y ) )

continue;


// 交点在p1p2的延长线上

if( pos.y > Math.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

let x = (pos.y - p1.y) * (p2.x - p1.x) / (p2.y - p1.y) + p1.x

// 只统计单边交点，即点的正向方向

if(x > pos.x)

cross ++;

}


return cross % 2 == 1;
}
const app = new PIXI.Application({ antialias: true });
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics();


// draw polygon
const path = [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);

var xuanzhuan = 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);


function onDragStart(event) {

// store a reference to the data

// the reason for this is because of multitouch

// we want to track the movement of this particular touch

this.data = event.data;

this.alpha = 0.5;

this.dragging = true;
}

function onDragEnd() {

this.alpha = 1;

this.dragging = false;

// set the interaction data to null

this.data = null;
}

var
posPolygon=[];

var dianlist={};

dianlist['x']=600;

dianlist['y']=370;

posPolygon.push(dianlist)

var dianlist={};

dianlist['x']=700;

dianlist['y']=460;

posPolygon.push(dianlist)


var dianlist={};

dianlist['x']=780;

dianlist['y']=420;

posPolygon.push(dianlist)


var dianlist={};

dianlist['x']=730;

dianlist['y']=570;

posPolygon.push(dianlist)

var dianlist={};

dianlist['x']=590;

dianlist['y']=520;

posPolygon.push(dianlist)
function onDragMove() {

if (this.dragging) {

const newPosition = this.data.getLocalPosition(this.parent);

this.x = newPosition.x;

this.y = newPosition.y;


var baoweihe=this.getBounds();

var youxiajiaox=baoweihe.x+baoweihe.width;

var youxiajiaoy=baoweihe.y+baoweihe.height;


var poslist=[];

var pos={};

pos['x']=baoweihe.x;

pos['y']=baoweihe.y;


poslist.push(pos);



var pos={};

pos['x']=youxiajiaox;

pos['y']=baoweihe.y;


poslist.push(pos);


var pos={};

pos['x']=youxiajiaox;

pos['y']=youxiajiaoy;


poslist.push(pos);


var pos={};

pos['x']=baoweihe.x;

pos['y']=youxiajiaoy;


poslist.push(pos);







var ispengzhuang=PolygonInPolygon(poslist, posPolygon,5);

if(ispengzhuang){

alert('碰撞了');

}



}
}

function PolygonInPolygon(posPolygonA, posPolygonB, count){

console.log(posPolygonA);

var count1=posPolygonA.length;

for(var i=0;i
var pos=posPolygonA[i];

console.log(pos);

var ispengzhuang=PointInPolygon( pos, posPolygonB, count);

if(ispengzhuang){

alert('碰撞了')

}

}
}

function PointInPolygon( pos, posPolygonB, count)
{

var cross = 0; //交点个数



for( var i = 0; i < count; i++ )

{

var p1 = posPolygon[i];

var p2 = posPolygon[(i + 1) % count]; //下一个节点


// p1p2这条边与水平线平行

if( p1.y == p2.y )

continue;


// 交点在p1p2的延长线上

if( pos.y < Math.min( p1.y, p2.y ) )

continue;


// 交点在p1p2的延长线上

if( pos.y > Math.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

let x = (pos.y - p1.y) * (p2.x - p1.x) / (p2.y - p1.y) + p1.x

// 只统计单边交点，即点的正向方向

if(x > pos.x)

cross ++;

}


return cross % 2 == 1;
}以上就是javascript实现多边形碰撞检测的详细内容，关于javascript多边形碰撞检测的资料请关注其它相关文章！