diff --git a/.glitch-assets b/.glitch-assets new file mode 100644 index 0000000..71d849a --- /dev/null +++ b/.glitch-assets @@ -0,0 +1,17 @@ +{"name":"paper-removebg-preview.png","date":"2021-12-15T22:39:04.543Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview.png","type":"image/png","size":28410,"imageWidth":287,"imageHeight":217,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview.png","thumbnailWidth":287,"thumbnailHeight":217,"uuid":"yNvSYfSXJszebF2e"} +{"name":"paper.jpg","date":"2021-12-15T22:39:22.546Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper.jpg","type":"image/jpeg","size":11943,"imageWidth":287,"imageHeight":217,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper.jpg","thumbnailWidth":287,"thumbnailHeight":217,"uuid":"vUCjKYBtYQpMwi7r"} +{"uuid":"vUCjKYBtYQpMwi7r","deleted":true} +{"name":"rock-removebg-preview.png","date":"2021-12-15T22:40:35.283Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/rock-removebg-preview.png","type":"image/png","size":18580,"imageWidth":207,"imageHeight":220,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/rock-removebg-preview.png","thumbnailWidth":207,"thumbnailHeight":220,"uuid":"7PkQoHXP2IkbcViZ"} +{"name":"Screenshot_2021-12-08_181708-removebg-preview (1).png","date":"2021-12-15T22:40:43.065Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/Screenshot_2021-12-08_181708-removebg-preview%20(1).png","type":"image/png","size":22995,"imageWidth":236,"imageHeight":182,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/Screenshot_2021-12-08_181708-removebg-preview%20(1).png","thumbnailWidth":236,"thumbnailHeight":182,"uuid":"yEpblEdvsWjfokyt"} +{"name":"download.png","date":"2021-12-15T22:42:39.362Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/download.png","type":"image/png","size":22153,"imageWidth":207,"imageHeight":220,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/download.png","thumbnailWidth":207,"thumbnailHeight":220,"uuid":"8vikUtqci0bj2tzB"} +{"name":"paper-removebg-preview (1).png","date":"2021-12-15T22:43:44.611Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview%20(1).png","type":"image/png","size":21576,"imageWidth":287,"imageHeight":217,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview%20(1).png","thumbnailWidth":287,"thumbnailHeight":217,"uuid":"gbPC3NDrtyaGJZcn"} +{"uuid":"gbPC3NDrtyaGJZcn","deleted":true} +{"name":"paper-removebg-preview__1_-removebg-preview.png","date":"2021-12-15T22:44:00.299Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview__1_-removebg-preview.png","type":"image/png","size":22752,"imageWidth":287,"imageHeight":217,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/paper-removebg-preview__1_-removebg-preview.png","thumbnailWidth":287,"thumbnailHeight":217,"uuid":"nosqiEuBxet8iWzb"} +{"uuid":"8vikUtqci0bj2tzB","deleted":true} +{"name":"rock-removebg-preview__1_-removebg-preview.png","date":"2021-12-15T22:45:55.384Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/rock-removebg-preview__1_-removebg-preview.png","type":"image/png","size":15433,"imageWidth":206,"imageHeight":220,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/rock-removebg-preview__1_-removebg-preview.png","thumbnailWidth":206,"thumbnailHeight":220,"uuid":"VIsfnVhb0TeT1v50"} +{"name":"Screenshot_2021-12-08_181708-removebg-preview__1_-removebg-preview.png","date":"2021-12-15T22:48:17.402Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/Screenshot_2021-12-08_181708-removebg-preview__1_-removebg-preview.png","type":"image/png","size":19011,"imageWidth":236,"imageHeight":182,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/Screenshot_2021-12-08_181708-removebg-preview__1_-removebg-preview.png","thumbnailWidth":236,"thumbnailHeight":182,"uuid":"atiNLgfYfFqOOVOj"} +{"name":"download-removebg-preview.png","date":"2021-12-15T22:49:22.696Z","url":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/download-removebg-preview.png","type":"image/png","size":15313,"imageWidth":206,"imageHeight":220,"thumbnail":"https://cdn.glitch.me/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/download-removebg-preview.png","thumbnailWidth":206,"thumbnailHeight":220,"uuid":"BtFyFvcffe1e6m8X"} +{"uuid":"7PkQoHXP2IkbcViZ","deleted":true} +{"name":"images.jpg","date":"2022-01-05T23:01:59.601Z","url":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/images.jpg","type":"image/jpeg","size":1266,"imageWidth":262,"imageHeight":192,"thumbnail":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/images.jpg","thumbnailWidth":262,"thumbnailHeight":192,"uuid":"3TTNY4QUWOwJQbij"} +{"name":"High_resolution_wallpaper_background_ID_77700451514-692x376.jpg","date":"2022-01-05T23:05:13.382Z","url":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/High_resolution_wallpaper_background_ID_77700451514-692x376.jpg","type":"image/jpeg","size":11821,"imageWidth":692,"imageHeight":376,"thumbnail":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/thumbnails%2FHigh_resolution_wallpaper_background_ID_77700451514-692x376.jpg","thumbnailWidth":330,"thumbnailHeight":180,"uuid":"nL5A6nwgkeqhp7kM"} +{"name":"xF4zkp.jpg","date":"2022-01-05T23:13:01.520Z","url":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/xF4zkp.jpg","type":"image/jpeg","size":499661,"imageWidth":1680,"imageHeight":1050,"thumbnail":"https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/thumbnails%2FxF4zkp.jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"OBGDLJsCCgm9it0p"} diff --git a/README.md b/README.md index f108acf..8773dd5 100644 --- a/README.md +++ b/README.md @@ -15,78 +15,78 @@ In this unit, coders will create a Rock, Paper, Scissors game. The Rock, Paper, #### GitHub Set-Up - [x] Go to the repository at https://github.com/itscodenation/rockpaperscissors -- [ ] Fork this repository to your Github account and import to a new workspace -- [ ] Link and commit your changes -- [ ] Make your site live on GitHub Pages +- [x] Fork this repository to your Github account and import to a new workspace +- [x] Link and commit your changes +- [x] Make your site live on GitHub Pages #### Code Walkthrough -- [ ] Read through the starter code given so you understand how the HTML is organized +- [x] Read through the starter code given so you understand how the HTML is organized ### Day 1 Goal 2: Capture user input and display it to the screen -- [ ] Add a click handler that saves the value of the user's input to a variable -- [ ] Display the user input value on the screen, in the user choice location +- [x] Add a click handler that saves the value of the user's input to a variable +- [x] Display the user input value on the screen, in the user choice location #### Wrap -- [ ] Commit your changes! +- [x] Commit your changes! ## Day 2 ### Day 2 Goal 1: Generate a new random number every time the user clicks the button -- [ ] Outside of your click handler, declare a randomNumber variable and set it equal to 0 -- [ ] In your click handler, generate a random number and assign it to the randomNumber variable +- [x] Outside of your click handler, declare a randomNumber variable and set it equal to 0 +- [x] In your click handler, generate a random number and assign it to the randomNumber variable ### Day 2 Goal 2: Display the random number to the screen -- [ ] Display the randomNumber value on the screen, in the computer choice location +- [x] Display the randomNumber value on the screen, in the computer choice location #### Wrap -- [ ] Commit your changes! +- [x] Commit your changes! ## Day 3 ### Day 3 Goal 1: Assign different computer choices depending on the random number -- [ ] Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to a computerChoice variable -- [ ] Update the computer choice location so it displays the computerChoice to the screen +- [x] Write a conditional statement which, given the number range of randomNumber, assigns ‘rock’, ‘paper’ or ‘scissors’ to a computerChoice variable +- [x] Update the computer choice location so it displays the computerChoice to the screen ### Day 3 Goal 2: Increase user experience (BONUS!) -- [ ] Test for edge cases by ensuring that a result appears if the user does not type an acceptable input +- [x] Test for edge cases by ensuring that a result appears if the user does not type an acceptable input ## Day 4 ### Day 4 Goal 1: Compare the user choice and computer choice to determine a winner -- [ ] Write a compound conditional statement that compares the userChoice to the computerChoice -- [ ] Declare a variable to save the winner of the game -- [ ] Display the winner to the screen in the result div +- [x] Write a compound conditional statement that compares the userChoice to the computerChoice +- [x] Declare a variable to save the winner of the game +- [x] Display the winner to the screen in the result div ### Day 4 Goal 2: Increase user experience (BONUS!) -- [ ] Test that your game performs correctly in case of a tie -- [ ] Clear the input value once a result is displayed so your game is ready to play again +- [x] Test that your game performs correctly in case of a tie +- [x] Clear the input value once a result is displayed so your game is ready to play again #### Wrap -- [ ] Commit your changes! +- [x] Commit your changes! #### Day 5 ### Day 5 Goal 1: Create a function to handle your computer choice logic -- [ ] Write a function called getRandomComputerChoice that does not accept any parameters and returns computerChoice -- [ ] Move your `Math.random` inside your function -- [ ] Move your conditional logic that determines the computer choice inside your function +- [x] Write a function called getRandomComputerChoice that does not accept any parameters and returns computerChoice +- [x] Move your `Math.random` inside your function +- [x] Move your conditional logic that determines the computer choice inside your function ### Day 5 Goal 2: Call your getRandomComputerChoice function -- [ ] Call your function inside your click handler so that it determines the value of your computerChoice variable - - [ ] HINT: Your getRandomComputerChoice function works correctly if it returns rock, paper, or scissors when called +- [x] Call your function inside your click handler so that it determines the value of your computerChoice variable +- [x] HINT: Your getRandomComputerChoice function works correctly if it returns rock, paper, or scissors when called #### Wrap diff --git a/css/style.css b/css/style.css index bc6701a..a242ebb 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,67 @@ .row { text-align: center; + font-family: 'Nanum Gothic', sans-serif; } .choices { display: flex; justify-content: space-between; } + +.userPaper { + display: none; + width: 200px; + height: 200px; +} + +.computerPaper { + display: none; + width: 200px; + height: 200px; +} + +.userScissor { + display: none; + width: 200px; + height: 200px; +} + +.computerScissor { + display: none; + width: 200px; + height: 200px; +} + +.userRock { + display: none; + width: 200px; + height: 200px; +} + +.computerRock { + display: none; + width: 200px; + height: 200px; +} + +body { + background: url("https://cdn.glitch.global/19eb4570-f75b-462d-a5e0-d2b8108fa4bf/High_resolution_wallpaper_background_ID_77700451514-692x376.jpg?v=1641423913382"); + background-size: cover; + background-repeat: no-repeat; +} + +html { + height: 100%; +} + + +@keyframes moveUpanDown { + 0% { +/* transform: translateY(where ever this is in pixels); */ + } + 50%{ +/* transform: translateY(whenever this goes down) ; */ + } + 100%{ +/* transform: translateY(goes back up to origin); */ + } +} \ No newline at end of file diff --git a/index.html b/index.html index 820e449..feeb4ad 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,9 @@ RPS Game + + + @@ -16,19 +19,45 @@

