Столкновение работает с верхом, но не с низом

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

Ваше обнаружение столкновения прямоугольника неверно, оно должно быть следующим

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>

Надеюсь, это поможет!

Answer 2

Вам нужно проверить 4 стороны, на данный момент вы проверяете только 3. Подсказка: посмотрите сначала, если внутри функции столкновения, и посмотрите, не пропало ли что-то

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

Если вы не можете решить это, проверьте это https://jsfiddle.net/dn6ar45x/1/