Question

我做了一个流星“游戏”。在窗口加载时，我设置了防护罩：

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

单击播放按钮后，我将调用一个函数（playGame）进行循环（当前20次）。在此循环中，我调用了流星创建函数（称为setUp）：

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

在设置中，我创建流星并为其设置动画。我添加了一个事件侦听器，以便在动画结束时（即“玩家”没有破坏流星），它调用一个函数来删除流星并更改屏蔽状态：

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

（我试图仅显示相关代码）。如何停止循环运行。（基本上，我希望游戏在障碍变为“结束”后结束吗？
任何帮助都是极好的。如果有帮助，请在下面输入整个代码。

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

您的循环应如下所示：

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

您希望在满足条件时break循环。

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

1 个答案: