From 24c66beac30efd230916c90e83ded5aa7928b4fd Mon Sep 17 00:00:00 2001 From: Yashkumar Vaishnav Date: Tue, 7 Feb 2023 16:11:05 +0530 Subject: [PATCH] Created Rock,Paper and Scissord game --- RPS/app.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++ RPS/index.html | 45 +++++++++++++++++++++++++++++++++++++++ RPS/style.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 156 insertions(+) create mode 100644 RPS/app.js create mode 100644 RPS/index.html create mode 100644 RPS/style.css diff --git a/RPS/app.js b/RPS/app.js new file mode 100644 index 0000000..6394361 --- /dev/null +++ b/RPS/app.js @@ -0,0 +1,54 @@ +const rock_button = document.querySelector(".rock"); +const paper_button = document.querySelector(".paper"); +const scissors_button = document.querySelector(".scissor"); +const result_text = document.getElementById("result_text"); +const user_win_count = document.getElementById("p-count"); +const computer_win_count = document.getElementById("c-count"); +let computer_score = 0; +let player_score = 0; + +rock_button.addEventListener("click", function () { + start_game("rock"); + +}); +paper_button.addEventListener("click", function () { + start_game("paper"); + +}); +scissors_button.addEventListener("click", function () { + start_game("scissors"); + +}); + +computer_selection = () => { + computer_options = ["rock", "paper", "scissors"]; + computer_number = Math.floor(Math.random() * 3); + computer_choice = computer_options[computer_number]; + return computer_choice; +}; + +start_game = (user_choice) => { + const comp_choice = computer_selection(); + + if (user_choice == comp_choice) { + result_text.textContent = "It's Draw"; + } else if ( + (user_choice == "rock") & (comp_choice == "scissors") || + (user_choice == "paper") & (comp_choice == "rock") || + (user_choice == "scissors") & (comp_choice == "paper") + ) { + player_score++; + user_win_count.innerText = player_score; + result_text.textContent = "You Win"; + + } else if ( + (user_choice == "rock") & (comp_choice == "paper") || + (user_choice == "paper") & (comp_choice == "scissors") || + (user_choice == "scissors") & (comp_choice == "rock") + ) { + computer_score++; + computer_win_count.innerText = computer_score; + result_text.textContent = "You Lose"; + + } +}; diff --git a/RPS/index.html b/RPS/index.html new file mode 100644 index 0000000..c934040 --- /dev/null +++ b/RPS/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + Rock Paper Scissor + + +
+
Rock Paper Scissor
+
+
+

Player

+

0

+
+
+

Computer

+

0

+
+
+ +
+

hello

+
+ +
Choose your move
+ + +
+ + + +
+ + + +
+ + + + diff --git a/RPS/style.css b/RPS/style.css new file mode 100644 index 0000000..7469a2a --- /dev/null +++ b/RPS/style.css @@ -0,0 +1,57 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} +.game{ + display: flex; + flex-direction: column; + height: 100vh; + width: 100vw; + justify-content: center; + align-items: center; +} + +.title{ + position: absolute; + top: 0; + font-size: 4rem; + z-index: 2; +} + +.score{ + display: flex; + width: 30vw; + justify-content: space-evenly; + position: absolute; + top: 70px; + z-index: 1; +} + +.p-count,.c-count{ + text-align: center; + font-size: 1.5rem; + margin-top: 1rem; +} + +.options{ + display: flex; + width: 50vw; + justify-content: space-evenly; + margin-top: 2rem; +} + +.rock, .paper, .scissor{ + padding: 0.8rem; + outline: none; + border: none; + cursor: pointer; + height: 100px; + font-size: 50px; + width: 100px; + border-radius: 50%; +} + +.result{ + font-size: 1.2rem; +} \ No newline at end of file