如果函数导致飞扬的小鸟随机死亡，则 JavaScript 多重条件出错

如何解决如果函数导致飞扬的小鸟随机死亡，则 JavaScript 多重条件出错

我在 JavaScript 中有以下简单的flappy-bird-clone 游戏，并且在结束游戏的代码中存在逻辑错误（检测碰撞）。

这是我遇到问题的部分：

if (birdY<topPipeBottomY || birdY > (topPipeBottomY + pipeGap) && pipeX < birdSize || birdY > canvasSize){
              birdDY=0;
              biryY=200;
              pipeX=canvasSize;
              score=0;
              alert("boo");
          }

我主要用括号尝试了各种方法，但逻辑不正确。我希望这只鸟只有在与管道相撞或撞到底部时才会死亡。目前，它在通过第二个管道后随机死亡，然后我无法摆脱警报。

我希望指出错误/解决方案代码，并清楚地解释出了什么问题。 a) 死亡的逻辑（为什么它会在通过第二组管道时死亡） b) 在死亡时，“警报”似乎处于无限循环中，并在关闭后重新打开。为什么？（请和解决方案）

完整代码：

 <body style="height: 100vh; background: #111; text-align: center;">
  <canvas id="c" width="400" height="400"></canvas>
  

          
  <script>
      
    
    context = c.getContext("2d");
    
    const bird = new Image();
    bird.src = "bird.png";
    
    var canvasSize = 400;
    var birdSize=30;
    var birdX = 0;
    var birdY =200;
    var birdDY = 0;
    
    var score = 0;
    var bestscore=0;
    var interval = 30; //the speed at which the game is played
      
    //Makes the bird go UP > a simpler way of writing the below is: c.onclick = () => (birdDY = 9) ;
     c.addEventListener("click",function(){ birdDY = 9; 
    }
      );     
      
    //PIPE VARIABLES
    var pipeX=400;
    var pipeWidth=24;
    var pipeGap=200;
    var topPipeBottomY=24;
      
      
      setInterval(() => {
      context.fillStyle = "skyblue";
      context.fillRect(0,canvasSize,canvasSize); // Draw sky
      birdY -= birdDY -= 0.5; // Gravity
      context.drawImage(bird,birdX,birdY,birdSize,birdSize); // Draw bird (multiply the birdSize by a number to adjust size)
      context.fillStyle = "black";
      context.fillText(`Flappy Birds`,170,10); //x and y
      context.fillText(`score: ${score++}`,350,380); // Draw score
          
    //DRAW PIPES    
      context.fillStyle="green";
     
      context.fillStyle = "green";
      context.fillRect(pipeX,pipeWidth,topPipeBottomY); //top pipe     
      context.fillRect(pipeX,topPipeBottomY + pipeGap,canvasSize); // Draw bottom pipe
      
      pipeX -= 8; // Move pipe
     
          if (pipeX < -pipeWidth) {
            pipeX = canvasSize;
            topPipeBottomY = pipeGap * Math.random();
        }
          
       /*   
        (((birdY < topPipeBottomY || birdY > topPipeBottomY + pipeGap) && pipeX < birdSize * (524/374))// Bird hit pipe?
       || birdY > canvasSize) && // Bird falls off screen
      ((birdDY = 0),(birdY = 200),(pipeX = canvasSize),(score = 0),(alert("boo"))); 
      */

      if (birdY<topPipeBottomY || birdY > (topPipeBottomY + pipeGap) && pipeX < birdSize || birdY > canvasSize){
          birdDY=0;
          biryY=200;
          pipeX=canvasSize;
          score=0;
          alert("boo");
      }
      
       
    },interval)
  </script>
</body>