Question

我试图制作一个游戏，主角和敌人之间发生碰撞。我不能让碰撞工作，我尝试使用x和y位置然后x和y位置加上主角和对手的宽度和高度

var canvas = document.getElementById('canvas');
var PX = 10;
var PY = 10;
var PW = 10;
var PH = 10;
var P = PX + PY;
var EX1 = 100;
var EY1 = 100;
var EW1 = 10;
var EH1 = 10;
var E1 = EX1 + EY1;

window.addEventListener("keydown", charMove);
window.addEventListener("keyup", charMove);
window.addEventListener("keypress", charMove);

window.onload = function() {
context = canvas.getContext("2d");
canvas.style.background = "black";
var framesPerSecond = 30;
setInterval(function() {
	draw();
	move();
}, 1000/framesPerSecond);
}

function draw() {
	//EX context.fillRect(PosX, PosY, width, height);
	//draws protagonist
	context.beginPath();
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.fillStyle = "blue"
	context.fillRect(PX, PY, PW, PH);
	context.stroke();
	context.closePath();
	//draws antagonist(s)
	context.beginPath();
	context.fillStlyle = "red";
	context.fillRect(EX1, EY1, EW1, EH1);
	context.stroke();
	context.closePath();
}
function move() {
}
function charMove(){
	var x = event.which || event.keyCode;

	if(x == 37){
		PX -= 1;
	}
	if(x == 38){
		PY -= 1;
	}
	if(x == 39){
		PX += 1;	
	}
	if(x == 40){
		PY += 1;
	}
}
//detect collision
setInterval(function() {
	if(PX > EX1 || PX + PW < EX1 + EW1 && PY + PH > EY1 + EH1 || PY + PH < EY1 + EH1){
		window.alert("collision");
	}

}, 1);

<html>
<head>
</head>
<body>
<canvas width="500px" height="500px" id="canvas" class="canvas">
</body>
</html>

Answer 1

你的碰撞公式是错误的。

此问题称为轴对齐边界框碰撞。

如果两个AABB对每个轴的投影发生碰撞，则会发生碰撞。在你的二维情况下，你必须考虑水平和垂直投影。

投影是一维空间的片段。碰撞对于那些很容易：如果一个段的开始或结束在另一个上，它们就会发生碰撞。正式start2 <= start1 <= end2 or start2 <= end1 <= end2

在代码中：

intersects([p.x, p.x + p.width], [e.x, e.x + e.width]) && intersects([p.y, p.y + p.height], [e.y, e.y + e.height])

，其中

function intersects(seg1, seg2) {
    return contains(seg1, seg2[0]) || contains(seg1, seg2[1])
}
function contains(segment, point) {
    return segment[0] <= point && point <= segment[1]
}

检测画布上的碰撞

1 个答案: