add main game

Author: nguyenkhoi2806

Projects/RockPaperScsissors/README.md

@@ -0,0 +1,36 @@
+# Rock Paper Scissors Game
+
+## Overview
+
+This is a simple Rock Paper Scissors game implemented in JavaScript, HTML, and CSS. The game allows a user to play against the computer by choosing between Rock, Paper, and Scissors. The winner is determined based on the classic rules of the game.
+
+## Features
+
+- User vs. Computer: Play the classic Rock Paper Scissors game against the computer.
+- Visual Feedback: The game provides visual feedback with images representing the player's and computer's choices.
+- Score Tracking: The game keeps track of the player's score, updating it based on wins and losses.
+  Responsive Design: The interface is designed to be responsive and accessible on various devices.
+
+## How to Play
+
+1 Open the game in a web browser.
+2 Click on one of the available choices: Rock, Paper, or Scissors.
+3 The computer randomly selects its choice.
+4 The winner is determined based on the game rules.
+5 The result is displayed along with an updated score.
+
+## Setup
+
+No special setup is required to run the game. Simply open the index.html file in a web browser.
+
+## Technologies Used
+
+- HTML
+- Tailwind CSS
+- JavaScript
+
+### Project Structure
+
+- index.html: The main HTML file containing the game structure.
+- style.css: The CSS file for styling the game.
+- main.js: The JavaScript file containing the game logic.

Projects/RockPaperScsissors/index.html

@@ -18,33 +18,66 @@
             <span class="font-bold text-4xl text-blue-400" id="score">0</span>
           </div>
         </div>
-        <div class="justify-center flex">
+        <div class="justify-center flex" id="game">
           <div
             class="relative bg-[url('./assets/svg/bg-triangle.svg')] h-[300px] w-[305px] bg-no-repeat bg-center"
           >
             <div
+              onclick="Main.play(PAPER)"
               class="bg-white absolute left-0 top-[-10%] rounded-full w-[100px] h-[100px] flex hover:shadow-[0_1px_20px_10px_#f8f8f8]"
             >
               <img src="./assets/svg/icon-paper.svg" class="m-auto" />
             </div>
             <div
+              onclick="Main.play(SCISSORS)"
               class="bg-white absolute right-0 top-[-10%] rounded-full w-[100px] h-[100px] flex hover:shadow-[0_1px_20px_10px_#f8f8f8]"
             >
               <img src="./assets/svg/icon-scissors.svg" class="m-auto" />
             </div>
             <div
+              onclick="Main.play(ROCK)"
               class="bg-white absolute left-[34%] bottom-0 rounded-full w-[100px] h-[100px] flex hover:shadow-[0_1px_20px_10px_#f8f8f8]"
             >
               <img src="./assets/svg/icon-rock.svg" class="m-auto" />
             </div>
           </div>
         </div>
-        <button
-          class="bg-white w-[100px] border-0 text-sky-500 rounded-lg m-auto pointer"
+        <div
+          class="flex justify-between w-[100%] md:w-[80%] m-auto hidden"
+          id="result"
         >
-          Reset game
-        </button>
+          <div class="flex-col flex gap-5 items-center">
+            <span class="text:xl md:text-2xl font-bold text-white"
+              >You picked</span
+            >
+            <div class="bg-white rounded-full w-[100px] h-[100px] flex">
+              <img class="m-auto" id="player" />
+            </div>
+          </div>
+          <div class="flex flex-col items-center gap-4">
+            <span
+              class="text:xl md:text-2xl font-bold text-white"
+              id="result-text"
+              >You win</span
+            >
+            <button
+              onclick="Main.playAgain()"
+              class="bg-white w-[100px] border-0 text-sky-500 rounded-lg pointer"
+            >
+              Play again
+            </button>
+          </div>
+          <div class="flex-col flex items-center gap-5">
+            <span class="text:xl md:text-2xl font-bold text-white"
+              >Computer pick</span
+            >
+            <div class="bg-white rounded-full w-[100px] h-[100px] flex">
+              <img id="computer" class="m-auto" />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </body>
+  <script src="./main.js"></script>
 </html>

Projects/RockPaperScsissors/main.js

@@ -0,0 +1,93 @@
+const PAPER = 1;
+const SCISSORS = 2;
+const ROCK = 3;
+
+const gameElements = {
+  resultHtml: document.getElementById("result"),
+  gameHtml: document.getElementById("game"),
+  playerHtml: document.getElementById("player"),
+  computerHtml: document.getElementById("computer"),
+  resultTextHtml: document.getElementById("result-text"),
+  scoreHtml: document.getElementById("score"),
+};
+
+const Main = {
+  score: 0,
+  player: null,
+  computer: null,
+  result: "",
+
+  play(type) {
+    console.log("ok");
+    this.computer = this.getRandomItem([PAPER, SCISSORS, ROCK]);
+    this.player = type;
+
+    this.updateImages(type, this.computer);
+    this.calculateResult();
+    this.displayResult();
+  },
+
+  getRandomItem(items) {
+    return items[Math.floor(Math.random() * items.length)];
+  },
+
+  updateImages(playerType, computerType) {
+    gameElements.playerHtml.src = `./assets/svg/icon-${this.getTypeName(
+      playerType
+    )}.svg`;
+    gameElements.computerHtml.src = `./assets/svg/icon-${this.getTypeName(
+      computerType
+    )}.svg`;
+  },
+
+  getTypeName(type) {
+    switch (type) {
+      case PAPER:
+        return "paper";
+      case SCISSORS:
+        return "scissors";
+      case ROCK:
+        return "rock";
+      default:
+        return "";
+    }
+  },
+
+  calculateResult() {
+    if (this.player === this.computer) {
+      this.result = "Draw";
+    } else if (
+      (this.player === PAPER && this.computer === ROCK) ||
+      (this.player === SCISSORS && this.computer === PAPER) ||
+      (this.player === ROCK && this.computer === SCISSORS)
+    ) {
+      this.result = "You win";
+      this.score++;
+    } else {
+      this.result = "You Lose";
+      this.score--;
+    }
+  },
+
+  displayResult() {
+    this.hideElement(gameElements.gameHtml);
+    this.showElement(gameElements.resultHtml);
+    gameElements.resultTextHtml.textContent = this.result;
+    gameElements.scoreHtml.textContent = this.score;
+  },
+
+  hideElement(element) {
+    element.classList.add("hidden");
+    element.classList.remove("block");
+  },
+
+  showElement(element) {
+    element.classList.remove("hidden");
+    element.classList.add("block");
+  },
+
+  playAgain() {
+    this.showElement(gameElements.gameHtml);
+    this.hideElement(gameElements.resultHtml);
+  },
+};