thinkswell · PBJI · Oct 8, 2023 · Oct 8, 2023 · Oct 8, 2023
diff --git a/Dicegame/just-ctrlC-ctrlV/1.png b/Dicegame/just-ctrlC-ctrlV/1.png
diff --git a/Dicegame/just-ctrlC-ctrlV/2.png b/Dicegame/just-ctrlC-ctrlV/2.png
diff --git a/Dicegame/just-ctrlC-ctrlV/3.png b/Dicegame/just-ctrlC-ctrlV/3.png
diff --git a/Dicegame/just-ctrlC-ctrlV/4.png b/Dicegame/just-ctrlC-ctrlV/4.png
diff --git a/Dicegame/just-ctrlC-ctrlV/5.png b/Dicegame/just-ctrlC-ctrlV/5.png
diff --git a/Dicegame/just-ctrlC-ctrlV/6.png b/Dicegame/just-ctrlC-ctrlV/6.png
diff --git a/Dicegame/just-ctrlC-ctrlV/README.md b/Dicegame/just-ctrlC-ctrlV/README.md
@@ -0,0 +1,33 @@
+# Pig Game (JavaScript)
+
+Welcome to the Pig Game! This simple web-based game allows two players to take turns rolling dice and competing for victory. It's a fun and interactive way to challenge your luck and strategy as you aim to reach the target score.
+
+## Table of Contents
+
+- [Getting Started](#getting-started)
+- [Game Rules](#game-rules)
+- [How to Play](#how-to-play)
+- [Features](#features)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Getting Started
+
+To get started with the Pig Game, follow these simple steps:
+
+1. Clone the repository or download the source code to your local machine.
+2. Ensure you have a modern web browser installed (e.g., Chrome, Firefox, Edge).
+3. Open the `index.html` file in your web browser.
+
+Now you and a friend are ready to start playing the Pig Game!
+
+## Game Rules
+
+The rules of the Pig Game are easy to understand:
+
+- Two players take turns rolling a standard six-sided die.
+- On a player's turn, they can roll the die as many times as they like and accumulate points with each roll.
+- If a player rolls a 1, they lose all the points accumulated during that turn, and their turn ends.
+- The player can choose to "Hold" and add their turn's points to their total score to secure them.
+- The first player to reach the target score (default is 100 points) wins the game.
+- If a
diff --git a/Dicegame/just-ctrlC-ctrlV/dice1.png b/Dicegame/just-ctrlC-ctrlV/dice1.png
diff --git a/Dicegame/just-ctrlC-ctrlV/dice2.png b/Dicegame/just-ctrlC-ctrlV/dice2.png
diff --git a/Dicegame/just-ctrlC-ctrlV/hold.png b/Dicegame/just-ctrlC-ctrlV/hold.png
diff --git a/Dicegame/just-ctrlC-ctrlV/index.html b/Dicegame/just-ctrlC-ctrlV/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pig Game</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div id="container">
+      <div id="left">
+        <h1 id="playerHeading">PLAYER 1</h1>
+        <p class="mainScore" id="mainScorePlayer1">0</p>
+        <div id="wrapper">
+          <div class="current">Current</div>
+          <div class="currentScore" id="currentScorePlayer1">0</div>
+        </div>
+      </div>
+      <div id="middleButtons">
+        <div id="newGame">
+          <img src="retry.png" alt="error" style="width: 30px" /> New Game
+        </div>
+
+        <img src="5.png" id="diceFaces" alt="error" style="width: 100px" />
+
+        <div id="rollDice">
+          <img src="dice2.png" alt="error" style="width: 36px" /> Roll dice
+        </div>
+        <div id="hold">
+          <img src="hold.png" alt="error" style="width: 35px" /> Hold
+        </div>
+      </div>
+      <div id="right">
+        <h1 id="playerHeading">PLAYER 2</h1>
+        <p class="mainScore" id="mainScorePlayer2">0</p>
+        <div id="wrapper">
+          <div class="current">Current</div>
+          <div class="currentScore" id="currentScorePlayer2">0</div>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script src="jss.js" defer></script>
+</html>
diff --git a/Dicegame/just-ctrlC-ctrlV/jss.js b/Dicegame/just-ctrlC-ctrlV/jss.js
@@ -0,0 +1,103 @@
+`use strict`;
+
+const diceFaces = document.getElementById("diceFaces");
+const newGame = document.getElementById("newGame");
+const rollDice = document.getElementById("rollDice");
+const hold = document.getElementById("hold");
+
+const player1 = {
+  playerrStatusNo: "Player1",
+  name: "Justin",
+  mainScore: 0,
+  currentScore: 0,
+  status: "none",
+};
+const player2 = {
+  playerrStatusNo: "Player2",
+  name: "Angilina",
+  mainScore: 0,
+  currentScore: 0,
+  status: "none",
+};
+
+let activePlayer = player1; // setting player one as default player
+
+newGame.addEventListener("click", resetGame);
+rollDice.addEventListener("click", rolingOfTheDice);
+hold.addEventListener("click", holdingCurrentScore);
+
+function rolingOfTheDice() {
+  let diceFaceValue = Math.floor(Math.random() * 6 + 1);
+  console.log(diceFaceValue);
+  diceFaces.src = `${diceFaceValue}.png`;
+  diceFaces.style.opacity = 1;
+
+  calcCurrentScore(diceFaceValue);
+
+  if (diceFaceValue == 1) {
+    switchActivePlayer();
+  }
+}
+
+//caculation of current score
+function calcCurrentScore(diceFaceValue) {
+  if (diceFaceValue != 1) {
+    activePlayer.currentScore =
+      activePlayer.currentScore + Number(diceFaceValue);
+
+    document.getElementById(
+      `currentScore${activePlayer.playerrStatusNo}`
+    ).innerHTML = activePlayer.currentScore;
+  }
+}
+
+//hold Score function
+function holdingCurrentScore() {
+  activePlayer.mainScore = activePlayer.mainScore + activePlayer.currentScore;
+  document.getElementById(
+    `mainScore${activePlayer.playerrStatusNo}`
+  ).innerHTML = activePlayer.mainScore;
+  if (activePlayer.mainScore >= 100) {
+    activePlayer.status = "win";
+    resetGame();
+    return 0;
+  }
+  console.log(activePlayer);
+  switchActivePlayer();
+}
+//switching Active player Function
+function switchActivePlayer() {
+  activePlayer.currentScore = 0; //setting current score=0;
+  document.getElementById(`currentScorePlayer2`).innerHTML = "0";
+  document.getElementById(`currentScorePlayer1`).innerHTML = "0";
+
+  if (activePlayer == player1) {
+    activePlayer = player2;
+    // document.getElementById("left").style.opacity = "0.586";
+    // document.getElementById("right").style.opacity = "0.205";
+
+    // console.log(activePlayer);
+    return 0;
+  }
+
+  if (activePlayer == player2) {
+    activePlayer = player1;
+    // document.getElementById("right").style.opacity = "0.586";
+    // document.getElementById("left").style.opacity = "0.205";
+    // console.log(activePlayer);
+    return 1;
+  }
+}
+
+//reset Game  Function
+function resetGame() {
+  player1.mainScore = 0;
+  player1.currentScore = 0;
+  player1.status = "none";
+  player2.mainScore = 0;
+  player2.currentScore = 0;
+  player2.status = "none";
+  activePlayer = player1;
+  document.getElementById(`mainScorePlayer1`).innerHTML = 0;
+  document.getElementById(`mainScorePlayer2`).innerHTML = 0;
+}
diff --git a/Dicegame/just-ctrlC-ctrlV/nature.jpg b/Dicegame/just-ctrlC-ctrlV/nature.jpg
diff --git a/Dicegame/just-ctrlC-ctrlV/retry.png b/Dicegame/just-ctrlC-ctrlV/retry.png
diff --git a/Dicegame/just-ctrlC-ctrlV/stars.png b/Dicegame/just-ctrlC-ctrlV/stars.png
diff --git a/Dicegame/just-ctrlC-ctrlV/style.css b/Dicegame/just-ctrlC-ctrlV/style.css
@@ -0,0 +1,155 @@
+@import url("https://fonts.googleapis.com/css2?family=Aboreto&family=DynaPuff&display=swap");
+html {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0px 0px 0px 0px;
+  height: 100vh;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: linear-gradient(to right, #8e2de2, #4a00e0);
+}
+
+#container {
+  display: flex;
+  width: 70%;
+  min-width: 40%;
+  height: 70%;
+  border-radius: 10px;
+  box-shadow: 0px 0px 20px rgb(244, 0, 228);
+}
+
+#left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 50%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.586);
+  border-radius: 10px 0px 0px 10px;
+}
+#middleButtons {
+  /* margin-left: -100px; */
+  width: 20%;
+  height: 100%;
+  margin-top: 30px;
+  margin-left: -10%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#right {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: -10%;
+  width: 50%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.205);
+  border-radius: 0px 10px 10px 0px;
+}
+
+#playerHeading {
+  display: flex;
+  margin-top: 15%;
+  color: rgb(255, 255, 255);
+  font: 300% "DynaPuff";
+  text-shadow: 0px 0px 10px black;
+}
+
+#newGame {
+  display: flex;
+  font: 14px "Aboreto";
+  font-weight: 1000;
+  padding: 10px;
+  border-radius: 20px;
+  background-color: rgba(255, 255, 255, 0.555);
+  color: rgb(0, 0, 0);
+  gap: 5px;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+}
+#newGame:hover {
+  cursor: pointer;
+}
+#rollDice:hover {
+  cursor: pointer;
+}
+#hold:hover {
+  cursor: pointer;
+}
+#rollDice {
+  margin-top: 20%;
+  display: flex;
+  font: 14px "Aboreto";
+  font-weight: 1000;
+  padding: 10px;
+  border-radius: 20px;
+  background-color: rgba(255, 255, 255, 0.555);
+  color: rgb(0, 0, 0);
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  z-index: 1;
+  /* -webkit-user-select: none; */
+}
+#hold {
+  margin-top: 30%;
+  display: flex;
+  font: 14px "Aboreto";
+  font-weight: 1000;
+  padding: 10px;
+  border-radius: 20px;
+  background-color: rgba(255, 255, 255, 0.555);
+  color: rgb(0, 0, 0);
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  z-index: 1;
+}
+.mainScore {
+  margin-top: 0px;
+  font: 50px "Aboreto";
+  color: #2b19d1;
+}
+.currentScore {
+  display: flex;
+  margin-top: 30px;
+  font: 20px "Aboreto";
+  color: white;
+  font-weight: 1000;
+  display: flex;
+}
+.current {
+  font: 20px "Aboreto";
+  color: white;
+  font-weight: 1000;
+  display: flex;
+}
+#wrapper {
+  margin-top: 20px;
+  border: 2px solid;
+  width: 180px;
+  border-radius: 10px;
+  background-image: radial-gradient(
+    circle farthest-corner at 22.4% 21.7%,
+    rgba(4, 189, 228, 1) 0%,
+    rgba(2, 83, 185, 1) 100.2%
+  );
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+}
+#diceFaces {
+  display: flex;
+  margin-top: 25%;
+  opacity: 0;
+  border-radius: 10px;
+}