碰撞适用于顶部，但不适用于底部

Question

我的游戏测试环境中有一个矩形，我试图让它与它发生冲突。碰撞适用于顶部，因为我制作了正确的代码。但是，我很难让它与矩形的底部发生碰撞。

我已经尝试更改 x 和 y 并将它们换掉。我也尝试更改比较功能。我想做的是完全切换它们，但我认为这也行不通。

        var canvas = document.getElementById("gametester");
        var ctx = canvas.getContext("2d");
        
        var canvasWidth = canvas.width;
        var canvasHeight = canvas.height;
	   rectWidth = 100;
       rectHeight = 50;
       var redX = canvasWidth / 2 - rectWidth / 2; 
       var redY = canvasHeight / 2 - rectHeight / 2; 
       var redDx = 0;
       var redDy = 0;
       var speed = 2;
      
       rectWidth = 100;
       rectHeight = 50;
       var blueX = canvasWidth / 2 - rectWidth / 2; 
       var blueY = canvasHeight / 2 - rectHeight / 2; 
       var blueDx = 0;
       var blueDy = 0;
       var speed = 2;
       var rectTwoColour = "blue";
        
        var dx = 0;
        var dy = 0;
        var speed = 2;
        function rectangle(x, y, w, h, c) {
            ctx.beginPath();
            ctx.rect(x, y, w, h);
            ctx.fillStyle = c;
            ctx.fill();
            ctx.closePath();
        }
		
		
		var rightPressed = false;
		var leftPressed = false;
		var upPressed = false;
		var downPressed = false;
		
		
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);
		
		
		function keyDownHandler(e) {
					if (e.keyCode == 39) {
						rightPressed = true;
					} else if (e.keyCode == 37) {
						leftPressed = true;
					} else if (e.keyCode == 38) {
						upPressed = true;
					} else if (e.keyCode == 40) {
						downPressed = true;
					}
				}
		
				function keyUpHandler(e) {
					if (e.keyCode == 39) {
						rightPressed = false;
					} else if (e.keyCode == 37) {
						leftPressed = false;
					} else if (e.keyCode == 38) {
						upPressed = false;
					} else if (e.keyCode == 40) {
						downPressed = false;
					}
				}
			function collision(){
       
           var collide = false;
          
           if (blueY>=redY && blueY <= redY + rectHeight){
         
           if (redX + rectWidth >= blueX && redX + rectWidth <= blueX + rectWidth){
                   collide = true;	   
             blueX = Math.floor(Math.random() * (canvasWidth - rectWidth));
             blueY = Math.floor(Math.random() * (canvasHeight - rectWidth));
               }
               if (redX>=blueX && redX <= blueX + rectWidth){
                   collide = true;
			 blueX = Math.floor(Math.random() * (canvasWidth - rectWidth));
             blueY = Math.floor(Math.random() * (canvasHeight - rectWidth));
               }
           }
		   
		
		   
           
           
           return collide
       }

        function draw() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
            
			rectangle(redX, redY, rectWidth, rectHeight, 'red')
			rectangle(blueX, blueY, rectWidth, rectHeight, rectTwoColour)
			if (rightPressed==true) {
		    redDx = speed;
	        } else if (leftPressed==true) {
		    redDx = -speed;
	        } else if (upPressed==true) {
		    redDy = -speed;
	        } else if (downPressed==true) {
		    redDy = speed
	        }
			if (rightPressed==false && leftPressed==false && upPressed==false && downPressed == false){
            redDx = 0;
            redDy = 0;
            }
			redX = redX + redDx;
            redY = redY + redDy; 
			if (redX > canvasWidth - rectWidth){
            redX = canvasWidth - rectWidth;
            }
			if (redY > canvasHeight - rectHeight){
            redY = canvasHeight - rectHeight;
            }
			if (redY<0){
            redY = 0
            }
			if (redX<0){
            redX = 0
            }
			
			
           collided = collision();
          
           
           if (collided == true){
               rectTwoColour = "purple";
             } else {
               rectTwoColour = "blue";
            }
			
          
            }
        setInterval(draw, 14);

   canvas {
            border-width: 6.2px;
            border-color: #FF0000;
        }

    <canvas id="gametester" width="560" height="300"></canvas>

