Eidam/PetPet
1
0
Fork 0
mirror of https://github.com/MrEidam/PetPet.git synced 2026-04-17 15:43:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

2048 animations

Browse Source
This commit is contained in:
MrEidam
2024-08-10 00:21:07 +02:00
parent 3d817969ed
commit c0f11339fc
3 changed files with 31 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Games/2048/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

31
Games/2048/main.js
View File

@@ -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){ function filterZero(row){
return row.filter(num => num != 0); //cteare a new array without 0 return row.filter(num => num != 0); //cteare a new array without 0
} }
@@ -93,6 +72,15 @@ function slide(row) {
return 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() { function slideLeft() {
for (let r = 0; r < rows; r++) { for (let r = 0; r < rows; r++) {
@@ -171,6 +159,7 @@ function setTwo() {
let tile = document.getElementById(r.toString() + "-" + c.toString()); let tile = document.getElementById(r.toString() + "-" + c.toString());
tile.innerText = "2"; tile.innerText = "2";
tile.classList.add("x2"); tile.classList.add("x2");
tile.classList.add("new-tile");
found = true; found = true;
} }
} }

21
Games/2048/style.css
View File

@@ -35,18 +35,37 @@ hr{
flex-wrap: wrap; flex-wrap: wrap;
} }
.tile{ .tile {
position: relative;
width: 90px; width: 90px;
height: 90px; height: 90px;
border: 5px solid #bbada0; border: 5px solid #bbada0;
font-size: 40px; font-size: 40px;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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{ .arrowBack{
height: 90px; height: 90px;
width: 372px; width: 372px;