Не работает коллизия с границей, что делать?

var score = 0;
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");

      var b1 = new Image();
      var b2 = new Image();
      var b3 = new Image();
      var b4 = new Image();
      var b5 = new Image();

      b1.src = "img/banana.png";
      b2.src = "img/banana.png";
      b3.src = "img/banana.png";
      b4.src = "img/banana.png";
      b5.src = "img/banana.png";

      xb1 = Math.random()* 700;
      yb1 = Math.random()* 300;
      xb2 = Math.random()* 700;
      yb2 = Math.random()* 300;
      xb3 = Math.random()* 700;
      yb3 = Math.random()* 300;
      xb4 = Math.random()* 700;
      yb4 = Math.random()* 300;
      xb5 = Math.random()* 700;
      yb5 = Math.random()* 300;

      b1.onload = function() {
        ctx.drawImage(b1, xb1, yb1);
      }
      b2.onload = function() {
        ctx.drawImage(b2, xb2, yb2);
      }
      b3.onload = function() {
        ctx.drawImage(b3, xb3, yb3);
      }
      b4.onload = function() {
        ctx.drawImage(b4, xb4, yb4);
      }
      b5.onload = function() {
        ctx.drawImage(b5, xb5, yb5);
      }

      function logic() {
        if(yb1 == 550) {
          yb1 = Math.random() * 300;
          score -= 5;
        }
        if(yb2 == 550) {
          yb2 = Math.random() * 300;
          score -= 5;
        }
        if(yb3 == 550) {
          yb3 = Math.random() * 300;
          score -= 5;
        }
        if(yb4 == 550) {
          yb4 = Math.random() * 300;
          score -= 5;
        }
        if(yb5 == 550) {
          yb5 = Math.random() * 300;
          score -= 5;
        }
      }

      function update() {
        yb1 += Math.random() * 5;
        yb2 += Math.random() * 5;
        yb3 += Math.random() * 5;
        yb4 += Math.random() * 5;
        yb5 += Math.random() * 5;
      }

      function draw() {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(b1, xb1, yb1);
        ctx.drawImage(b2, xb2, yb2);
        ctx.drawImage(b3, xb3, yb3);
        ctx.drawImage(b4, xb4, yb4);
        ctx.drawImage(b5, xb5, yb5);
      }

      setInterval(() => {
        logic();
        update();
        draw();
      }, 1000/40);