在运行另一个功能之前，如何等待按钮被按下一定次数

Question

我正在尝试构建一个赌博模拟器，让你用假钱赌博，看看你是否经常获胜。我试图复制的游戏是《Roobet的地雷》。在我的游戏中，有9个正方形以类似网格的格式排列。其中一个方块是炸弹方块，这意味着如果你点击它，你就会输。玩家不知道哪个方块是炸弹方块。你必须点击4个方块，如果你点击的所有方块都是非炸弹方块，那么你就赢得了50美元。如果你点击炸弹方块，你就会损失50美元。

我一周来一直在想的是，如何让游戏等到点击了4个非炸弹方块，或者点击了1个炸弹方块才能完成某些功能(从赌博金额中减去50，重新开始游戏(。我试过while循环，但这会导致浏览器崩溃。我也尝试过if-else语句，但代码不会等到点击了4个非炸弹方块或1个炸弹方块。它只是立即检查。所以它导致它不能正常工作。我也尝试过让函数调用自己，然后检查任何一种情况，但它只会导致一个错误：；超过了最大调用堆栈大小">

function bombClicked () {
for (let i = 0; i < array.length; i++) {          //each square is put into an array named array
array[i].addEventListener("click", () => {
if (array[i].value == "bomb") {
array[i].style.background = "red";
redCounter++;
didLose = true
}
else{
array[i].style.background = "green";
greenCounter++;
didLose = false;
}
})
}
if (greenCounter >= 4 || redCounter >= 1) {
if (didLose == true) {
gamblingAmount.value = parseInt(gamblingAmount.value) - 50;
}
else {
gamblingAmount.value = parseInt(gamblingAmount.value) + 50;
}
reset();
}
}

Answer 1

多么有趣的小运动！这是我快速而肮脏的jquery解决方案。

const NO_OF_TRIES_ALLOWED = 4;
const SCORE_WON_LOST = 50;
var score = 0;
var tries = 0;
var bombId;
function restart() {  
tries = 0;
$("button").removeClass("ok");
$("button").removeClass("bang");
bombId = Math.floor( Math.random() * 9);
$("#bombLabel").text(bombId);
}
function win() {
window.alert('you win!');
score += SCORE_WON_LOST;
$("#scoreLabel").text(score);
restart();
}
function lose(){
window.alert('you lose!');
score -= SCORE_WON_LOST;
$("#scoreLabel").text(score);
restart();
}
$(document).on("click", "button", function() {
if( !$(this).is(".bang") && !$(this).is(".ok") ) {
let buttonId = $(this).data("id");
if(buttonId === bombId) {
$(this).addClass('bang');
setTimeout(lose, 100); // bit of a delay before the alert
}
else {
$(this).addClass('ok');
tries++;
if(tries === NO_OF_TRIES_ALLOWED) {
setTimeout(win, 100); // bit of a delay before the alert
}
}


}
});
restart();

button{
width: 50px;
height: 50px;
padding: 0;
}
.ok{
background-color: green;
}
.bang{
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-id="0"></button>
<button data-id="1"></button>
<button data-id="2"></button><br>
<button data-id="3"></button>
<button data-id="4"></button>
<button data-id="5"></button><br>
<button data-id="6"></button>
<button data-id="7"></button>
<button data-id="8"></button><br>
Score: <span id="scoreLabel"></span>

Answer 2

看起来您需要某种状态。我不知道你的其余代码是什么样子的，但也许创建一个帮助程序来跟踪你的计数可能会有所帮助：

class Counter {
constructor() {
this.count = 0;
}
inc() {
this.count ++;
}
getCount() {
return this.count
}
}
const counter = new Counter();
counter.inc();
counter.inc();
counter.inc();
counter.getCount(); // 3

Javascript应该为您保留这一点。我可能必须查看您的其余代码才能了解如何准确地解决问题，但也许这会让您走上正轨！