如何中断我的循环调用函数，调用eventListener调用函数

Question

I've made a meteor "game". On window load I set my shield:

window.onload = function() {
  document.getElementById("shield").innerHTML = "Max";
  var playStart = document.getElementById("playBtn");
  playStart.addEventListener("click", playGame);
}

On a click of the play button I'm calling a function ( playGame ) to loop (currently 20 odd times). In this loop I call my meteor create function (called setUp ):

function playGame() {
  for (i = 0; i < 21; i++) {
    if (document.getElementById("shield").innerHTML != "End") {
      setUp();
    } else {
      continue;
    }
  }
}

In setup I create the meteor and animate it. I've added an event listener so that on the animation's end (ie the "player" hasn't destroyed the meteor) it calls a function to remove the meteor and change the shield status:

function setup() {
  imgMeteor.addEventListener("animationend", imgEnd);

  // This function (imgEnd is within my setUp function).
  function imgEnd() {
    var child = document.getElementById("imgMeteor");
    imgMeteor.parentNode.removeChild(imgMeteor);

    var currShield = document.getElementById("shield").innerHTML;
    switch (currShield) {
      case "Max":
        currShield = "Med";
        break;
      case "Med":
        currShield = "Min";
        break;
      case "Min":
        currShield = "None";
        break;
      case "None":
        currShield = "End";
        break;
    }

    document.getElementById("shield").innerHTML = currShield;
    if (currShield == "End") {
      return;
    }
  }
}

(I've tried to show just the relevant code). How can I stop the loop running. (Basically I want the game to end once the barrier is "End"?
Any help would be awesome. Entire code below if that helps.

var numText = ["Zero", "One", "Two", "Three", "Four", "Five", "Six",
  "Seven", "Eight", "Nine"
];
var modText = ["0", "x1", "x2", "x3", "x4", "x5", "x6", "x7", "x8", "x9"];

window.onload = function() {
  document.getElementById("shield").innerHTML = "Max";
  var arrNum = 0;
  document.getElementById("spdText").innerHTML = numText[arrNum];
  myNum = arrNum;
  var upSpd = document.getElementById("upBtn");
  upSpd.addEventListener("click", nextyNum);
  var downSpd = document.getElementById("downBtn");
  downSpd.addEventListener("click", prevyNum);
  var playStart = document.getElementById("playBtn");
  playStart.addEventListener("click", playGame);
  var playPause = document.getElementById("pauseBtn");
  playPause.addEventListener("click", pauseGame);
}

function nextyNum() {
  myNum += 1;
  if (myNum <= 9) {
    document.getElementById("spdText").innerHTML = numText[myNum];
    document.getElementById("warpProg").value = [myNum];
    document.getElementById("currMod").innerHTML = modText[myNum]
  } else {
    alert("She cannie take any more cap'n. Speed's at maximum");
  }
  if (myNum > 9) {
    myNum = 9;
  }
  progColourCheck();
}

function prevyNum() {
  myNum -= 1;
  if (myNum >= 0) {
    document.getElementById("spdText").innerHTML = numText[myNum];
    document.getElementById("warpProg").value = [myNum];
    document.getElementById("currMod").innerHTML = modText[myNum];
  } else {
    alert("She's as low as she can go cap'n ");
  }
  if (myNum < 0) {
    myNum = 0;
  }
  progColourCheck();
}

function progColourCheck() {
  var progColours = ["lightgrey", "lightyellow", "yellow", "greenyellow", "lawngreen", "#73e600",
    "#cc9900", "orange", "orangered", "red"
  ];
  document.getElementById("warpProg").style.color = progColours[myNum];
  document.getElementById("currMod").style.backgroundColor = progColours[myNum];
}

function playGame() {
  var tempScore = document.getElementById(currScore);
  tempScore = parseInt(currScore.innerHTML);
  var hiScore = document.getElementById(hScore);
  hiScore = parseInt(hScore.innerHTML);
  if (tempScore > hiScore) {
    hScore.innerHTML = tempScore;
  }
  currScore.innerHTML = 0000;
  if (myNum == 0) {
    alert("The ship's not movin' cap'n");
    return;
  }
  for (i = 0; i < 21; i++) {
    if (document.getElementById("shield").innerHTML != "End") {
      document.getElementById("upBtn").disabled = "true";
      document.getElementById("downBtn").disabled = "true";
      setUp();
    } else {
      continue;
    }
  }
  document.getElementById("titleText").style.visibility = "hidden";
  document.getElementById("playBtn").style.visibility = "hidden";
}

function setUp() {
  var imgMeteor = document.createElement("p");
  var blankNode = document.createTextNode("");
  imgMeteor.appendChild(blankNode);
  document.getElementById("canvas").appendChild(imgMeteor);
  imgMeteor.style.visibility = "hidden";
  imgMeteor.style.backgroundImage = 'url("meteor.gif")';
  imgMeteor.style.width = "56px";
  imgMeteor.style.height = "56px";
  imgMeteor.style.position = "absolute";
  imgMeteor.addEventListener("mouseover", removeElement);
  imgMeteor.style.animationName = "animBlock";
  imgMeteor.style.animationDuration = 10 - myNum + "s";
  imgMeteor.style.animationDelay = Math.floor(Math.random() * (8 - 0 + 1)) + 0 + "s";
  imgMeteor.style.animationTimingFunction = "linear";
  imgMeteor.addEventListener("animationstart", imgVis);

  function imgVis() {
    imgMeteor.style.visibility = "visible";
  }

  imgMeteor.addEventListener("animationend", imgEnd);
  var leftPos = xPosition(0);
  imgMeteor.style.left = leftPos + "%";
  var topPos = yPosition(0);
  imgMeteor.style.top = topPos + "px";

  function removeElement() {
    var cScore = document.getElementById("CurrScore");
    cScore = parseInt(currScore.innerHTML);
    cScore += (1 * myNum);
    currScore.innerHTML = cScore;
    var child = document.getElementById("imgMeteor");
    imgMeteor.parentNode.removeChild(imgMeteor);
    document.getElementById("barrier").style.background = "linear-gradient(darkblue, lightblue)";
  }

  function imgEnd() {
    var child = document.getElementById("imgMeteor");
    imgMeteor.parentNode.removeChild(imgMeteor);
    document.getElementById("barrier").style.background = "linear-gradient(red, orange)";
    var cScore = document.getElementById("CurrScore");
    cScore = parseInt(currScore.innerHTML);
    var negScore = myNum;
    if (negScore > 1) {
      negScore -= 1;
    }
    cScore -= (1 * negScore);
    currScore.innerHTML = cScore;

    var currShield = document.getElementById("shield").innerHTML;
    switch (currShield) {
      case "Max":
        currShield = "Med";
        break;
      case "Med":
        currShield = "Min";
        break;
      case "Min":
        currShield = "None";
        document.getElementById("bubble").style.visibility = "hidden";
        break;
      case "None":
        currShield = "End";
        break;
    }
    document.getElementById("shield").innerHTML = currShield;
    if (currShield == "End") {
      return;
    }
  }
}

function xPosition(lPos) {
  var lPos = Math.floor(Math.random() * (90 - 1 + 1)) + 1;
  return lPos;
}

function yPosition(tPos) {
  var tPos = Math.floor(Math.random() * (80 - 10 + 1)) + 10;
  return tPos;
}

function pauseGame() {
  playBtn.style.visibility = "visible";
  document.getElementById("upBtn").disabled = "false";
  document.getElementById("downBtn").disabled = "false";
  document.getElementById("shield").innerHTML = "Max";
}

Answer 1

Your loop should look like this then:

function playGame() {
    for (i=0; i < 21; i++) {
        if (document.getElementById("shield").innerHTML == "End"){
            break;
       }
       SetUp();
    }
}

You want to break the loop when the condition is met.