PIXI_碰撞检测

理论

【碰撞判断】
	1、根据元素的特点划定假想圆大小，将元素的锚点设置为中心作为假想圆的圆心
	元素宽度的一半作为假想圆的半径
	设置轴心点.anchor.set(0.5,0.5)
	2、计算碰撞距离：碰撞距离==两个元素假想圆半径之和
	3、计算两个元素的X轴距离，Y轴距离
	x轴距离(元素1.x - 元素2.x)
	var xl = zd.x - enemy.x;
	y轴距离(元素1.y - 元素2.y)
	4、将x轴距离与y轴距离作为直角三角形的两条边，利用勾股定理计算斜边长度。
	xl*xl+yl*yl = 间距的平方
	5、碰撞判断：如果两个元素的距离<=碰撞距离，视为发生碰撞

代码

		//设置舞台
		var app = new PIXI.Application(500, 700);
		document.body.appendChild(app.view);
		//添加敌机
		var enemy = new PIXI.Sprite.fromImage('../img/enemy.png');
		enemy.x = 150;
		enemy.y = 100;
		enemy.anchor.set(0.5, 0.5)
		app.stage.addChild(enemy)

		//子弹
		var zd = new PIXI.Sprite.fromImage('../img/bullet_1.png')
		zd.x = 170;
		zd.y = 450;
		zd.anchor.set(0.5, 0.5)
		app.stage.addChild(zd);

		//自定义帧频函数
		function animate() {
			zd.y -= 3;

			//【碰撞判断】
			//1、根据元素的特点划定假想圆大小，将元素的锚点设置为中心作为假想圆的圆心
			//元素宽度的一半作为假想圆的半径
			//设置轴心点.anchor.set(0.5,0.5)
			// enemy 宽度：104，假想圆半径：52
			// zd    宽度：50， 假想圆半径25

			//2、计算碰撞距离：碰撞距离==两个元素假想圆半径之和
			var sum = 52 + 25;

			//3、计算两个元素的X轴距离，Y轴距离
			//x轴距离(元素1.x - 元素2.x)
			var xl = zd.x - enemy.x;
			//y轴距离(元素1.y - 元素2.y)
			var yl = zd.y - enemy.y;

			//4、将x轴距离与y轴距离作为直角三角形的两条边，利用勾股定理计算斜边长度。
			//xl*xl+yl*yl = 间距的平方
			
			//5、碰撞判断：如果两个元素的距离<=碰撞距离，视为发生碰撞
			// if(两个元素的间距平方<=碰撞距离平方){}
			if(xl*xl+yl*yl <=sum*sum){
				//碰撞后执行的代码
				//将敌机从应用窗口移除
				app.stage.removeChild(enemy);
				app.stage.removeChild(zd);
			}
			//获取平方根：Math.sqrt(数值);


		}
		
		app.ticker.add(animate);

效果图

距离可能没有计算好，所以看起来没有碰到就已经消失了。