Please Submit Your Choice Below

- +
+ +

User Choice

+ + + + +

Computer Choice

+ + + +

+
+

+
+
+

+
+
+

+
+
+

+
+
+

+
diff --git a/js/script.js b/js/script.js index 8b13789..00f3bc9 100644 --- a/js/script.js +++ b/js/script.js @@ -1 +1,125 @@ +let totalWins = 0; +let totalTies = 0; +let totalLoses = 0; +let totalGames = 0; +function getRandomComputerChoice() { + let randomNumber = Math.floor(Math.random() * 3); + + let choice; + + if (randomNumber === 0) { + choice = "rock"; + } else if (randomNumber === 1) { + choice = "scissors"; + } else { + choice = "paper"; + } + + return choice; // value = "rock", "paper", "scissors" +} + +$(".clear").click(function () { + $(".input").val(""); + $(".userChoice").text(""); + $(".result").text(""); + $(".computerChoice").text(""); +}); + +function userChoice(user_choices) { + user_choices = $(".input").val(); + $(".userChoice").text(user_choices); + + user_choices = user_choices.toLowerCase(); + return user_choices; +} +function chooseWinner(user_choice, computer_choice) { + let result; + + if (user_choice === "rock") { + $(".userRock").show(); + $(".userScissor").hide(); + $(".userPaper").hide(); + } else if (user_choice === "paper") { + $(".userPaper").show(); + $(".userScissor").hide(); + $(".userRock").hide(); + } else { + $(".userScissor").show(); + $(".userPaper").hide(); + $(".userRock").hide(); + } + + if (computer_choice === "rock") { + $(".computerRock").show(); + $(".computerScissor").hide(); + $(".computerPaper").hide(); + } else if (computer_choice === "paper") { + $(".computerPaper").show(); + $(".computerScissor").hide(); + $(".computerRock").hide(); + } else { + $(".computerScissor").show(); + $(".computerRock").hide(); + $(".computerPaper").hide(); + } + + console.log(user_choice); + + $(".computerChoice").text(computer_choice); + // console.log(userChoice()); + + if (user_choice == "rock" && computer_choice == "scissors") { + result = "User Wins!"; + totalWins = totalWins + 1; + } else if (user_choice == "rock" && computer_choice == "rock") { + result = "You Tied, no one wins!"; + totalTies = totalTies + 1; + } else if (user_choice == "rock" && computer_choice == "paper") { + result = "You Lost, Computer Wins!"; + totalLoses = totalLoses + 1; + } else if (user_choice == "paper" && computer_choice == "rock") { + result = "User Wins!"; + totalWins = totalWins + 1; + } else if (user_choice == "paper" && computer_choice == "scissors") { + result = "You Lost, Computer Wins!"; + totalLoses = totalLoses + 1; + } else if (user_choice == "paper" && computer_choice == "paper") { + result = "You Tied, no one wins!"; + totalTies = totalTies + 1; + } else if (user_choice == "scissors" && computer_choice == "scissors") { + result = "You Tied, no one wins!"; + totalTies = totalTies + 1; + } else if (user_choice == "scissors" && computer_choice == "rock") { + result = "You Lost, Computer Wins!"; + totalLoses = totalLoses + 1; + } else if (user_choice == "scissors" && computer_choice == "paper") { + result = "User Wins!"; + totalWins = totalWins + 1; + } else { + $(".result").append(`

Your input is invalid, try again.

`); + } + + $(".result").text(result); + // use 'result' +} + +$(".play").click(function () { + // what ever this is.style.animation="moveUpandDown 3s linear infinite" + + let computer_choice = getRandomComputerChoice(); + + let user_choice = userChoice(); + + totalGames = totalGames + 1; + let winRate = totalWins / totalGames; + winRate = winRate.toFixed(2); + $(".ties").text("You have tied" + totalTies + "times"); + $(".loses").text("You have lost" + totalLoses + "times"); + $(".wins").text("You have won" + totalWins + "times"); + + $(".games").text("You have played" + totalGames + "times"); + $(".winRate").text("Your win rate is" + winRate + "percent"); + + chooseWinner(user_choice, computer_choice); +});