From 8b8eed7ab7c76cc3ad5c0efe78e4917c988267f6 Mon Sep 17 00:00:00 2001 From: subhasish-roy Date: Sun, 22 Oct 2023 13:08:02 +0530 Subject: [PATCH] added rock-paper-scissors --- .../Rock-Paper-Scissors/README.md | 1 + .../Rock-Paper-Scissors/index.html | 40 ++++++++ Fronted Projects/Rock-Paper-Scissors/index.js | 93 ++++++++++++++++++ .../Rock-Paper-Scissors/style.css | 97 +++++++++++++++++++ 4 files changed, 231 insertions(+) create mode 100644 Fronted Projects/Rock-Paper-Scissors/README.md create mode 100644 Fronted Projects/Rock-Paper-Scissors/index.html create mode 100644 Fronted Projects/Rock-Paper-Scissors/index.js create mode 100644 Fronted Projects/Rock-Paper-Scissors/style.css diff --git a/Fronted Projects/Rock-Paper-Scissors/README.md b/Fronted Projects/Rock-Paper-Scissors/README.md new file mode 100644 index 00000000..763b81e6 --- /dev/null +++ b/Fronted Projects/Rock-Paper-Scissors/README.md @@ -0,0 +1 @@ +# I made a simple Rock-Paper-Scissors Game using HTML, CSS, JavaScript. It is a very beginner friendly project as the code written here is really easy to understand. You can have a look at the project... diff --git a/Fronted Projects/Rock-Paper-Scissors/index.html b/Fronted Projects/Rock-Paper-Scissors/index.html new file mode 100644 index 00000000..cfae5524 --- /dev/null +++ b/Fronted Projects/Rock-Paper-Scissors/index.html @@ -0,0 +1,40 @@ + + + + + + Document + + + + +
Rock Paper Scissors Game
+ + +
Choose your Move:
+ + +
+ + + + + +
+ + +
+

+
+ +
+ Your Score: + 0 + Computer Score: + 0 +
+ + + + + \ No newline at end of file diff --git a/Fronted Projects/Rock-Paper-Scissors/index.js b/Fronted Projects/Rock-Paper-Scissors/index.js new file mode 100644 index 00000000..b374be9f --- /dev/null +++ b/Fronted Projects/Rock-Paper-Scissors/index.js @@ -0,0 +1,93 @@ +let userScore=0; +let compScore= 0; +const userScore_span=document.getElementById("user_score"); +const compScore_span=document.getElementById("comp_score"); +const scoreBoard_div=document.querySelector(".score_board"); +const result_p=document.querySelector(".result>p"); +const rock_div=document.getElementById("rock") +const paper_div=document.getElementById("paper") +const scissors_div=document.getElementById("scissors") + +function getComputerChoice(){ + const choices=['rock', 'paper', 'scissors']; + const randomNumber=(Math.floor(Math.random()* 3)); + return choices[randomNumber]; +} + +function convertToWord(letter){ + if(letter =="rock") return "Rock"; + if(letter =="paper") return "Paper"; + return "Scissors"; +} + +//here we are making a function where the user wins +function win(userChoice, compChoice){ + userScore++; + userScore_span.innerHTML = userScore; + compScore_span.innerHTML = compScore; + result_p.innerHTML = `${convertToWord(userChoice)} beats ${convertToWord(compChoice)}. You WIN! :)`; + +} + +//here we are making a fuction where the user loses +function lose(userChoice,compChoice){ + compScore++; + userScore_span.innerHTML = userScore; + compScore_span.innerHTML = compScore; + result_p.innerHTML = `${convertToWord(userChoice)} loses to ${convertToWord(compChoice)}. You LOST! :(`; + +} + +//here we are making a function where the user and the computer ties +function tie(userChoice,compChoice){ + result_p.innerHTML = `${convertToWord(userChoice)} equals ${convertToWord(compChoice)}. It's a DRAW!`; + +} + +function game(userChoice){ + const compChoice= getComputerChoice(); + + //here we are putting the winning conditions + switch(userChoice + compChoice){ + case "rockscissors": + case "paperrock": + case "scissorspaper": + win(userChoice, compChoice); + break; + + //here we are putting the losing conditions + case "rockpaper": + case "paperscissors": + case "scissorsrock": + lose(userChoice, compChoice); + break; + + //here we are putting the conditions for a draw + case "rockrock": + case "paperpaper": + case "scissorsscissors": + tie(userChoice, compChoice); + break; + } + +} + + + + +function main(){ + + + rock_div.addEventListener('click', function(){ + game("rock"); + }) + paper_div.addEventListener('click', function(){ + game("paper"); + }) + scissors_div.addEventListener('click', function(){ + game("scissors"); + }) + +} + +main(); \ No newline at end of file diff --git a/Fronted Projects/Rock-Paper-Scissors/style.css b/Fronted Projects/Rock-Paper-Scissors/style.css new file mode 100644 index 00000000..9f397e08 --- /dev/null +++ b/Fronted Projects/Rock-Paper-Scissors/style.css @@ -0,0 +1,97 @@ +body{ + background-color:rgb(117, 117, 198); + font-family:"Arial",sans-serif; + margin:0; + padding:0; +} + +#game_name{ + color: rgb(0, 0, 0); + font-weight: bold; + font-size: 3em; + text-align: center; + margin-top: 50px; +} + +#direction{ + color: rgb(0, 0, 0); + font-weight: bold; + font-size: 1.5em; + text-align: center; + margin-top: 20px; + margin-bottom: 20px; +} + +.choices{ + text-align: center; + margin-top: 20px; + display: flex; + justify-content: center; + flex-wrap: wrap; + +} + + + + +#rock{ + background-color:hsl(194, 86%, 67%); + font-size: 4rem; + margin: 0px 10px; + border-radius: 55%; + margin: 0px 10px; + + +} +#paper{ + background-color:hsl(114, 68%, 51%); + font-size: 4rem; + margin: 0px 10px; + border-radius: 55%; + + + +} +#scissors{ + background-color:hsl(0, 98%, 59%); + font-size: 4rem; + margin: 0px 10px; + border-radius: 55%; + margin: 0px 10px; + +} + +.score_board{ + text-align: center; + margin-top: 25px; + font-weight: bold; + font-size: 25px; + color: rgb(22, 21, 21); + margin-bottom: 50px; + +} + +.result{ + color: rgb(14, 14, 14); + font-weight: bold; + font-size: 1.9em; + text-align: center; + margin-top: 40px; + +} + +#user_score{ + color:rgb(8, 247, 44); + text-align: center; + margin-top: 25px; + font-weight: bold; + font-size: 25px; +} +#comp_score{ + color: rgb(165, 29, 29); + text-align: center; + margin-top: 25px; + font-weight: bold; + font-size: 25px; +} +