mirror of
https://github.com/MrEidam/PetPet.git
synced 2026-04-17 15:43:31 +00:00
2048 animations
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -36,17 +36,36 @@ hr{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
|
|||||||
Reference in New Issue
Block a user