0

Me gustaría recibir ayuda con la siguiente cuestión, me pidieron que adaptara un juego de piedra papel o tijeras para dos jugadores y la verdad no sé por dónde empezar, dejare el html, css y el javascript del proyecto por si a alguien le gustaría adaptarlo o explicarme que debo hacer para adaptarlo para los dos jugadores. si alguien puede hacerlo se lo agradecería muchísimo, el juego funciona bien jugando contra la maquina pero debido a mis pocos conocimientos en el área no he podido adaptarlo para que jueguen dos personas. Creo que eso sería todo estaré pendiente por si necesitan que les proporcione algo más, gracias por tomarse el tiempo para leer esta publicación que tengan un feliz resto de día, tardes o noches.

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 = "Escogiendo!";

    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 = "Has Empatado!";
                break;
            case WIN:
                resultText.innerHTML = "Ganaste!";
                break;
            case LOST:
                resultText.innerHTML = "Perdiste!";
                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;

    }
}
*{
    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%;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Piedra, Papel O Tijeras | Blader</title>
    <link rel="stylesheet" href="styles.css"/>
</head>
<body>
    <div class="container">
        <h1>Piedra, Papel O Tijeras</h1>

        <div id="result">
    
            <img id="machine-img" src="img/rock.svg">

            <div id="start-text">
                Escoje una opcion
            </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>

        <footer>Creado por <a target="_blank" href="http://www.kikopalomares.com/">Cristian Extiven "Blader"</a></footer>

    </div>
    <script src="app.js"></script>
</body>
</html>

1
  • 1
    En lugar de agregar textos de agradecimientos y saludos a la pregunta, pon el problema específico que estás teniendo. "No he podido adaptarlo" no es suficiente argumento. ¿Cuál es el problema en cuestión? ¿Has tenido errores? ¿Cuáles? Lee Cómo preguntar y pulsa en editar para mejorar tu pregunta.
    – padaleiana
    el 15 sep. 2022 a las 12:19

1 respuesta 1

1

puedes usar esta logica donde requieres enviar solo la opcion ya sea

  1. piedra.
  2. papel.
  3. tijera.

    getWinner = function(player1, player2) {
        //definimos la opciones
        let opciones = {
            piedra: 0,
            papel: 1,
            tijera: 2
        };
        // creamos la matriz
        let matriz = [
            [0, -1, 1], 
            [1, 0, -1],
            [-1, 1, 0]
        ];
        //buscamos en la matriz las posciones
        // es decir si se envia piedra y papel
        // se optiene 0 y 1
        // se busca en la poscion 0
        // su posicion 1
        // que da como resultado -1
        let result = matriz[opciones[player1]]
            [opciones[player2]];

        switch (result) {
            case 0:
                return "Es empate";
            case 1:
                return `gana el jugador 1 con ${player1}`;
            case -1:
                return `gana el jugador 2 con ${player2}`;
            default:
                throw new Error("a ocurrido un error");
                break;
        }
    };

    let player1 = "tijera";
    let player2 = "piedra";

    let ganador = getWinner(player1,player2)
    alert(ganador)

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.