diff options
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | scripts/rps.js | 81 | ||||
| -rw-r--r-- | static/about.html | 3 | ||||
| -rw-r--r-- | static/recipes/omurice.html | 3 | ||||
| -rw-r--r-- | static/recipes/overview.html | 3 | ||||
| -rw-r--r-- | static/recipes/oyakodon.html | 3 | ||||
| -rw-r--r-- | static/recipes/pizza.html | 3 | ||||
| -rw-r--r-- | static/rock-paper-scissors.html | 60 | ||||
| -rw-r--r-- | static/style.css | 8 |
9 files changed, 167 insertions, 1 deletions
@@ -1,4 +1,3 @@ -<!DOCTYPE html> <html lang="en-US"> <head> @@ -23,6 +22,9 @@ <li> <a href="static/recipes/overview.html">Recipes</a> </li> + <li> + <a href="static/rock-paper-scissors.html">Rock Paper Scissors</a> + </li> </ul> </nav> diff --git a/scripts/rps.js b/scripts/rps.js new file mode 100644 index 0000000..c1c1b9b --- /dev/null +++ b/scripts/rps.js @@ -0,0 +1,81 @@ +let compChoice = {Value: ""}; +let playerChoice; +let compChoiceInt; +let playerChoiceInt; +const buttons = document.querySelectorAll('.btn'); + +let playerScore = 0; +let compScore = 0; + +const player = document.querySelector("#player-score"); +player.textContent = `player score: ${playerScore}`; + +const computer = document.querySelector("#comp-score"); +computer.textContent = `computer score: ${compScore}`; + +const output = document.querySelector("#output"); +output.textContent = "hopefully you're better then a machine ://"; + +buttons.forEach((button) => { button.addEventListener('click', () => { + + playerChoice = button.id; + if (playerChoice == "rock") playerChoiceInt = 0; + else if (playerChoice == "paper") playerChoiceInt = 1; + else if (playerChoice == "scissors") playerChoiceInt = 2; + compChoiceInt = getComputerChoice(compChoice); + playGame(); + }) + +}) + +function getRandomInt() { + return Math.floor(Math.random() *3); +} + +function getComputerChoice(compChoice) { + let choiceNum = getRandomInt(); + if (choiceNum == 0) compChoice.Value = "rock"; + else if (choiceNum == 1) compChoice.Value = "paper"; + else if (choiceNum == 2) compChoice.Value = "scissors"; + return choiceNum; +} + +function playRound(){ + let winArray = [[0, 2, 1], + [1, 0, 2], + [2, 1, 0]]; + let result = winArray[playerChoiceInt][compChoiceInt]; + if (result == 0){ + output.textContent = `its a tie! you chose ${playerChoice} and the computer chose ${compChoice.Value}`; + } + else if (result == 1){ + output.textContent = `you won! you chose ${playerChoice} and the computer chose ${compChoice.Value}`; + playerScore++; + + } + else if (result == 2){ + output.textContent = `you lost! you chose ${playerChoice} and the computer chose ${compChoice.Value}`; + compScore++; + } +} + +function playGame(){ + output.textContent = "choose rock, paper, or scissors"; + playRound(); + player.textContent = `player score: ${playerScore}`; + computer.textContent = `computer score: ${compScore}`; + if (playerScore == 5){ + output.textContent = "you won the game :3"; + playerScore = 0; + compScore = 0; + player.textContent = `player score: ${playerScore}`; + computer.textContent = `computer score: ${compScore}`; + } + else if (compScore == 5){ + output.textContent = "you lost the game :/ little looser bitch faggot" + playerScore = 0; + compScore = 0; + player.textContent = `player score: ${playerScore}`; + computer.textContent = `computer score: ${compScore}`; + } +} diff --git a/static/about.html b/static/about.html index aa8ed48..8522111 100644 --- a/static/about.html +++ b/static/about.html @@ -22,6 +22,9 @@ <li> <a href="./recipes/overview.html">Recipes</a> </li> + <li> + <a href="./rock-paper-scissors.html">Rock Paper Scissors</a> + </li> </ul> </nav> </header> diff --git a/static/recipes/omurice.html b/static/recipes/omurice.html index 2f00c83..69fc2a7 100644 --- a/static/recipes/omurice.html +++ b/static/recipes/omurice.html @@ -22,6 +22,9 @@ <li> <a href="./overview.html">Recipes</a> </li> + <li> + <a href="../rock-paper-scissors.html">Rock Paper Scissors</a> + </li> </ul> </nav> diff --git a/static/recipes/overview.html b/static/recipes/overview.html index 6ccf1c7..aa201eb 100644 --- a/static/recipes/overview.html +++ b/static/recipes/overview.html @@ -22,6 +22,9 @@ <li> <a href="./overview.html">Recipes</a> </li> + <li> + <a href="../rock-paper-scissors.html">Rock Paper Scissors</a> + </li> </ul> </nav> diff --git a/static/recipes/oyakodon.html b/static/recipes/oyakodon.html index a3e3ba4..50edbf0 100644 --- a/static/recipes/oyakodon.html +++ b/static/recipes/oyakodon.html @@ -22,6 +22,9 @@ <li> <a href="./overview.html">Recipes</a> </li> + <li> + <a href="../rock-paper-scissors.html">Rock Paper Scissors</a> + </li> </ul> </nav> diff --git a/static/recipes/pizza.html b/static/recipes/pizza.html index b503959..6d2deb3 100644 --- a/static/recipes/pizza.html +++ b/static/recipes/pizza.html @@ -22,6 +22,9 @@ <li> <a href="./overview.html">Recipes</a> </li> + <li> + <a href="../rock-paper-scissors.html">Rock Paper Scissors</a> + </li> </ul> </nav> diff --git a/static/rock-paper-scissors.html b/static/rock-paper-scissors.html new file mode 100644 index 0000000..3e80491 --- /dev/null +++ b/static/rock-paper-scissors.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html lang="en-US"> + +<head> + <title>Rock Paper Scissors</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=devide-width,initial-scale=1"> + <link rel="stylesheet" href="./style.css"> + <link rel="icon" type="image/x-icon" href="../images/favicon.ico" sizes="16x16"> +</head> + +<body> + <header> + <nav> + <ul> + <li> + <a href="../index.html">Home</a> + </li> + <li> + <a href="./about.html">About</a> + </li> + <li> + <a href="./recipes/overview.html">Recipes</a> + </li> + <li> + <a href="./rock-paper-scissors.html">Rock Paper Scissors</a> + </li> + </ul> + </nav> + </header> + + <div id="headerwrapper"> + <h1>Rock Paper Scissors</h1> + <h2>First to five Wins!</h2> + </div> + + <main> + <div class="wrapper-centered"> + <button class="btn" id="rock">rock</button> + <button class="btn" id="paper">paper</button> + <button class="btn" id="scissors">scissors</button> + + </div> + <div class="text-centered"> + <p id="player-score">player score:</p> + <p id="comp-score">computer score:</p> + + <p id="output">hopefully you're better than a machine ://</p> + </div> + </main> + + <footer> + <div class="wrapper-centered"> + <p>Bottom Text</p> + </div> + </footer> +</body> +<script src="../scripts/rps.js"></script> + +</html> diff --git a/static/style.css b/static/style.css index 2b3aef9..579e18d 100644 --- a/static/style.css +++ b/static/style.css @@ -121,3 +121,11 @@ img { div.flex-stack.top-gap { background-color: #a0a0a0; } + +.btn { + margin: 50px; + width: 200px; + height: 200px; + background-color: aliceblue; + outline: none +} |