Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>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";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"
}
}
};</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);Se alguém puder ajudar, agradeço.
Olá, achei legal a ideia do JanKenPon e comecei a brincar com algo aqui, da uma olhada - http://jsfiddle.net/angelorubin/82jm8cwx
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 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>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.
>
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.
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">border-radius: 5px;
border: 2px solid #6495ED;
background-color: #BCD2EE;
height: 150px;
width: 170px;
margin: auto;
text-align: center;
}text-align: center;
font-family: Garamond, Verdana, serif;
font-size: 20px;
}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>Ficou bem legal :natalsmile:
Marque a resposta que mais lhe foi útil, como resolvido ! :natalbiggrin:
Para visualizar o console, aperte F12 e depois em console. (Google Chrome)