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

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/