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>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<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){
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;
}
}

21
Games/2048/style.css
View File

@@ -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;