Question

我在画布上旋转了我的方块，我想检测它们之间的碰撞，虽然通常的方法显然不起作用。应该怎么做？

正如你可能看到的那样，如果它们碰撞其中一个盒子会变成红色，但如果只有这些提示发生碰撞则没有任何反应。

var canvas,ctx,box1,box2,mouseX,mouseY,intervalo;
function load(){
	canvas = document.getElementById('box');
	ctx = canvas.getContext('2d');
	
	function box(x,y,width,height,color,angle){
		this.x = x;
		this.y = y;
		this.width = width;
		this.height = height;
		this.color = color;
		this.angle = angle;
		this.rotateX = x;
		this.rotateY = y;
		
		this.drawn = function(){
			
			var rad = this.angle*(Math.PI/180);//Here you should turn degrees into radians by -> *(Math.PI/180);
			ctx.translate(this.x + (this.width / 2), this.y + (this.height / 2))//Change screen cordinates to center of object
			ctx.rotate(rad);//Rotate canvas
			//What you want to rotate:
			this.rotateX = (this.width / 2) * (-1);
			this.rotateY = (this.height / 2) * (-1);
			ctx.fillStyle = this.color;
			ctx.fillRect(this.rotateX,this.rotateY,this.width,this.height);
			//end
			ctx.rotate(rad * (-1));//Unrotate canvas
			ctx.translate((this.x + (this.width / 2)) * (-1), (this.y + (this.height / 2)) * (-1));//Change screen cordinates back to normal
		}
	}
	box1 = new box(500,250,50,50,"white",45);
	box2 = new box(250,250,50,50,"white",45);
	
	document.onmousemove = mouseMove;
	function mouseMove(event) {
		event = event || canvas.event
		mouseX = event.pageX;
		mouseY = event.pageY;
		mouseX = mouseX - 11;
		mouseY = mouseY - 13;
		box2.x = mouseX;
		box2.y = mouseY;
	}
	intervalo = setInterval(animation, 1000/60);
}
function animation(){
	ctx.fillStyle = "black";
	ctx.fillRect(0,0,canvas.width,canvas.height);
	for (var i = 0;i < 2; i++){
		//Colision detection that doesn't work:
		if (!(box1.x+box1.width < box2.x) &&
		!(box2.x+box2.width < box1.x) &&
		!(box1.y+box1.height < box2.y) &&
		!(box2.y+box2.height < box1.y)) {
			console.log("colision");
			box2.color = "red";
		} else {
			box2.color = "white";
		}	
		
		box1.drawn();
		box2.drawn();
	}
}

#box {
	border: 1px solid black;
	border-color: white;
	
}
#button {
	border: none;
	background-color: gray;
	width: 70;
	height: 50;
}
canvas {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
	background-color: black;
	color: white;
	font-family: courier new;
}

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/estilo.css">
		<script src="js/main.js"></script>
	</head>
	<body onload="load()">
		<canvas id="box" width="1330" height="500"></canvas>
		<button onclick="play()" id="button">Play</button>
	</body>
</html>

轮换后的碰撞检测

0 个答案: