From c698883b44ff67f5d4184c45aa7099a86a0874c5 Mon Sep 17 00:00:00 2001 From: yuzu-eva Date: Tue, 21 Mar 2023 23:19:41 +0100 Subject: added a rock-paper-scissors game --- index.html | 4 +- scripts/rps.js | 81 +++++++++++++++++++++++++++++++++++++++++ static/about.html | 3 ++ static/recipes/omurice.html | 3 ++ static/recipes/overview.html | 3 ++ static/recipes/oyakodon.html | 3 ++ static/recipes/pizza.html | 3 ++ static/rock-paper-scissors.html | 60 ++++++++++++++++++++++++++++++ static/style.css | 8 ++++ 9 files changed, 167 insertions(+), 1 deletion(-) create mode 100644 scripts/rps.js create mode 100644 static/rock-paper-scissors.html diff --git a/index.html b/index.html index 8272a60..8d689b5 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,3 @@ - @@ -23,6 +22,9 @@
  • Recipes
    • +
  • + Rock Paper Scissors +
    • 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 @@
  • Recipes
    • +
  • + Rock Paper Scissors +
    • 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 @@
  • Recipes
    • +
  • + Rock Paper Scissors +
    • 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 @@
  • Recipes
    • +
  • + Rock Paper Scissors +
    • 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 @@
  • Recipes
    • +
  • + Rock Paper Scissors +
    • 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 @@
  • Recipes
    • +
  • + Rock Paper Scissors +
    • 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 @@ + + + + + Rock Paper Scissors + + + + + + + +
    + +
    + +
    +

    Rock Paper Scissors

    +

    First to five Wins!

    +
    + +
    +
    + + + + +
    +
    +

    player score:

    +

    computer score:

    + +

    hopefully you're better than a machine ://

    +
    +
    + + + + + + 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 +} -- cgit v1.2.3