顯示警報消息

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