Cómo hacer un Piedra Papel o Tijera en JavaScript

¿Estás buscando un proyecto divertido y educativo para mejorar tus habilidades en JavaScript?

Hoy, te voy a mostrar cómo puedes crear un juego de Piedra, Papel o Tijera completamente funcional desde cero. Este tutorial cubrirá todo, desde la configuración inicial hasta la lógica del juego y la interfaz de usuario, utilizando HTML, CSS y, por supuesto, JavaScript.

Configuración del Entorno

Antes de sumergirnos en el código, asegúrate de tener un entorno de desarrollo listo para usar. Necesitarás lo siguiente:

• Editor de texto: Como Visual Studio Code, Sublime Text o cualquier otro de tu preferencia.

• Navegador Web: Para probar tu juego, como Chrome, Firefox, o Safari.

• Conocimientos básicos de HTML, CSS, y JavaScript: Entender estos lenguajes te ayudará a seguir el tutorial más fácilmente.

Estructura del Proyecto

Nuestro proyecto consta de tres archivos principales:

1. index.html: El archivo HTML proporciona la estructura del juego.

2. styles.css: Este archivo CSS manejará toda la estética del juego, como los colores, márgenes y disposiciones.

3. app.js: Aquí es donde reside toda la lógica de nuestro juego.

Código Explicado

HTML

El HTML es bastante simple. Tenemos un contenedor principal que aloja todos los elementos del juego, incluidos los botones para las opciones de Piedra, Papel y Tijera, y las imágenes que representan la elección del usuario y de la máquina.

<div class="container">
    <h1>Rock Paper Scissors</h1>
    <div id="result">
        <img id="machine-img" src="img/rock.svg">
        <div id="start-text">Choose an option</div>
        <img id="user-img" src="img/rock.svg">
    </div>
    <div id="group-btn">
        <button id="rock" type="button"><img src="img/rock.svg"/></button>
        <button id="paper" type="button"><img src="img/paper.svg"/></button>
        <button id="scissors" type="button"><img src="img/scissors.svg"/></button>
    </div>
</div>

CSS

El CSS proporciona un diseño visual atractivo y responde a diferentes dispositivos y tamaños de pantalla.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

footer{
    text-align: center;
    padding: 10px;
}

footer a{
    color: black;
    text-decoration: none;
}

button{
    background-color: #ffe97d;
    border: 4px solid black;
    margin: 5px;
}

.container{
    max-width: 420px;
    height: 100vh;
    max-height: 745px;
    margin: 0 auto;
    background-color: #ffb74d;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 5px solid black;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

h1{
    font-size: 35px;
    text-align: center;
    padding: 20px;
}

#result{
   text-align: center;
}

#result img{
    width: 40%;
}

#start-text{
    font-size: 36px;
    padding: 20px;
}

#group-btn{
    display: flex;
    width: 100%;
}

#group-btn > button > img{
    width: 100%;
}

JavaScript

En app.js, definimos constantes para las opciones del juego y los resultados. Usamos addEventListener para manejar los clics en los botones y setTimeout y setInterval para gestionar el tiempo de respuesta del juego.

La función play() es el corazón del juego, donde se decide el resultado basado en la elección del usuario y de la máquina. La lógica para determinar el ganador está claramente definida aquí, asegurando que el juego sea justo y funcional.

const ROCK = "rock";
const PAPER = "paper";
const SCISSORS = "scissors";

const TIE = 0;
const WIN = 1;
const LOST = 2;

let isPlaying = false;

const rockBtn = document.getElementById("rock");
const paperBtn = document.getElementById("paper");
const scissorsBtn = document.getElementById("scissors");
const resultText = document.getElementById("start-text");
const userImg = document.getElementById("user-img");
const machineImg = document.getElementById("machine-img");

rockBtn.addEventListener("click", () => {
    play(ROCK);
});
paperBtn.addEventListener("click", () => {
    play(PAPER);
});
scissorsBtn.addEventListener("click", () => {
    play(SCISSORS);
});

function play(userOption) {
    if(isPlaying) return;

    isPlaying = true;

    userImg.src = "img/" + userOption + ".svg";

    resultText.innerHTML = "Chossing!";

    const interval = setInterval(function(){
        const machineOption = calcMachineOption();
        machineImg.src = "img/" + machineOption + ".svg";
    }, 200);

    setTimeout(function () {

        clearInterval(interval);

        const machineOption = calcMachineOption();
        const result = calcResult(userOption, machineOption);

        machineImg.src = "img/" + machineOption + ".svg";

        switch (result) {
            case TIE:
                resultText.innerHTML = "You have tied!";
                break;
            case WIN:
                resultText.innerHTML = "You win!";
                break;
            case LOST:
                resultText.innerHTML = "You lost!";
                break;
        }
        isPlaying = false;
    }, 2000);
}

function calcMachineOption() {
    const number = Math.floor(Math.random() * 3);
    switch (number) {
        case 0:
            return ROCK;
        case 1:
            return PAPER;
        case 2:
            return SCISSORS;
    }
}

function calcResult(userOption, machineOption) {
    if (userOption === machineOption) {
        return TIE;

    } else if (userOption === ROCK) {

        if (machineOption === PAPER) return LOST;
        if (machineOption === SCISSORS) return WIN;

    } else if (userOption === PAPER) {

        if (machineOption === SCISSORS) return LOST;
        if (machineOption === ROCK) return WIN;

    } else if (userOption === SCISSORS) {

        if (machineOption === ROCK) return LOST;
        if (machineOption === PAPER) return WIN;

    }
}

Conclusión

Al final de este tutorial, no solo habrás creado un juego divertido sino también habrás mejorado tus habilidades en JavaScript, especialmente en manipulación del DOM, eventos y temporizadores. Experimenta con el código para agregar más características como un contador de puntuación o niveles de dificultad.

Aquí te dejo el repositorio de GitHub donde tienes todo el código.

Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!