Question

这是一个分数一直在增加，但什么都没有显示的游戏，因此，我想添加一条警告消息，显示您在获得5分后赢了。我该怎么办？

cycleColor = function() {
    ++curColor;
    if (curColor == colors.length) {
      curColor = 0;
    }
    jello.className = "jello " + colors[curColor];
  },
  checkColorMatch = function() {
    if (curColor == nextMatchColor) {
      ++streak;
      dur -= 10;
      if (dur < minDur) {
        dur = minDur;

      }
      streakCounter.innerHTML = streak;
    } else {
      streak = 0;
      dur = 2000;
      streakCounter.innerHTML = "";
    }

    prevMatchColor = nextMatchColor;
    nextMatchColor = chooseColor();

    boxes[0].className = "box " + colors[prevMatchColor];
    boxes[1].className = "box " + colors[nextMatchColor];

    rerun();
    setTimeout(checkColorMatch, dur);
  };

main.classList.add("run");
jello.classList.add(colors[curColor]);
boxes[0].classList.add(colors[prevMatchColor]);
boxes[1].classList.add(colors[nextMatchColor]);

for (b in boxes) {
  if (b < boxes.length) {
    boxes[b].classList.add(colors[chooseColor()]);
  }
}

Answer 1

如果您仅需要一条简单的弹出消息，则只需使用alert()方法。

alert("You won!");

编辑：
将++streak;替换为以下内容：

    if(++streak === 5){
        alert("You won!");
        //whatever other things you need to do when the player wins
        return;
    }

Answer 2

好吧，我会将此功能更改为：

 checkColorMatch = function() {
if (curColor == nextMatchColor) {
  ++streak;
  dur -= 10;
  if (dur < minDur) {
    dur = minDur;

  }
  streakCounter.innerHTML = streak;
     if (streak=="5"){
   alert("You won!");
    }

} else {
  streak = 0;
  dur = 2000;
  streakCounter.innerHTML = "";
}

prevMatchColor = nextMatchColor;
nextMatchColor = chooseColor();

boxes[0].className = "box " + colors[prevMatchColor];
boxes[1].className = "box " + colors[nextMatchColor];

rerun();
setTimeout(checkColorMatch, dur);
  };

现在，如果您需要它每5点提醒一次，那么就需要每5点循环一个计数器。像这样：

   checkColorMatch = function() {
if (curColor == nextMatchColor) {
  ++streak;
  ++score5;
  dur -= 10;
  if (dur < minDur) {
    dur = minDur;

  }
  streakCounter.innerHTML = streak;
     if (score5=="5"){
   alert("You won! 5 points");
    score5=0;
    }

} else {
  streak = 0;
  dur = 2000;
  score5=0;
  streakCounter.innerHTML = "";
}

prevMatchColor = nextMatchColor;
nextMatchColor = chooseColor();

boxes[0].className = "box " + colors[prevMatchColor];
boxes[1].className = "box " + colors[nextMatchColor];

rerun();
setTimeout(checkColorMatch, dur);
};

但我确实质疑您对innerhtml函数的使用，以确保兼容性。也许需要

       document.getElementById("streakCounter.").innerHTML

代替

        streakCounter.innerHTML

显示警报消息

2 个答案: