Jokenpô (pedra, papel e tesoura) usando JavaScript

Alasca · Dezembro 9, 2014

Olá

Preciso de ajuda para finalizar um jogo de pedra, papel e tesoura que comecei a fazer utilizando JavaScript. Estou utilizando o JavaScript juntamente com o código HTML, pois ainda não aprendi bem como usar arquivos externos. Mas não sei se estou fazendo da forma correta. Segue o código que estou utilizando.

<html>
<head>
<title>Papel, Pedra e Tesoura</title>
</head>
<body>
<script>
alert ("Pronto para iniciar o jogo? Clique em ok.")
var userChoice = prompt("Voce escolhe pedra, papel ou tesoura?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "pedra";
} else if(computerChoice <= 0.67) {
computerChoice = "papel";
} else {
computerChoice = "tesoura";
} console.log("Computer: " + computerChoice);
var compare = function (choice1, choice2) {
    if (choice1 === choice2)
    return ("O resultado é um empate!")
    else if (choice1 === "pedra") {
        if (choice2 === "tesoura")
        return ("pedra vence")
        else {
            return ("papel vence")
        }
    }
    else if (choice1 === "papel") {
        if (choice2 === "pedra")
        return "papel vence"
        else {
            return "tesoura vence"
        }
    }
    else if (choice1 === "tesoura") {
        if (choice2 === "pedra")
        return "pedra vence"
        else {
            return "tesoura vence"
        }
    }
};
compare(userChoice,computerChoice)
</script>
</body></html>

A ideia é que depois de feita a pergunta “Você escolhe pedra, papel ou tesoura?”, o jogador digite a sua escolha. Com base no número aleatório entre 0 e 1, escolhido pelo Math.random, será feita a escolha do computador.

Então eu gostaria que fosse exibido na tela o resultado vencedor. Usei console.log() para isto, veja:

console.log("Computer: " + computerChoice);

Onde primeiro aparece a escolha do computador e depois o resultado. Mas não funciona. Gostaria que o resultado aparecesse para o jogador, mas só tenho uma tela branca. Como posso resolver isto?

Se alguém puder ajudar, agradeço.

itlpps · Dezembro 9, 2014

<script>
    alert("Pronto para iniciar o jogo? Clique em ok.")
    var userChoice = prompt("Voce escolhe pedra, papel ou tesoura?");
    var computerChoice = Math.random();
    if (computerChoice < 0.34) {
        computerChoice = "pedra";
    } else if (computerChoice <= 0.67) {
        computerChoice = "papel";
    } else {
        computerChoice = "tesoura";
    }
     alert("Computer: " + computerChoice);
    
    var compare = function (choice1, choice2) {
        if (choice1 === choice2)
            return ("O resultado é um empate!")
        else if (choice1 === "pedra") {
            if (choice2 === "tesoura")
                return ("pedra vence")
            else {
                return ("papel vence")
            }
        }
        else if (choice1 === "papel") {
            if (choice2 === "pedra")
                return "papel vence"
            else {
                return "tesoura vence"
            }
        }
        else if (choice1 === "tesoura") {
            if (choice2 === "pedra")
                return "pedra vence"
            else {
                return "tesoura vence"
            }
        }
    };
   alert(compare(userChoice, computerChoice))
</script>

Com console.log() ele escreve no console do navegador.

Para visualizar o console, aperte F12 e depois em console. (Google Chrome)

angelorubin · Dezembro 10, 2014

Olá, achei legal a ideia do JanKenPon e comecei a brincar com algo aqui, da uma olhada - http://jsfiddle.net/angelorubin/82jm8cwx

Alasca · Dezembro 11, 2014

angelorubin muito bom seu código, está ficando muito legal.

itlpps boa a sua ideia de usar o alert no lugar do console.log para exibir o resultado do ganhador. Mas e se eu quisesse exibir na própria pagina, ao invés de exibir uma mensagem de alerta? Talvez tivesse que modificar o HTML. Alguma sugestão?

itlpps · Dezembro 12, 2014

itlpps boa a sua ideia de usar o alert no lugar do console.log para exibir o resultado do ganhador. Mas e se eu quisesse exibir na própria pagina, ao invés de exibir uma mensagem de alerta? Talvez tivesse que modificar o HTML. Alguma sugestão?

Sim Sim !

Use a propiedade innerHTML.

http://www.w3schools.com/jsref/prop_html_innerhtml.asp

Fiz aqui.

Uma observação: Se você usar innerHTML com o código JavaScript antes do </body> , não irá funcionar.

Mas se quiser o JS antes do HTML, terá que fazer assim:

window.onload = function()
{
   //Código JS aqui !
}

Seu código ficará parecido com isso !

<html>
<head>
    <title>Papel, Pedra e Tesoura</title>
</head>
<body>
    <p id="computerChoiceP">
    </p>
    <p id="userChoiceP">
    </p>
    <p id="resultado"></p>
