Mejoras y optimizaciones en general.

piedra-papel-tijera/script.js

@@ -1,62 +1,151 @@
+'use strict';
+
 const userScoreSpan = document.getElementById('user-score');
 const computerScoreSpan = document.getElementById('computer-score');
 const resultDiv = document.getElementById('result');
 const choiceButtons = document.querySelectorAll('#choices button');
 const resetBtn = document.getElementById('reset-btn');
 
-let userScore = 0;
-let computerScore = 0;
+const bestSelect = document.getElementById('best-of');
+const roundSpan = document.getElementById('round');
+const roundsTotalSpan = document.getElementById('rounds-total');
 
 const choices = ['piedra', 'papel', 'tijera'];
 
+let userScore = 0;
+let computerScore = 0;
+let roundNumber = 1;
+let bestOf = 3;
+let targetWins = 2;
+let gameOver = false;
+
 function computerPlay() {
-  const idx = Math.floor(Math.random() * 3);
+  const idx = Math.floor(Math.random() * choices.length);
   return choices[idx];
 }
 
-function playRound(userChoice) {
-  const computerChoice = computerPlay();
-
-  let resultMsg = `Tu elección: ${emoji(userChoice)} ${capitalize(userChoice)}<br>
-                   Máquina: ${emoji(computerChoice)} ${capitalize(computerChoice)}<br>`;
-
-  if (userChoice === computerChoice) {
-    resultMsg += "<strong>¡Empate!</strong>";
-  } else if (
-    (userChoice === 'piedra' && computerChoice === 'tijera') ||
-    (userChoice === 'papel' && computerChoice === 'piedra') ||
-    (userChoice === 'tijera' && computerChoice === 'papel')
-  ) {
-    userScore++;
-    userScoreSpan.textContent = userScore;
-    resultMsg += "<strong>¡Ganaste esta ronda! 🎉</strong>";
-  } else {
-    computerScore++;
-    computerScoreSpan.textContent = computerScore;
-    resultMsg += "<strong>La máquina gana esta ronda.</strong>";
-  }
-
-  resultDiv.innerHTML = resultMsg;
-}
-
 function emoji(choice) {
   if (choice === 'piedra') return '🪨';
   if (choice === 'papel') return '📄';
   if (choice === 'tijera') return '✂️';
+  return '';
 }
 
 function capitalize(word) {
   return word.charAt(0).toUpperCase() + word.slice(1);
 }
 
-choiceButtons.forEach(btn => {
-  btn.onclick = () => playRound(btn.getAttribute('data-choice'));
-});
+function updateHUD() {
+  if (userScoreSpan) userScoreSpan.textContent = String(userScore);
+  if (computerScoreSpan) computerScoreSpan.textContent = String(computerScore);
+  if (roundSpan) roundSpan.textContent = String(roundNumber);
+  if (roundsTotalSpan) roundsTotalSpan.textContent = String(bestOf);
+}
 
-resetBtn.onclick = () => {
+function setBestOf() {
+  const v = bestSelect && bestSelect.value ? parseInt(bestSelect.value, 10) : 3;
+  bestOf = Number.isInteger(v) ? Math.max(1, Math.min(v, 9)) : 3;
+  targetWins = Math.floor(bestOf / 2) + 1;
+  roundsTotalSpan.textContent = String(bestOf);
+  resetGame(); // reinicia con la nueva configuración
+}
+
+function endMatchIfNeeded() {
+  // Fin anticipado si alguien alcanza las victorias necesarias
+  if (userScore >= targetWins) {
+    gameOver = true;
+    resultDiv.textContent = `Has ganado la partida ${userScore}-${computerScore} (mejor de ${bestOf}). 🎉`;
+    return true;
+  }
+  if (computerScore >= targetWins) {
+    gameOver = true;
+    resultDiv.textContent = `La máquina gana la partida ${computerScore}-${userScore} (mejor de ${bestOf}). 🤖`;
+    return true;
+  }
+  // Fin por alcanzar el número máximo de rondas
+  if (roundNumber > bestOf) {
+    gameOver = true;
+    if (userScore > computerScore) {
+      resultDiv.textContent = `Has ganado la partida ${userScore}-${computerScore} (mejor de ${bestOf}). 🎉`;
+    } else if (computerScore > userScore) {
+      resultDiv.textContent = `La máquina gana la partida ${computerScore}-${userScore} (mejor de ${bestOf}). 🤖`;
+    } else {
+      resultDiv.textContent = `Empate global ${userScore}-${computerScore} (mejor de ${bestOf}).`;
+    }
+    return true;
+  }
+  return false;
+}
+
+function playRound(userChoice) {
+  if (gameOver) return;
+
+  const computerChoice = computerPlay();
+
+  let msg = `Tu elección: ${emoji(userChoice)} ${capitalize(userChoice)}\n` +
+            `Máquina: ${emoji(computerChoice)} ${capitalize(computerChoice)}\n`;
+
+  if (userChoice === computerChoice) {
+    msg += 'Resultado: ¡Empate!';
+    // Empate cuenta como ronda consumida
+    roundNumber += 1;
+  } else if (
+    (userChoice === 'piedra' && computerChoice === 'tijera') ||
+    (userChoice === 'papel' && computerChoice === 'piedra') ||
+    (userChoice === 'tijera' && computerChoice === 'papel')
+  ) {
+    userScore += 1;
+    msg += 'Resultado: ¡Ganaste esta ronda! 🎉';
+    // Avanza ronda tras cada ronda jugada
+    roundNumber += 1;
+  } else {
+    computerScore += 1;
+    msg += 'Resultado: La máquina gana esta ronda.';
+    roundNumber += 1;
+  }
+
+  // Mostrar resultado de la ronda (usamos textContent para evitar HTML)
+  resultDiv.textContent = msg;
+
+  updateHUD();
+
+  // Comprobar fin anticipado o por límite de rondas
+  if (endMatchIfNeeded()) {
+    return;
+  }
+}
+
+function handleChoice(choice) {
+  playRound(choice);
+}
+
+function resetGame() {
   userScore = 0;
   computerScore = 0;
-  userScoreSpan.textContent = userScore;
-  computerScoreSpan.textContent = computerScore;
+  roundNumber = 1;
+  gameOver = false;
   resultDiv.textContent = '';
-};
+  updateHUD();
+}
+
+// Listeners (evitar handlers inline)
+choiceButtons.forEach((btn) => {
+  btn.addEventListener('click', () => handleChoice(btn.getAttribute('data-choice')));
+  // Accesibilidad extra: Enter y Espacio activan el botón
+  btn.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleChoice(btn.getAttribute('data-choice'));
+    }
+  });
+});
+
+resetBtn.addEventListener('click', resetGame);
+
+if (bestSelect) {
+  bestSelect.addEventListener('change', setBestOf);
+}
+
+// Init
+setBestOf();
+updateHUD();