diff --git a/Rock-Paper-Scissors/README.md b/Rock-Paper-Scissors/README.md new file mode 100644 index 00000000..90f8c0f9 --- /dev/null +++ b/Rock-Paper-Scissors/README.md @@ -0,0 +1,6 @@ +# The Rock Paper Scissors Game + +This is a simple version of rock paper scissor game. +Feel free to make it better in any way possible! + +![Rock Paper Scissors](rps.png "Rock Paper Scissors") diff --git a/Rock-Paper-Scissors/index.html b/Rock-Paper-Scissors/index.html new file mode 100644 index 00000000..b0bb7caa --- /dev/null +++ b/Rock-Paper-Scissors/index.html @@ -0,0 +1,29 @@ + + + + + + + replit + + + + +
+
+ + + +
+
+
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/Rock-Paper-Scissors/rps.png b/Rock-Paper-Scissors/rps.png new file mode 100644 index 00000000..091568e1 Binary files /dev/null and b/Rock-Paper-Scissors/rps.png differ diff --git a/Rock-Paper-Scissors/script.js b/Rock-Paper-Scissors/script.js new file mode 100644 index 00000000..86dcd9c9 --- /dev/null +++ b/Rock-Paper-Scissors/script.js @@ -0,0 +1,144 @@ +/* + Rock Paper Scissors 🚀🔥 + Concepts covered in this project + 👉 For loops + 👉 Dom Manipulation + 👉 Variables + 👉 Conditionals (if else if) + 👉 Template Literals + 👉 Event Listeners + 👉 Higher order Function (Math.random()) +*/ + +const totalScore = {computerScore : 0, playerScore : 0} + +// ** getComputerChoice randomly selects between `rock` `paper` `scissors` and returns that string ** +// getComputerChoice() 👉 'Rock' +// getComputerChoice() 👉 'Scissors' +function getComputerChoice() { + const rpsChoice = ["Rock", "Paper", "Scissors"] + const randomNumber = Math.floor(Math.random() * 3) + return rpsChoice[randomNumber]; + // console.log(rpsChoice[randomNumber]) + +} + +// ** getResult compares playerChoice & computerChoice and returns the score accordingly ** +// human wins - getResult('Rock', 'Scissors') 👉 1 +// human loses - getResult('Scissors', 'Rock') 👉 -1 +// human draws - getResult('Rock', 'Rock') 👉 0 +function getResult(playerChoice, computerChoice) { + // return the result of score based on if you won, drew, or lost + let score; + + + // All situations where human draws, set `score` to 0 + if (playerChoice == computerChoice) { + score = 0; + } + else if(playerChoice=="Paper" && computerChoice=="Rock"){ + score = 1; + } +else if(playerChoice=="Scissors"&& computerChoice=="Paper"){ + score = 1; + } +else if(playerChoice=="Rock" && computerChoice=="Scissors"){ + score = 1; + } + else{ + score = -1; + } + + + + // All situations where human wins, set `score` to 1 + // make sure to use else ifs here + + + // Otherwise human loses (aka set score to -1) + + + // return score + return score +} + +// ** 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** +function showResult(score, playerChoice, computerChoice) { + // Hint: on a score of -1 + // You should do result.innerText = 'You Lose!' + // Don't forget to grab the div with the 'result' id! + const resultDiv = document.getElementById('result') + const handsDiv = document.getElementById('hands') + const playerScoreDiv = document.getElementById('player-score') + + + if(score == -1){ + resultDiv.innerText = "You Lose" + + } + else if(score ==0){ + resultDiv.innerText = "That a Tie" + + + } + else{ + resultDiv.innerText= "You Win" + + + } + + handsDiv.innerText= `${playerChoice} VS ${computerChoice} ` + + playerScoreDiv.innerText = `Your Score ${totalScore.playerScore}` + + +} + +// ** Calculate who won and show it on the screen ** +function onClickRPS(playerChoice) { + console.log(playerChoice) + const computerChoice = getComputerChoice() + console.log(computerChoice) + const score = getResult(playerChoice,computerChoice) + totalScore.playerScore += score + totalScore.computerScore == score + + console.log({score}) + console.log(totalScore) + showResult(score,playerChoice,computerChoice) +} + + +// ** Make the RPS buttons actively listen for a click and do something once a click is detected ** +function playGame() { + // use querySelector to select all RPS Buttons +const rpsButtons = document.querySelectorAll('.rpsButton') + console.log(rpsButtons) + + rpsButtons.forEach(rpsButtons => { + rpsButtons.onclick =() => onClickRPS(rpsButtons.value) + }) + + + + // Add a click listener to the end game button that runs the endGame() function on click + const endGameButton = document.getElementById("endGameButton") + endGameButton.onclick = () => endGame(totalScore) +} + +// ** endGame function clears all the text on the DOM ** +function endGame(totalScore) { + totalScore.playerScore = 0 + totalScore.computerScore = 0 + + const resultDiv = document.getElementById('result') + const handsDiv = document.getElementById('hands') + const playerScoreDiv = document.getElementById('player-score') + + playerScoreDiv.innerText = '' + handsDiv.innerText ='' + resultDiv.innerText='' + +} + +playGame() \ No newline at end of file diff --git a/Rock-Paper-Scissors/style.css b/Rock-Paper-Scissors/style.css new file mode 100644 index 00000000..767fdc22 --- /dev/null +++ b/Rock-Paper-Scissors/style.css @@ -0,0 +1,38 @@ +html, body { + height: 100%; + width: 100%; + padding: 0; + margin:0; +} + +.wrapper { + background: #1c1c1c; + color: white; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + flex-direction: column; +} + +.buttons { + display: flex; + gap: 20px; +} + +button { + height: 100px; + width: 100px; + font-size: 48px; + border-radius: 30px; + cursor: pointer; + +} + +.resultContainer { + font-size: 2rem; + text-align: center; + margin-top: 20px; +} +