> For the complete documentation index, see [llms.txt](https://recife.gitbook.io/wwcode-front-end-study-group/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://recife.gitbook.io/wwcode-front-end-study-group/wwcode-challenges/pedra-papel-e-tesoura.md). # Pedra, Papel e Tesoura **INTRODUÇÃO AO JAVASCRIPT - JOGO DESAFIO** É hora de criar fluência nos fundamentos do JavaScript. Neste desafio, praticaremos condicionais em JavaScript para que você possa aprimorar suas habilidades e se sentir confiante em levá-las ao mundo real. Por quê? Dada uma determinada entrada, você deseja retornar uma certa saída. **Pedra, Papel ou Tesoura** Rock, paper, scissors é um jogo clássico para dois jogadores. Cada jogador escolhe pedra, papel ou tesoura. Os itens são comparados e qualquer jogador que escolher o item mais poderoso ganha. **Os possíveis resultados são:** * Pedra destrói tesouras.( Pedra ganha da Tesoura) * Tesoura corta papel. ( Tesoura ganha do papel) * Papel embrulha pedra. ( Papel ganha da pedra) * Se houver empate, o jogo termina empatado. **Nosso algoritmo, é dividido em quatro partes:** 1. O jogador usuário, vai escolher uma opção. 2. O computador, vai escolher aleatoriamente uma opção. 3. Compare as duas opções e determine um vencedor. 4. Inicie o programa e exiba os resultados. Vamos resolver os problemas por parte! ok? vamos fazer esse jogo passo a passo, a ideia é você ir seguindo as instruções abaixo e ir construindo o jogo e o melhor entendendo cada parte do código. Sugiro você ficar com uma tela do editor de código aberta, junto com o do console para ir testando e ver funcionando.
1. O usuário deve poder escolher **'pedra', 'papel' ou 'tesoura'** quando o jogo começar. Usando *`const` na variável* e a *função tipo arrow*, crie uma função com o nome `getUserChoice` que use um único parâmetro userInput**.**\ \ dica: ;) ```javascript const getUserChoice = userInput =>{ }; ``` 2\. Como um usuário pode passar um parâmetro, como **'Rock' ou 'rock'** com diferentes letras maiúsculas, comece utilizando a função do JavaScript *`toLowerCase( )`* para tornar todos *`userInput` em letras minúsculas.* \ \ dica: ;) *lembrando! o código ainda deve estar dentro da função. getUserChoice()* ```javascript userInput = userInput.toLowerCase(); ``` 3\. Ao escolher o usuário, verifique também se o usuário digitou uma opção válida: 'rock', 'paper' ou 'scissors'.\ Dentro `getUserChoice()`, escreva uma declaração *`if/ else`* que garante que o `userInput` seja 'rock', 'paper ou 'scissors'. Se isso acontecer, então *`return`* o `userInput.` Caso contrário, use *`console.log`* para imprimir uma mensagem de erro no console. ```javascript if(userInput === 'rock' || userInput ==='paper' || userInput ==='scissors'){ return userInput }else{ console.log("Error"); } ``` 4\. Teste a função chamando-a com entrada válida e inválida e imprimindo os resultados no console. Você pode excluir isso quando souber que sua função funciona. ```javascript console.log(getUserChoice('rock')); ``` 5\. Agora precisamos que o computador faça uma escolha.\ \ Crie uma nova função chamada **getComputerChoice** sem parâmetros. Dentro de seu bloco, utilizar `Math.random()e Math.floor()` para um número inteiro entre 0 e 2. Em seguida, dependendo do número, o `return` será 'rock', 'paper' ou 'scissors'. {% hint style="info" %} Obs: Como existem três opções, você pode criar um número aleatório entre 0 e 2 com código como este: {% endhint %} ```javascript (Math.floor(Math.random() * 3)); ``` obs: mais info sobre os método [Math.random](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Math/random) e [floor](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Math/floor). **continuação ..**\ Em seguida, você pode utilizar o switch para retornar return escolha do computador, da seguinte maneira: ```javascript switch(randomNumber){ case 0: return 'rock'; case 1: return 'paper'; case 2: return 'scissors'; } }; ``` **6.**Teste a função chamando-a várias vezes e imprimindo os resultados no console. ```javascript console.log(getComputerChoice()); ``` 7\. Agora é hora de determinar um vencedor.\ \ Crie uma função nomeada determineWinner que use dois parâmetros nomeados **userChoice,** **computerChoice**. Esta função irá comparar as duas opções jogadas e, em seguida, verifica o return se o usuário vai vencer, perder ou empatar.\ \ **Vamos lidar primeiro com a condição de empate.**\ \ Dentro da função `determineWinner()`, escreva uma instrução `if` que verifica se o parâmetro `userChoice` é igual ao parâmetro `computerChoice`. Se assim for, o `return` retorna uma string que o jogo foi empatado.\ \ **dica ;)** ```javascript const determineWinner = (userChoice,computerChoice) =>{ if(userChoice === computerChoice){ return "Jogadores Empataram"; } } ``` \ 8\. Se o jogo não estiver empatado, você precisará determinar um vencedor.Comece escrevendo uma declaração `if` que verifique no `userChoice` se existe 'rock'. Dentro do bloco da declaração `if`, escreva outra declaração `if/ else` que vai verificar se o `computerChoice` é 'paper'. Nesse caso o `return` apresenta uma mensagem que o **computador ganhou**. Caso contrário, o `return` apresenta uma mensagem que o **usuário ganhou.** ```javascript if(userChoice === 'rock'){ if(computerChoice === 'paper') { return "Que pena, o computador ganhou!"; }else { return "parabéns, você ganhou!"; } } ``` {% hint style="info" %} **obs:** Se o jogo não estiver empatado, sabemos que, quando userChoice for 'rock', o computerChoice deve ser 'paper' ou 'scissors'. Se o computerChoice for 'paper', o papel cobre a rocha e o computador vence. Se computerChoice não for 'paper', deve ser 'scissors' e o usuário vence.
{% endhint %} **9.** Em seguida, escreva outra declaração `if`, se `userChoice` for 'paper'.Dentro desta declaração `if`, o `computerChoice` deve ser um 'scissors' ou 'rock'. ```javascript if(userChoice === 'paper'){ if(computerChoice === 'scissors'){ return " Que pena, o computador ganhou!"; }else{ return "parabéns, você ganhou!"; } } ``` **10.** Em seguida, escreva outra declaração `if` para se o `userChoice` for 'scissors'. Dentro desta declaração `if`, o computerChoice deve ser 'rock' ou 'paper'. Escreva lógica que será return um vencedor.\ \ **dica: siga o mesmo lógica do item 9 ;)** **11.** Não se esqueça de testar sua função! ```javascript console.log( determineWinner('rock' , 'scissors')); console.log( determineWinner('paper' , 'scissors')); console.log( determineWinner('rock' , 'rock')) ``` **12.** Está tudo pronto. Agora você precisa iniciar o jogo e registrar os resultados. Crie uma função chamada `playGame()`. Dentro da função `playGame()`, crie uma variável chamada `userChoice` definido igual ao resultado da chamada `getUserChoice()`, passando em ambos 'rock', 'paper' ou 'scissors' como um argumento.\ \ Crie outra variável chamada `computerChoice` e defina-a igual ao resultado da chamada `getComputerChoice()`. ```javascript const playGame = () => { const userChoice = getUserChoice('rock'); const computerChoice = getComputerChoice(); console.log('Você Jogou: ' + userChoice); console.log('O computador Jogou: ' + computerChoice); ``` **13.** Finalmente, vamos determinar quem ganhou. Dentro da função `playGame()` chame a função `determineWinner()`. Passe as variáveis `userChoice` e `computerChoice` como seus parâmetros. Coloque essa chamada de função dentro de uma instrução console.log() para poder ver o resultado. Então, para iniciar o jogo, chame a função`playGame()` na última linha do seu programa. ```javascript const playGame = () => { const userChoice = getUserChoice('rock'); const computerChoice = getComputerChoice(); console.log('Você Jogou: ' + userChoice); console.log('O computador Jogou: ' + computerChoice); console.log(determineWinner(userChoice, computerChoice)); } playGame(); ``` **Parabéns!!! por ter completado esse desafio.**\ \ Link solução: \ \ Por: Karina Machado - \ \ \ \