From c0f11339fc6d997c446b31f878c581c662b40058 Mon Sep 17 00:00:00 2001 From: MrEidam Date: Sat, 10 Aug 2024 00:21:07 +0200 Subject: [PATCH] 2048 animations --- Games/2048/index.html | 2 +- Games/2048/main.js | 31 ++++++++++--------------------- Games/2048/style.css | 21 ++++++++++++++++++++- 3 files changed, 31 insertions(+), 23 deletions(-) diff --git a/Games/2048/index.html b/Games/2048/index.html index 2a5ed7e..a304f30 100644 --- a/Games/2048/index.html +++ b/Games/2048/index.html @@ -1,5 +1,5 @@ - + diff --git a/Games/2048/main.js b/Games/2048/main.js index 9dfc650..375aeaa 100644 --- a/Games/2048/main.js +++ b/Games/2048/main.js @@ -50,27 +50,6 @@ function updateTile(tile, num) { } } -document.addEventListener('keyup', (e) => { - if (e.code == "ArrowLeft") { - slideLeft(); - setTwo(); - } - else if (e.code == "ArrowRight") { - slideRight(); - setTwo(); - } - else if (e.code == "ArrowUp") { - slideUp(); - setTwo(); - - } - else if (e.code == "ArrowDown") { - slideDown(); - setTwo(); - } - document.getElementById("score").innerText = score; -}); - function filterZero(row){ return row.filter(num => num != 0); //cteare a new array without 0 } @@ -93,6 +72,15 @@ function slide(row) { return row; } +document.addEventListener('keyup', (e) => { + switch (e.code) { + case "ArrowLeft": slideLeft(); setTwo(); break; + case "ArrowRight": slideRight(); setTwo(); break; + case "ArrowUp": slideUp(); setTwo(); break; + case "ArrowDown": slideDown(); setTwo(); break; + } + document.getElementById("score").innerText = score; +}); function slideLeft() { for (let r = 0; r < rows; r++) { @@ -171,6 +159,7 @@ function setTwo() { let tile = document.getElementById(r.toString() + "-" + c.toString()); tile.innerText = "2"; tile.classList.add("x2"); + tile.classList.add("new-tile"); found = true; } } diff --git a/Games/2048/style.css b/Games/2048/style.css index 2a9abd7..236938b 100644 --- a/Games/2048/style.css +++ b/Games/2048/style.css @@ -35,18 +35,37 @@ hr{ flex-wrap: wrap; } -.tile{ +.tile { + position: relative; + width: 90px; height: 90px; border: 5px solid #bbada0; font-size: 40px; font-weight: bold; + display: flex; justify-content: center; align-items: center; + + transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out; /* Add smooth transitions */ } +.tile.new-tile { + animation: pop 0.2s ease-in-out; +} + +@keyframes pop { + 0% { + transform: scale(0.5); + } + 100% { + transform: scale(1); + } +} + + .arrowBack{ height: 90px; width: 372px;