Tug Of War Checking

[Naksh-Rathore]

Body

I am coding a Tug of War game in JS and my problem is that the conditionals for checking if the rope has crossed the line does not work. Here is my code:

function move(pixels, line) {
yOffset -= pixels;
rope.style.transform = translateY(${yOffset}px);

const ropeRect = rope.getBoundingClientRect();
const lineRect = line.getBoundingClientRect();

if (pixels > 0 && ropeRect.bottom <= lineRect.top) {
    yOffset = 0;
    rope.style.transform = `translateY(${yOffset}px)`; 

    redScore++;
    scoreDisplay.textContent = `${redScore} - ${blueScore}`;

    if (redScore >= 3) {
        playing = false;
        
        yOffset = 0;
        rope.style.transform = `translateY(${yOffset}px)`; 

        window.alert("Red Won!");
    }
} 

else if (pixels < 0 && ropeRect.top >= lineRect.bottom) {
    yOffset = 0;
    rope.style.transform = `translateY(${yOffset}px)`; 

    blueScore++;
    scoreDisplay.textContent = `${redScore} - ${blueScore}`;

    if (blueScore >= 3) {
        playing = false;
        
        yOffset = 0;
        rope.style.transform = `translateY(${yOffset}px)`; 

        window.alert("Blue Won!");
    }
}

}

Guidelines

• I have read and understood this category's guidelines before making this post.

[denpiligrim]

Hi, I'm currently seeing a technical error on line 3 (style element values are of string type). To fully test the code, you need the full code including html document. Fixed function:

function move(pixels, line) {
  yOffset -= pixels;
  rope.style.transform = `translateY(${yOffset}px)`;

  const ropeRect = rope.getBoundingClientRect();
  const lineRect = line.getBoundingClientRect();

  if (pixels > 0 && ropeRect.bottom <= lineRect.top) {
    yOffset = 0;
    rope.style.transform = `translateY(${yOffset}px)`;

    redScore++;
    scoreDisplay.textContent = `${redScore} - ${blueScore}`;

    if (redScore >= 3) {
      playing = false;

      yOffset = 0;
      rope.style.transform = `translateY(${yOffset}px)`;

      window.alert("Red Won!");
    }
  } else if (pixels < 0 && ropeRect.top >= lineRect.bottom) {
    yOffset = 0;
    rope.style.transform = `translateY(${yOffset}px)`;

    blueScore++;
    scoreDisplay.textContent = `${redScore} - ${blueScore}`;

    if (blueScore >= 3) {
      playing = false;

      yOffset = 0;
      rope.style.transform = `translateY(${yOffset}px)`;

      window.alert("Blue Won!");
    }
  }
}

[Naksh-Rathore]

Thanks you for answering but I figured it out that I used the wrong ID. Appreciate it for trying to help!