Answer 1

您需要

检查 4 个面，目前您只检查 3 个。提示：查看第一个if内部碰撞功能，看看它是否缺少某些内容

if (
   blueY >= redY && blueY <= redY + rectHeight || // north side
   ... // south side
) 

如果无法解决，请检查此 https://jsfiddle.net/dn6ar45x/1/

Answer 2

您的矩形碰撞检测不正确，应如下所示

function collision() {
  var collide = false;
  if (blueX < redX + rectWidth &&
    blueX + rectWidth > redX &&
    blueY < redY + rectHeight &&
    blueY + rectHeight > redY) {
    // collision detected!
    collide = true;
    blueX = Math.floor(Math.random() * (canvasWidth - rectWidth));
    blueY = Math.floor(Math.random() * (canvasHeight - rectWidth));
  }
  return collide
}

请参阅 2D 矩形碰撞检测

var canvas = document.getElementById("gametester");
var ctx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
rectWidth = 100;
rectHeight = 50;
var redX = canvasWidth / 2 - rectWidth / 2;
var redY = canvasHeight / 2 - rectHeight / 2;
var redDx = 0;
var redDy = 0;
var speed = 2;
rectWidth = 100;
rectHeight = 50;
var blueX = canvasWidth / 2 - rectWidth / 2;
var blueY = canvasHeight / 2 - rectHeight / 2;
var blueDx = 0;
var blueDy = 0;
var speed = 2;
var rectTwoColour = "blue";
var dx = 0;
var dy = 0;
var speed = 2;
function rectangle(x, y, w, h, c) {
  ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fillStyle = c;
  ctx.fill();
  ctx.closePath();
}
var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = true;
  } else if (e.keyCode == 37) {
    leftPressed = true;
  } else if (e.keyCode == 38) {
    upPressed = true;
  } else if (e.keyCode == 40) {
    downPressed = true;
  }
}
function keyUpHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = false;
  } else if (e.keyCode == 37) {
    leftPressed = false;
  } else if (e.keyCode == 38) {
    upPressed = false;
  } else if (e.keyCode == 40) {
    downPressed = false;
  }
}
function collision() {
  var collide = false;
  if (blueX < redX + rectWidth &&
    blueX + rectWidth > redX &&
    blueY < redY + rectHeight &&
    blueY + rectHeight > redY) {
    // collision detected!
    collide = true;
    blueX = Math.floor(Math.random() * (canvasWidth - rectWidth));
    blueY = Math.floor(Math.random() * (canvasHeight - rectWidth));
  }
  return collide
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  rectangle(redX, redY, rectWidth, rectHeight, 'red')
  rectangle(blueX, blueY, rectWidth, rectHeight, rectTwoColour)
  if (rightPressed == true) {
    redDx = speed;
  } else if (leftPressed == true) {
    redDx = -speed;
  } else if (upPressed == true) {
    redDy = -speed;
  } else if (downPressed == true) {
    redDy = speed
  }
  if (rightPressed == false && leftPressed == false && upPressed == false && downPressed == false) {
    redDx = 0;
    redDy = 0;
  }
  redX = redX + redDx;
  redY = redY + redDy;
  if (redX > canvasWidth - rectWidth) {
    redX = canvasWidth - rectWidth;
  }
  if (redY > canvasHeight - rectHeight) {
    redY = canvasHeight - rectHeight;
  }
  if (redY < 0) {
    redY = 0
  }
  if (redX < 0) {
    redX = 0
  }
  collided = collision();
  if (collided == true) {
    rectTwoColour = "purple";
  } else {
    rectTwoColour = "blue";
  }

}
setInterval(draw, 14);

canvas {
  border-width: 6.2px;
  border-color: #FF0000;
}

<canvas id="gametester" width="560" height="300"></canvas>

希望这有帮助！