Principiante de JS aquí, haciendo lo de piedra, papel o tijera, y estoy tratando de incrementar mi puntaje final.
Para hacer esto, he declarado mis puntajes de usuario/comp:
let compScore = 0; let userScore = 0;Tengo la pantalla de resultados:
let body = document.querySelector('body'); let result = document.createElement('div'); result.className = 'result'; result.textContent = `YOUR SCORE ${userScore} :: COMPUTER SCORE ${compScore}`; body.appendChild(result);Luego hice la lógica de reproducción y comparación:
document.getElementById("rock").addEventListener('click', ()=>{gameRound('Rock')}); document.querySelector(".paper").addEventListener('click', ()=>{gameRound('Paper')}); document.getElementById("scissors").addEventListener('click', ()=>{gameRound('Scissors')}); function compPlay() { return options[Math.floor(Math.random() * options.length)]; } function gameRound(userAns, compAns) { alert(`${userAns}, eyy? Let's see what the computer chose..'`); userAns= userAns.toLowerCase(); compAns=compPlay().toLowerCase(); alert('Computer answered ' + compAns + '.'); if (userAns==compAns) { alert('Draw'); } else if ((userAns==="rock" && compAns==="scissors") || (userAns==="scissors" && compAns==="paper") || (userAns==="paper" && compAns==="rock")) { result.textContent = `YOUR SCORE ${userScore+=1} :: COMPUTER SCORE ${compScore}`; } else { result.textContent = `YOUR SCORE ${userScore} :: COMPUTER SCORE ${compScore+=1}`; } }Código torpe (¡incluso yo lo sé en esta etapa!) Pero quiero decir, ¡oye, funciona!
Me preguntaba si había una forma más limpia/mejor práctica para aumentar las puntuaciones de usuario/comp, sin actualizar toda la clase html de resultados en las declaraciones if/else, ya que creo que estoy luchando con el alcance en este momento. Intenté devolver:
compAns++ AND compAns +=1en la función gameRound(), pero no estaba realmente seguro de cómo hacer que aumentara, ya que seguía mostrando 0, presumiblemente porque solo mostraba la variable declarada en el ámbito global.
Gracias por tu tiempo.
Actualmente, agrega el HTML para las partituras dinámicamente, pero ¿por qué no crearlo en el HTML inicial de la página e insertar dos elementos span donde se debe generar la partitura real?
<div> Your score: <span id="userscore">0</span> :: Computer score: <span id="compscore">0</span> </div> Ahora puede apuntar específicamente a esos elementos de span para generar la puntuación individual. Separe el incremento de la puntuación de la visualización real de la misma. Algo como esto:
} else if (.......) { userScore++; } else { compScore++; } userScoreSpan.textContent = userScore; compScoreSpan.textContent = compScore; No es su pregunta, pero si define la matriz de options de la siguiente manera:
const options = ["rock", "paper", "scissors"]; ... luego observe que el valor que sigue a mi elección (todos contra todos) ganará en mi contra. Podemos usar esto en la condición if .
Tampoco usaría alert ya que después de un tiempo se vuelve muy molesto, pero no toqué esa parte. Aquí está el código adaptado:
const options = ["rock", "paper", "scissors"]; let compScore = 0; let userScore = 0; let body = document.querySelector('body'); let userScoreSpan = document.getElementById('userscore'); let compScoreSpan = document.getElementById('compscore'); document.getElementById("rock").addEventListener('click', ()=>{gameRound('Rock')}); document.getElementById("paper").addEventListener('click', ()=>{gameRound('Paper')}); document.getElementById("scissors").addEventListener('click', ()=>{gameRound('Scissors')}); function compPlay() { return options[Math.floor(Math.random() * options.length)]; } function gameRound(userAns) { // should not be a 2nd argument let compAns; // define here. alert(`${userAns}, eyy? Let's see what the computer chose..'`); userAns = userAns.toLowerCase(); compAns = compPlay().toLowerCase(); alert('Computer answered ' + compAns + '.'); if (userAns == compAns) { alert('Draw'); } else if (options[(options.indexOf(userAns) + 1) % 3] === compAns) { compScore++; } else { userScore++; } userScoreSpan.textContent = userScore; compScoreSpan.textContent = compScore; } <button id="rock">Rock</button><button id="paper" class="paper">Paper</button><button id="scissors">Scissors</button> <div> Your score: <span id="userscore">0</span> :: Computer score: <span id="compscore">0</span> </div>