From 84c2fb5368987c877fe6ff68e1ac65f69cb90520 Mon Sep 17 00:00:00 2001 From: Yash Mittal Date: Wed, 10 Jan 2024 01:55:01 +0530 Subject: [PATCH] added colors and scores with transition --- JavascriptProjects/2048Game/index.html | 41 +++++++++++-------- JavascriptProjects/2048Game/script.js | 56 +++++++++++--------------- JavascriptProjects/2048Game/styles.css | 29 +++++++++---- 3 files changed, 70 insertions(+), 56 deletions(-) diff --git a/JavascriptProjects/2048Game/index.html b/JavascriptProjects/2048Game/index.html index 44dd7684..2c98c23a 100644 --- a/JavascriptProjects/2048Game/index.html +++ b/JavascriptProjects/2048Game/index.html @@ -7,24 +7,31 @@ 2048 Game -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
score :
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diff --git a/JavascriptProjects/2048Game/script.js b/JavascriptProjects/2048Game/script.js index b4109e6f..761b5673 100644 --- 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 index 6c342cf2..d3e69d51 100644 --- 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 {