Initial commit

thekrabhishek · Sep 17, 2024 · d31e5e0 · d31e5e0
commit d31e5e0
Show file tree

Hide file tree

Showing 8 changed files with 189 additions and 0 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# Rock_Paper_Scissors
+ game
diff --git a/images/paper-emoji.png b/images/paper-emoji.png
diff --git a/images/rock-emoji.png b/images/rock-emoji.png
diff --git a/images/scissors-emoji.png b/images/scissors-emoji.png
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Rock Paper Scissors</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+  <div class="container">
+    <p class="title">Rock Paper Scissors</p>
+    <button onclick="
+      playGame('rock');
+    " class="move-button">
+      <img src="images/rock-emoji.png" class="move-icon">
+    </button>
+
+    <button onclick="
+      playGame('paper');
+    " class="move-button">
+      <img src="images/paper-emoji.png" class="move-icon">
+    </button>
+
+    <button onclick="
+      playGame('scissors');
+    " class="move-button">
+      <img src="images/scissors-emoji.png" class="move-icon">
+    </button>
+
+    <p class="js-result result"></p>
+    <p class="js-moves"></p>
+    <p class="js-score score"></p>
+
+    <button onclick="
+      score.wins = 0;
+      score.losses = 0;
+      score.ties = 0;
+      localStorage.removeItem('score');
+      updateScoreElement();
+    " class="reset-score-button">Reset Score</button>
+
+    <script src="script.js"></script>
+  </div>
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,82 @@
+let score = JSON.parse(localStorage.getItem('score')) || {
+  wins: 0,
+  losses: 0,
+  ties: 0
+};
+
+updateScoreElement();
+
+
+function playGame(playerMove) {
+  const computerMove = pickComputerMove();
+
+  let result = '';
+
+  if (playerMove === 'scissors') {
+    if (computerMove === 'rock') {
+      result = 'You lose.';
+    } else if (computerMove === 'paper') {
+      result = 'You win.';
+    } else if (computerMove === 'scissors') {
+      result = 'Tie.';
+    }
+
+  } else if (playerMove === 'paper') {
+    if (computerMove === 'rock') {
+      result = 'You win.';
+    } else if (computerMove === 'paper') {
+      result = 'Tie.';
+    } else if (computerMove === 'scissors') {
+      result = 'You lose.';
+    }
+
+  } else if (playerMove === 'rock') {
+    if (computerMove === 'rock') {
+      result = 'Tie.';
+    } else if (computerMove === 'paper') {
+      result = 'You lose.';
+    } else if (computerMove === 'scissors') {
+      result = 'You win.';
+    }
+  }
+
+  if (result === 'You win.') {
+    score.wins += 1;
+  } else if (result === 'You lose.') {
+    score.losses += 1;
+  } else if (result === 'Tie.') {
+    score.ties += 1;
+  }
+
+  localStorage.setItem('score', JSON.stringify(score));
+
+  updateScoreElement();
+
+  document.querySelector('.js-result').innerHTML = result;
+
+  document.querySelector('.js-moves').innerHTML = `You
+<img src="images/${playerMove}-emoji.png" class="move-icon">
+<img src="images/${computerMove}-emoji.png" class="move-icon">
+Computer`;
+}
+
+function updateScoreElement() {
+  document.querySelector('.js-score')
+    .innerHTML = `Wins: ${score.wins}, Losses: ${score.losses}, Ties: ${score.ties}`;
+}
+
+function pickComputerMove() {
+  const randomNumber = Math.random();
+
+  let computerMove = '';
+
+  if (randomNumber >= 0 && randomNumber < 1 / 3) {
+    computerMove = 'rock';
+  } else if (randomNumber >= 1 / 3 && randomNumber < 2 / 3) {
+    computerMove = 'paper';
+  } else if (randomNumber >= 2 / 3 && randomNumber < 1) {
+    computerMove = 'scissors';
+  }
+
+  return computerMove;
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,56 @@
+body {
+  background-color: rgb(25, 25, 25);
+  font-family: Arial;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  color: #333;    
+}
+.container {
+  max-width: 400px;
+  margin: 50px auto;
+  background-color: white;
+  padding: 30px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+}
+
+.title {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.move-icon {
+  height: 50px;
+}
+
+.move-button {
+  background-color: transparent;
+  border: 3px solid rgb(40, 39, 39);
+  width: 120px;
+  height: 120px;
+  border-radius: 60px;
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.result {
+  font-size: 25px;
+  font-weight: bold;
+  margin-top: 50px;
+}
+
+.score {
+  margin-top: 60px;
+}
+
+.reset-score-button {
+  background-color: rgb(25, 25, 25);
+  border: none;
+  font-size: 15px;
+  padding: 8px 15px;
+  cursor: pointer;
+  color: white;
+  border-radius: 34px;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Auto detect text files and perform LF normalization
		* text=auto