Proyecto: piedra, papel o tijera en JavaScript

Qué vas a construir

El clásico piedra, papel o tijera contra el ordenador, al mejor de 5. Sirve para dominar Math.random(), los if / else if y llevar un estado (el marcador) entre jugadas.

Juega aquí — es el JavaScript real de la página:

Paso 1: la jugada del ordenador

Tres opciones en un array. Math.random() da un número entre 0 y 1; lo multiplicamos por 3 y redondeamos hacia abajo para sacar un índice (0, 1 o 2).

const OPCIONES = ["piedra", "papel", "tijera"];

function jugadaOrdenador() {
    const indice = Math.floor(Math.random() * 3);   // 0, 1 o 2
    return OPCIONES[indice];
}

Paso 2: quién gana

Solo hay tres formas de ganar. Si no es empate y no ganas tú, gana la máquina.

function gana(a, b) {
    return (a === "piedra" && b === "tijera") ||
           (a === "papel"  && b === "piedra") ||
           (a === "tijera" && b === "papel");
}

Paso 3: una ronda

Comparamos, actualizamos el marcador y lo mostramos.

let puntosTu = 0;
let puntosCpu = 0;

function ronda(tuJugada) {
    const cpu = jugadaOrdenador();

    if (tuJugada === cpu) {
        console.log("Empate");
    } else if (gana(tuJugada, cpu)) {
        puntosTu++;
        console.log("Ganas la ronda");
    } else {
        puntosCpu++;
        console.log("Gana la CPU");
    }

    console.log(`Marcador: ${puntosTu} - ${puntosCpu}`);
}

Paso 4: fin de partida y botones

Al mejor de 5: el primero que llega a 5 gana. Conectamos cada botón a ronda().

const META = 5;

function comprobarFinal() {
    if (puntosTu === META)  console.log("🏆 ¡Ganas la partida!");
    if (puntosCpu === META) console.log("💥 Gana la CPU");
}

document.querySelectorAll("#ppBotones button").forEach(boton => {
    boton.addEventListener("click", () => {
        if (puntosTu < META && puntosCpu < META) {
            ronda(boton.dataset.op);
            comprobarFinal();
        }
    });
});

Cómo seguir

• Añadir "lagarto" y "Spock" (piedra-papel-tijera-lagarto-Spock).
• Guardar la mejor racha en localStorage.
• Animar la mano del ordenador antes de mostrar el resultado con setTimeout.
• Que el ordenador "aprenda": que juegue lo que te gane a tu jugada más repetida.