|
| 1 | + |
| 2 | +const scores = {'computerScore':0 , 'playerScore':0} |
| 3 | + |
| 4 | +function getComputerChoice() { |
| 5 | + let options = ['Rock','Paper','Scissors'] |
| 6 | + let n = Math.floor(Math.random()*3) |
| 7 | + |
| 8 | + return options[n] |
| 9 | +} |
| 10 | + |
| 11 | + |
| 12 | +function getResult(playerChoice, computerChoice) { |
| 13 | + // return the result of score based on if you won, drew, or lost |
| 14 | + var score=0; |
| 15 | + // All situations where human draws, set `score` to 0 |
| 16 | + if(playerChoice === computerChoice){ |
| 17 | + score = 0; |
| 18 | + }else if(playerChoice==='Rock' && computerChoice==='Scissors'){ |
| 19 | + score = 1 |
| 20 | + }else if(playerChoice==='Paper' && computerChoice==='Rock'){ |
| 21 | + score = 1 |
| 22 | + }else if(playerChoice==='Scissors' && computerChoice==='Paper'){ |
| 23 | + score = 1 |
| 24 | + |
| 25 | + }else{ |
| 26 | + score = -1 |
| 27 | + } |
| 28 | + |
| 29 | + return score |
| 30 | +} |
| 31 | + |
| 32 | +// ** showResult updates the DOM to `You Win!` or `You Lose!` or `It's a Draw!` based on the score. Also shows Player Choice vs. Computer Choice** |
| 33 | +function showResult(score, playerChoice, computerChoice) { |
| 34 | + |
| 35 | + const resultDiv = document.getElementById('result') |
| 36 | + const handsDiv = document.getElementById('hands') |
| 37 | + const playerScoreDiv = document.getElementById('player-score') |
| 38 | + |
| 39 | + if(score == -1){ |
| 40 | + resultDiv.innerText = 'You Lose!' |
| 41 | + }else if(score == 1){ |
| 42 | + resultDiv.innerText = 'You Win!' |
| 43 | + }else{ |
| 44 | + resultDiv.innerText = 'Draw!' |
| 45 | + } |
| 46 | + |
| 47 | + handsDiv.innerText=`🧑🦰 ${playerChoice} vs 🤖 ${computerChoice}` |
| 48 | + playerScoreDiv.innerText =` Your Score: ${scores['playerScore']}` |
| 49 | +} |
| 50 | + |
| 51 | +// ** Calculate who won and show it on the screen ** |
| 52 | +function onClickRPS(playerChoice) { |
| 53 | + const computerChoice = getComputerChoice() |
| 54 | + const score = getResult(playerChoice.value,computerChoice) |
| 55 | + scores['playerScore'] += score |
| 56 | + showResult(score, playerChoice.value,computerChoice) |
| 57 | +} |
| 58 | + |
| 59 | + |
| 60 | +// ** Make the RPS buttons actively listen for a click and do something once a click is detected ** |
| 61 | +function playGame() { |
| 62 | + // use querySelector to select all RPS Buttons |
| 63 | + const selection = document.querySelectorAll('.rpsButton') |
| 64 | + |
| 65 | +selection.forEach(clickks =>{ |
| 66 | + clickks.onclick = () => onClickRPS(clickks) |
| 67 | +}) |
| 68 | + |
| 69 | + |
| 70 | + // Add a click listener to the end game button that runs the endGame() function on click |
| 71 | + let endGameButton = document.getElementById('endGameButton') |
| 72 | + endGameButton.onclick = () => endGame() |
| 73 | +} |
| 74 | + |
| 75 | +// ** endGame function clears all the text on the DOM ** |
| 76 | +function endGame() { |
| 77 | + let playerScore = document.getElementById('player-score') |
| 78 | + let hands = document.getElementById('hands') |
| 79 | + let result = document.getElementById('result') |
| 80 | + playerScore.innerText = '' |
| 81 | + hands.innerText = '' |
| 82 | + result.innerText = '' |
| 83 | +} |
| 84 | + |
| 85 | +// ** endGame function clears all the text on the DOM ** |
| 86 | +playGame() |
0 commit comments