如何检测矩形和圆形的碰撞?
1.画一个黄色矩形和一个蓝色圆形,再放置一个旋转的按钮。
2.拖动黄色矩形,当矩形碰到圆形时,圆形会变为绿色。
3.通过旋转按钮,改变矩形旋转角度,再次碰撞,亦可变为绿色。
Laya的实现代码,如下:
export default class HitRect extends Laya.Sprite {
public w:number = 100;
public h:number = 50;
public r:number = 40;
public spRect:Laya.Sprite;
public spCircle:Laya.Sprite;
constructor() {
super();
}
public draw():void{
this.spRect = new Laya.Sprite();
this.spRect.width = this.w;
this.spRect.height = this.h;
this.spRect.graphics.drawRect(0,0,this.w,this.h,0xffff00);
this.addChild(this.spRect);
this.spRect.mouseEnabled = true;
this.spRect.on(Laya.Event.MOUSE_DOWN,this,this.mouseDown);
this.spRect.rotation= 0;
this.spRect.x =0;this.spRect.y=200;
this.spRect.pivotX= this.w/2;
this.spRect.pivotY= this.h/2;
this.spRect.graphics.drawCircle(this.spRect.pivotX,this.spRect.pivotY,6,0xff0000);
this.spCircle = new Laya.Sprite();
this.spCircle.graphics.drawCircle(0,0,this.r,0x00ffff);
this.spCircle.x = 150;
this.spCircle.y = 200;
this.addChild(this.spCircle);
let button = new Laya.Button();
button.width = 80;
button.skin = "comp/button.png";
button.label = "旋转1";
this.addChild(button);
button.on(Laya.Event.MOUSE_DOWN, this, this.onButtonClick);
let button5 = new Laya.Button();
button5.skin = "comp/button.png";
button5.x = 100;
button5.label = "旋转5";
this.addChild(button5);
button5.on(Laya.Event.MOUSE_DOWN, this, this.onButtonClick5);
}
private onButtonClick(e: Laya.Event) {
this.spRect.rotation+=1;
}
private onButtonClick5(e: Laya.Event) {
this.spRect.rotation+=5;
}
private mouseDown():void{
this.spRect.on(Laya.Event.MOUSE_MOVE,this,this.mouseMove);
this.spRect.stage.on(Laya.Event.MOUSE_UP,this,this.mouseUp);
}
private mouseUp():void{
this.spRect.off(Laya.Event.MOUSE_MOVE,this,this.mouseMove);
this.spRect.stage.off(Laya.Event.MOUSE_UP,this,this.mouseUp);
}
private mouseMove(evt:Laya.Event):void{
this.spRect.x = evt.stageX;
this.spRect.y = evt.stageY;
let pos:any = this.getNewPos(this.spRect.x,this.spRect.y,this.spCircle.x,this.spCircle.y,this.spRect.rotation);
let boool = this.ComputeCollision(this.w,this.h, this.r, pos.x, pos.y);
if(boool){
this.spCircle.graphics.drawCircle(0,0,this.r,0x00ff00);
}else{
this.spCircle.graphics.drawCircle(0,0,this.r,0x00ffff);
}
}
/**
* 计算碰撞
* @param w 宽度
* @param h 高度
* @param rx 圆形x
* @param ry 圆形y
*/
private ComputeCollision(w, h, r, rx, ry):boolean{
var dx = Math.min(rx, w * 0.5);
var dx1 = Math.max(dx, -w * 0.5);
var dy = Math.min(ry, h * 0.5);
var dy1 = Math.max(dy, -h * 0.5);
return (dx1 - rx) * (dx1 - rx) + (dy1 - ry) * (dy1 - ry) <= r * r;
}
private getNewPos(x1,y1,x2,y2,rotation):any{
var pos:any = {};
//距离
var distance = Math.pow((Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2)), 0.5);
//角度
var angle:number = Math.atan((y1-y2)/(x1-x2))*180/Math.PI;
//兼容矩形的旋转角度
var newAngle = angle - rotation;
pos.x = Math.cos(newAngle/180*Math.PI) * distance;
pos.y = Math.sin(newAngle/180*Math.PI) * distance;
return pos;
}
}