Created
February 1, 2020 22:02
-
-
Save jwoertink/2831227ac39a51b8025efe0371a1cec1 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head><title>Paper Rock Scissor</title></head> | |
| <body> | |
| <h2>Play This Game!</h2> | |
| <span id="playerScore">You: <strong>0</strong></span> | |
| <span id="computerScore">It: <strong>0</strong></span> | |
| <div> | |
| <button value="paper">🧻</button> | |
| <button value="rock">🤘</button> | |
| <button value="scissor">✂️</button> | |
| </div> | |
| <div id="counter"></div> | |
| <div id="winner"></div> | |
| <script> | |
| const choices = ["paper", "rock", "scissor"] | |
| const ties = 0 | |
| const buttons = document.querySelectorAll("button") | |
| const counterDisplay = document.getElementById("counter") | |
| const winnerDisplay = document.getElementById("winner") | |
| const playerScore = document.querySelector("#playerScore strong") | |
| const computerScore = document.querySelector("#computerScore strong") | |
| const dispayWinner = (player, computer)=> { | |
| console.log(player, computer) | |
| if (player == computer) { | |
| winnerDisplay.innerText = "It's a tie!" | |
| ties += 1 | |
| if (ties == 3) { | |
| winnerDisplay.innerText = "I'm done with this" | |
| setTimeout(()=> { | |
| window.location = "https://www.youtube.com/watch?v=dQw4w9WgXcQ" | |
| }, 2500) | |
| } | |
| } else if (player == "paper" && computer == "rock") { | |
| ties = 0 | |
| let score = parseInt(playerScore.innerText) | |
| playerScore.innerText = score + 1 | |
| winnerDisplay.innerText = "Player Wins" | |
| } else if (player == "rock" && computer == "scissor") { | |
| ties = 0 | |
| let score = parseInt(playerScore.innerText) | |
| playerScore.innerText = score + 1 | |
| winnerDisplay.innerText = "Player Wins" | |
| } else if (player == "scissor" && computer == "paper") { | |
| ties = 0 | |
| let score = parseInt(playerScore.innerText) | |
| playerScore.innerText = score + 1 | |
| winnerDisplay.innerText = "Player Wins" | |
| } else if (player == "paper" && computer == "scissor") { | |
| ties = 0 | |
| let score = parseInt(computerScore.innerText) | |
| computerScore.innerText = score + 1 | |
| winnerDisplay.innerText = "Computer Wins" | |
| } else if (player == "rock" && computer == "paper") { | |
| ties = 0 | |
| let score = parseInt(computerScore.innerText) | |
| computerScore.innerText = score + 1 | |
| winnerDisplay.innerText = "Computer Wins" | |
| } else if (player == "scissor" && computer == "rock") { | |
| ties = 0 | |
| let score = parseInt(computerScore.innerText) | |
| computerScore.innerText = score + 1 | |
| winnerDisplay.innerText = "Computer Wins" | |
| } | |
| winnerDisplay.innerText = winnerDisplay.innerText + `. Computer chose: ${computer}` | |
| } | |
| buttons.forEach(button => { | |
| button.addEventListener("click", e => { | |
| e.preventDefault() | |
| winnerDisplay.innerText = "" | |
| const userChoice = e.target.value | |
| const computerChoice = choices[Math.floor(Math.random() * choices.length)] | |
| counterDisplay.innerText = "3" | |
| const counter = setInterval(()=> { | |
| let count = parseInt(counterDisplay.innerText) | |
| count -= 1 | |
| counterDisplay.innerText = count | |
| if (count == 0) { | |
| window.clearInterval(counter) | |
| counterDisplay.innerText = "" | |
| dispayWinner(userChoice, computerChoice) | |
| } | |
| }, 1000) | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment