Javascript 碰撞作用于顶部，但不作用于底部

我的游戏测试环境中有一个长方形，我试图使它与之碰撞。由于我编写了正确的代码，因此冲突与顶部有效。但是，我在尝试使它与矩形的底部碰撞时遇到了很多困难

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

var canvas=document.getElementById（“gametester”）；
var ctx=canvas.getContext（“2d”）；
var canvasWidth=canvas.width；
var canvasHeight=canvas.height；
矩形宽度=100；
高度=50；
var redX=画布宽度/2-矩形宽度/2；
var redY=画布高度/2-矩形高度/2；
var-redDx=0；
var-redDy=0；
无功转速=2；
矩形宽度=100；
高度=50；
var blueX=画布宽度/2-矩形宽度/2；
var blueY=画布高度/2-矩形高度/2；
var-blueDx=0；
var-blueDy=0；
无功转速=2；
var recttowolour=“蓝色”；
var-dx=0；
var-dy=0；
无功转速=2；
函数矩形（x、y、w、h、c）{
ctx.beginPath（）；
ctx.rect（x，y，w，h）；
ctx.fillStyle=c；
ctx.fill（）；
ctx.closePath（）；
}
var-rightspressed=false；
var leftPressed=false；
var upPressed=假；
var-downPressed=false；
文档。addEventListener（“keydown”，keyDownHandler，false）；
文件。addEventListener（“keyup”，keyUpHandler，false）；
函数keyDownHandler（e）{
如果（e.keyCode==39）{
rightspressed=true；
}否则如果（e.keyCode==37）{
leftPressed=true；
}否则如果（e.keyCode==38）{
upPressed=true；
}否则如果（e.keyCode==40）{
downPressed=true；
}
}
函数keyUpHandler（e）{
如果（e.keyCode==39）{
右压=假；
}否则如果（e.keyCode==37）{
leftPressed=false；
}否则如果（e.keyCode==38）{
upPressed=false；
}否则如果（e.keyCode==40）{
按下=假；
}
}
函数冲突（）{
var collide=false；
如果（blueY>=redY&&blueY=blueX&&redX+rectWidth=blueX&&redX画布宽度-rectWidth）{
redX=画布宽度-矩形宽度；
}
如果（红色>画布高度-矩形高度）{
redY=画布高度-矩形高度；
}
如果（redY您需要检查4个面，那么目前您只检查3个面。
提示：查看第一个if-inside碰撞函数，看看它是否缺少一些内容

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

if(
蓝色>=redY&&blueY您需要检查4个面，目前只检查3个面。
提示：查看第一个if-inside碰撞函数，看看它是否缺少一些内容

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

if(
blueY>=redY&&blueY您的矩形碰撞检测不正确，应如下所示

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 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
}

噢，谢谢。起初没有注意到这一点，但现在我明白了。希望它解决了你的问题。如果它解决了，请将答案标记为已解决。噢，谢谢。起初没有注意到，但现在我明白了。希望它解决了你的问题。如果它解决了，请将答案标记为已解决