added colors and scores with transition

yassmittal · Jan 9, 2024 · 84c2fb5 · 84c2fb5
1 parent 7b52295
commit 84c2fb5
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 56 deletions.
diff --git a/JavascriptProjects/2048Game/index.html b/JavascriptProjects/2048Game/index.html
@@ -7,24 +7,31 @@
     <title>2048 Game</title>
   </head>
   <body>
-    <div id="game-container">
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
-      <div class="tile"></div>
+    <div>
+      <div class="score-container">
+        <div>score :</div>
+        <div class="score"></div>
+      </div>
+      <div id="game-container">
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+        <div class="tile"></div>
+      </div>
     </div>
+
     <!-- <div class="transitionDiv">hi</div> -->
     <script src="script.js"></script>
   </body>

diff --git a/JavascriptProjects/2048Game/script.js b/JavascriptProjects/2048Game/script.js
@@ -1,6 +1,8 @@
 //Initilize the varialbes
 const gameContainer = document.querySelector("#game-container");
 const tiles = [...document.querySelectorAll(".tile")];
+const scoreEl = document.querySelector(".score");
+
 const body = document.querySelector("body");
 let boardArr = [
   ["", "", "", ""],
@@ -9,6 +11,7 @@ let boardArr = [
   ["", "", "", ""],
 ];
 
+let score = 0;
 let toRenderBg = {
   2: "#eee4da",
   4: "#ede0c8",
@@ -23,20 +26,6 @@ let toRenderBg = {
   2048: "#edc22e",
 };
 
-// let toRenderBg = {
-//   2: "red",
-//   4: "green",
-//   8: "blue",
-//   16: "skyblue",
-//   32: "#f67c5f",
-//   64: "#f65e3b",
-//   128: "#edcf72",
-//   256: "#edcc61",
-//   512: "#edc850",
-//   1024: "#edc53f",
-//   2048: "#edc22e",
-// };
-
 function convertVerticalToHorintalArr(arr) {
   const numRows = arr.length;
   const numCols = arr[0].length;
@@ -86,22 +75,17 @@ function renderBoardArr() {
   });
 
   tiles.forEach((tile, tileIndex) => {
-    console.log(toRenderArr[tileIndex]);
     let toRenderDiv = document.createElement("div");
     toRenderDiv.style.backgroundColor = toRenderBg[toRenderArr[tileIndex]];
+    toRenderDiv.classList.add("tile-content");
     toRenderDiv.textContent = toRenderArr[tileIndex];
-    toRenderDiv.style.width = "100%";
-    toRenderDiv.style.height = "100%";
-    toRenderDiv.style.display = "flex";
-    toRenderDiv.style.justifyContent = "center";
-    toRenderDiv.style.alignItems = "center";
-    toRenderDiv.style.borderRadius = "12px";
-
     tiles[tileIndex].replaceChildren(toRenderDiv);
-    console.log(toRenderDiv);
-    // tiles[tileIndex].textContent = toRenderArr[tileIndex];
   });
+
+  // runAllTransition(scoreEl);
+  scoreEl.textContent = score;
 }
+// runAllTransition(element);
 
 function change4By4ArrElToLineArrEl(arr, indexArr) {
   let number = indexArr[0] * arr.length + indexArr[1];
@@ -123,14 +107,19 @@ function moveElToLeftEnd(arr) {
 }
 
 function addEqualAdjacentNumber(arr) {
+  let addedBoxIndexArr = [];
   let newArr = [...arr];
   newArr.forEach((element, index) => {
     if (element != "" && element != null && element == newArr[index - 1]) {
       newArr[index] = +element + +newArr[index - 1];
       newArr[index - 1] = "";
+      addedBoxIndexArr.push(index - 1);
+      score += newArr[index];
+      runAllTransition(scoreEl);
     }
   });
 
+  // console.log(addedBoxIndexArr);
   return newArr;
 }
 
@@ -209,13 +198,10 @@ function renderRandomNumber(arr) {
   let randomIndexes = emptyElementIndexes[randomIndex];
   resultArr[randomIndexes[0]][randomIndexes[1]] = 2;
 
-  runTransition(tiles[change4By4ArrElToLineArrEl(resultArr, randomIndexes)]);
-
-  setTimeout(() => {
-    removeTransition(
-      tiles[change4By4ArrElToLineArrEl(resultArr, randomIndexes)]
-    );
-  }, 500);
+  let randomSelectedTile =
+    tiles[change4By4ArrElToLineArrEl(resultArr, randomIndexes)];
+  // console.log(randomSelectedTile);
+  runAllTransition(randomSelectedTile);
 }
 
 //Event listeners here
@@ -242,7 +228,6 @@ document.addEventListener("keydown", (e) => {
   }
 });
 
-console.log(body);
 body.addEventListener(
   "touchstart",
   function (event) {
@@ -298,6 +283,13 @@ function handleGesture() {
 
 //function for transition
 
+function runAllTransition(element) {
+  runTransition(element);
+  setTimeout(() => {
+    removeTransition(element);
+  }, 500);
+}
+
 function runTransition(element) {
   element.classList.add("bounced");
 }

diff --git a/JavascriptProjects/2048Game/styles.css b/JavascriptProjects/2048Game/styles.css
@@ -28,15 +28,30 @@ body {
   background-color: rgba(0, 0, 0, 0.04);
 }
 
-.transitionDiv {
-  background-color: red;
-  color: white;
-  border-radius: 50%;
-  padding: 4rem;
+.tile-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  z-index: 1;
+  position: relative;
 }
-div.bounced,
-.transitionDiv:hover {
+
+.score-container {
+  font-size: 24px;
+  font-weight: 600;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.bounced {
   animation: bounce 0.5s ease;
+  /* animation-delay: 5s; */
 }
 
 @keyframes bounce {