</body>
</html>
<script type="text/javascript">
    alert("Pronto para iniciar o jogo? Clique em ok.");
    var userChoice = prompt("Voce escolhe pedra, papel ou tesoura?");
    var computerChoice = Math.random();
    if (computerChoice < 0.34) {
        computerChoice = "pedra";
    } else if (computerChoice <= 0.67) {
        computerChoice = "papel";
    } else {
        computerChoice = "tesoura";
    }
    document.getElementById("userChoiceP").innerHTML = "User: " + userChoice;
    document.getElementById("computerChoiceP").innerHTML = "Computer: " + computerChoice;


    var compare = function (choice1, choice2) {
        if (choice1 === choice2)
            return ("O resultado é um empate!");
        else if (choice1 === "pedra") {
            if (choice2 === "tesoura")
                return ("pedra vence");
            else {
                return ("papel vence");
            }
        }
        else if (choice1 === "papel") {
            if (choice2 === "pedra")
                return "papel vence";
            else {
                return "tesoura vence";
            }
        }
        else if (choice1 === "tesoura") {
            if (choice2 === "pedra")
                return "pedra vence";
            else {
                return "tesoura vence";
            }
        }
    };
    document.getElementById("resultado").innerHTML = "Result: " + compare(userChoice, computerChoice);


</script>

angelorubin · Dezembro 12, 2014

Gostaria de fazer uma ressalva.

Desculpe @itlpps, não queria atrapalhar o tópico, apenas me empolguei com a idéia e resolvi montar um exemplo aqui.

Porém na linha que ela precisa seguir com o ensino do javascript, a linguagem pura é o mais adequado mesmo.

itlpps · Dezembro 12, 2014

Gostaria de fazer uma ressalva.

Desculpe @itlpps, não queria atrapalhar o tópico, apenas me empolguei com a idéia e resolvi montar um exemplo aqui.

Porém na linha que ela precisa seguir com o ensino do javascript, a linguagem pura é o mais adequado mesmo.

Te entendo, é normal a empolgação kkk

Sim, mas innerHTML não funciona se a pagina não tiver carregada, porque é executado de cima para baixo.

Não tem como ela pegar um ID do HTML, se ele ainda não foi criado.

Por isso se deve por o JS embaixo do HTML, nesse caso.

Alasca · Dezembro 12, 2014

Gostei da propriedade innerHTML. Dei uma melhorada no código, para ficar mais bonitinho.

<html>
<head>
    <title>Papel, Pedra e Tesoura</title>
<style type="text/css">
<!--
div {
border-radius: 5px;
border: 2px solid #6495ED;
background-color: #BCD2EE;
height: 150px;
width: 170px;
margin: auto;
text-align: center;
}
h2 {
text-align: center;
font-family: Garamond, Verdana, serif;
font-size: 20px;
}
div h3 {
border-radius: 5px;
border: 2px solid #6495ED;
background-color: #8968CD;
height: 150px;
width: 170px;
margin: auto;
text-align: center;
-->
</style>
</head>
<body>
    <div><h2 id="userChoiceP">
    </h2></div>
    <div><h2 id="computerChoiceP">
    </h2></div>
    <div><h3 id="resultado"></h3></div>
</body>
</html>
<script type="text/javascript">
    alert("Pronto para iniciar o jogo? Clique em ok.");
    var userChoice = prompt("Voce escolhe pedra, papel ou tesoura?");
    var computerChoice = Math.random();
    if (computerChoice < 0.34) {
        computerChoice = "pedra";
    } else if (computerChoice <= 0.67) {
        computerChoice = "papel";
    } else {
        computerChoice = "tesoura";
    }
    document.getElementById("userChoiceP").innerHTML = "Você escolheu: " + userChoice;
    document.getElementById("computerChoiceP").innerHTML = "O Computador escolheu: " + computerChoice;




    var compare = function (choice1, choice2) {
        if (choice1 === choice2)
            return ("O resultado é um empate!");
        else if (choice1 === "pedra") {
            if (choice2 === "tesoura")
                return ("pedra vence");
            else {
                return ("papel vence");
            }
        }
        else if (choice1 === "papel") {
            if (choice2 === "pedra")
                return "papel vence";
            else {
                return "tesoura vence";
            }
        }
        else if (choice1 === "tesoura") {
            if (choice2 === "pedra")
                return "pedra vence";
            else {
                return "tesoura vence";
            }
        }
    };
    document.getElementById("resultado").innerHTML = "Resultado: " + compare(userChoice, computerChoice);




</script>

itlpps · Dezembro 15, 2014

Ficou bem legal :natalsmile:

Marque a resposta que mais lhe foi útil, como resolvido ! :natalbiggrin:

Arquivado

Jokenpô (pedra, papel e tesoura) usando JavaScript

Recommended Posts

Alasca 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

itlpps 109

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alasca 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

itlpps 109

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

itlpps 109

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alasca 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

itlpps 109

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante