Estoy tratando de construir un simulador de apuestas que te permita apostar con dinero falso para ver si ganarías la mayoría de las veces. El juego que estoy tratando de replicar es Mines de Roobet. En mi juego, hay 9 cuadrados dispuestos en un formato de cuadrícula. Uno de los cuadrados es el cuadrado de la bomba, lo que significa que si haces clic en él, pierdes. Sin embargo, el jugador no sabe qué casilla es la casilla bomba. Tienes que hacer clic en 4 cuadrados, y si todos los que has hecho clic son cuadrados que no son bombas, entonces ganas $50. Si haces clic en el cuadrado de la bomba, pierdes $50.
Lo que he estado tratando de averiguar durante una semana ahora es cómo hacer que el juego espere hasta que se haya hecho clic en 4 cuadrados que no son bombas, o hasta que se haya hecho clic en 1 cuadrado bomba para realizar ciertas funciones (restar 50 de cantidad de juego, reinicie el juego). Lo he intentado con bucles while, pero eso bloquea el navegador. También probé declaraciones if-else, pero el código no espera hasta que se haya hecho clic en 4 cuadrados que no son bombas o en 1 cuadrado bomba. Simplemente lo comprueba al instante. Entonces da como resultado que no funcione bien. También he intentado que la función se llame a sí misma y luego verifique cualquier caso, pero solo da como resultado un error que dice "Se excedió el tamaño máximo de la pila de llamadas".
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(); } }¡Qué pequeño ejercicio divertido! Aquí está mi solución jquery rápida y sucia.
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>Parece que necesitas algún tipo de estado. No sé cómo se ve el resto de su código, pero tal vez la creación de un ayudante para realizar un seguimiento de sus recuentos podría ayudar:
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(); // 3Javascript debería mantener esto en la memoria para usted. Es posible que tenga que ver el resto de su código para entender exactamente cómo solucionar el problema, ¡pero tal vez esto lo ponga en el camino correcto!