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

SWIPING ON A MOBILE FONE OR touchscreen;)

Browse Source
This commit is contained in:
MrEidam
2024-08-10 15:41:09 +02:00
parent c0f11339fc
commit 6305cb0a0b
3 changed files with 67 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Games/2048/index.html
View File

@@ -11,11 +11,5 @@
<h1>2048</h1> <h1>2048</h1>
<h2>Score: <span id="score">0</span></h2> <h2>Score: <span id="score">0</span></h2>
<div id="board"></div> <div id="board"></div>
<article class="arrowBack">
<button class="arrows" onclick="left()"><img src="" alt="Left Arrow"></button>
<button class="arrows" onclick="up()"><img src="" alt="Up Arrow"></button>
<button class="arrows" onclick="down()"><img src="" alt="Down Arrow"></button>
<button class="arrows" onclick="right()"><img src="" alt="Right Arrow"></button>
</article>
</body> </body>
</html> </html>

101
Games/2048/main.js
View File

@@ -2,12 +2,13 @@ var board;
var score = 0; var score = 0;
var rows = 4; var rows = 4;
var columns = 4; var columns = 4;
let startX, startY, endX, endY;
window.onload = function() { window.onload = function(){
setGame(); setGame();
} }
function setGame() { function setGame(){
board = [ board = [
[0,0,0,0], [0,0,0,0],
@@ -36,13 +37,13 @@ function setGame() {
setTwo(); setTwo();
} }
function updateTile(tile, num) { function updateTile(tile, num){
tile.innerText=""; tile.innerText="";
tile.classList.value=""; //clear the classList tile.classList.value=""; //clear the classList
tile.classList.add("tile"); tile.classList.add("tile");
if(num>0) { if(num>0) {
tile.innerText=num.toString(); tile.innerText=num.toString();
if(num<=4096) { if(num<=4096){
tile.classList.add("x"+num.toString()); tile.classList.add("x"+num.toString());
}else{ }else{
tile.classList.add("x8192"); tile.classList.add("x8192");
@@ -54,11 +55,11 @@ 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
} }
function slide(row) { function slide(row){
//[0, 2, 2, 2] //[0, 2, 2, 2]
row = filterZero(row); //[2, 2, 2] row = filterZero(row); //[2, 2, 2]
for (let i = 0; i < row.length-1; i++){ for(let i = 0; i < row.length-1; i++){
if (row[i] == row[i+1]) { if(row[i] == row[i+1]){
row[i] *= 2; row[i] *= 2;
row[i+1] = 0; row[i+1] = 0;
score += row[i]; score += row[i];
@@ -66,14 +67,14 @@ function slide(row) {
} //[4, 0, 2] } //[4, 0, 2]
row = filterZero(row); //[4, 2] row = filterZero(row); //[4, 2]
//add zeroes //add zeroes
while (row.length < columns) { while(row.length < columns){
row.push(0); row.push(0);
} //[4, 2, 0, 0] } //[4, 2, 0, 0]
return row; return row;
} }
document.addEventListener('keyup', (e) => { document.addEventListener('keyup', (e) => {
switch (e.code) { switch(e.code){
case "ArrowLeft": slideLeft(); setTwo(); break; case "ArrowLeft": slideLeft(); setTwo(); break;
case "ArrowRight": slideRight(); setTwo(); break; case "ArrowRight": slideRight(); setTwo(); break;
case "ArrowUp": slideUp(); setTwo(); break; case "ArrowUp": slideUp(); setTwo(); break;
@@ -82,12 +83,12 @@ document.addEventListener('keyup', (e) => {
document.getElementById("score").innerText = score; document.getElementById("score").innerText = score;
}); });
function slideLeft() { function slideLeft(){
for (let r = 0; r < rows; r++) { for(let r = 0; r < rows; r++){
let row = board[r]; let row = board[r];
row = slide(row); row = slide(row);
board[r] = row; board[r] = row;
for (let c = 0; c < columns; c++){ for(let c = 0; c < columns; c++){
let tile = document.getElementById(r.toString() + "-" + c.toString()); let tile = document.getElementById(r.toString() + "-" + c.toString());
let num = board[r][c]; let num = board[r][c];
updateTile(tile, num); updateTile(tile, num);
@@ -95,13 +96,13 @@ function slideLeft() {
} }
} }
function slideRight() { function slideRight(){
for (let r = 0; r < rows; r++) { for(let r = 0; r < rows; r++){
let row = board[r]; //[0, 2, 2, 2] let row = board[r]; //[0, 2, 2, 2]
row.reverse(); //[2, 2, 2, 0] row.reverse(); //[2, 2, 2, 0]
row = slide(row) //[4, 2, 0, 0] row = slide(row) //[4, 2, 0, 0]
board[r] = row.reverse(); //[0, 0, 2, 4]; board[r] = row.reverse(); //[0, 0, 2, 4];
for (let c = 0; c < columns; c++){ for(let c = 0; c < columns; c++){
let tile = document.getElementById(r.toString() + "-" + c.toString()); let tile = document.getElementById(r.toString() + "-" + c.toString());
let num = board[r][c]; let num = board[r][c];
updateTile(tile, num); updateTile(tile, num);
@@ -109,15 +110,15 @@ function slideRight() {
} }
} }
function slideUp() { function slideUp(){
for (let c = 0; c < columns; c++) { for(let c = 0; c < columns; c++){
let row = [board[0][c], board[1][c], board[2][c], board[3][c]]; let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
row = slide(row); row = slide(row);
// board[0][c] = row[0]; // board[0][c] = row[0];
// board[1][c] = row[1]; // board[1][c] = row[1];
// board[2][c] = row[2]; // board[2][c] = row[2];
// board[3][c] = row[3]; // board[3][c] = row[3];
for (let r = 0; r < rows; r++){ for(let r = 0; r < rows; r++){
board[r][c] = row[r]; board[r][c] = row[r];
let tile = document.getElementById(r.toString() + "-" + c.toString()); let tile = document.getElementById(r.toString() + "-" + c.toString());
let num = board[r][c]; let num = board[r][c];
@@ -126,8 +127,8 @@ function slideUp() {
} }
} }
function slideDown() { function slideDown(){
for (let c = 0; c < columns; c++) { for(let c = 0; c < columns; c++){
let row = [board[0][c], board[1][c], board[2][c], board[3][c]]; let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
row.reverse(); row.reverse();
row = slide(row); row = slide(row);
@@ -136,7 +137,7 @@ function slideDown() {
// board[1][c] = row[1]; // board[1][c] = row[1];
// board[2][c] = row[2]; // board[2][c] = row[2];
// board[3][c] = row[3]; // board[3][c] = row[3];
for (let r = 0; r < rows; r++){ for(let r = 0; r < rows; r++){
board[r][c] = row[r]; board[r][c] = row[r];
let tile = document.getElementById(r.toString() + "-" + c.toString()); let tile = document.getElementById(r.toString() + "-" + c.toString());
let num = board[r][c]; let num = board[r][c];
@@ -145,16 +146,16 @@ function slideDown() {
} }
} }
function setTwo() { function setTwo(){
if (!hasEmptyTile()) { if(!hasEmptyTile()){
return; return;
} }
let found = false; let found = false;
while (!found) { while(!found){
//find random row and column to place a 2 in //find random row and column to place a 2 in
let r = Math.floor(Math.random() * rows); let r = Math.floor(Math.random() * rows);
let c = Math.floor(Math.random() * columns); let c = Math.floor(Math.random() * columns);
if (board[r][c] == 0) { if(board[r][c] == 0){
board[r][c] = 2; board[r][c] = 2;
let tile = document.getElementById(r.toString() + "-" + c.toString()); let tile = document.getElementById(r.toString() + "-" + c.toString());
tile.innerText = "2"; tile.innerText = "2";
@@ -165,7 +166,7 @@ function setTwo() {
} }
} }
function hasEmptyTile() { function hasEmptyTile(){
let count = 0; let count = 0;
for (let r = 0; r < rows; r++) { for (let r = 0; r < rows; r++) {
for (let c = 0; c < columns; c++) { for (let c = 0; c < columns; c++) {
@@ -177,26 +178,42 @@ function hasEmptyTile() {
return false; return false;
} }
function left(){ document.addEventListener('touchstart', function(e){
slideLeft(); startX = e.touches[0].clientX;
setTwo(); startY = e.touches[0].clientY;
document.getElementById("score").innerText = score; }, {passive: true});
}
function up(){ document.addEventListener('touchend', function(e){
slideUp(); endX = e.changedTouches[0].clientX;
setTwo(); endY = e.changedTouches[0].clientY;
document.getElementById("score").innerText = score; handleSwipe();
} }, {passive: true});
function down(){ function handleSwipe(){
slideDown(); let diffX = endX - startX;
setTwo(); let diffY = endY - startY;
document.getElementById("score").innerText = score;
}
function right(){ if(Math.abs(diffX)==Math.abs(diffY)){
console.log('Dot :3');
}else if(Math.abs(diffX) > Math.abs(diffY)){ //- Horizontal swipe
if(diffX > 0){ //? Right
slideRight(); slideRight();
setTwo(); setTwo();
document.getElementById("score").innerText = score; document.getElementById("score").innerText = score;
}else{ //? Left
slideLeft();
setTwo();
document.getElementById("score").innerText = score;
}
}else{ //- Vertical swipe
if(diffY > 0){ //? Down
slideDown();
setTwo();
document.getElementById("score").innerText = score;
}else{ //? Up
slideUp();
setTwo();
document.getElementById("score").innerText = score;
}
}
} }

39
Games/2048/style.css
View File

@@ -19,10 +19,6 @@ body{
background-size: cover; background-size: cover;
} }
hr{
width: 500px;
}
#board{ #board{
width: 372px; width: 372px;
height: 372px; height: 372px;
@@ -35,7 +31,7 @@ hr{
flex-wrap: wrap; flex-wrap: wrap;
} }
.tile { .tile{
position: relative; position: relative;
width: 90px; width: 90px;
@@ -52,36 +48,19 @@ hr{
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out; /* Add smooth transitions */ transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out; /* Add smooth transitions */
} }
.tile.new-tile { .tile.new-tile{
animation: pop 0.2s ease-in-out; animation: pop 0.2s ease-in-out;
} }
@keyframes pop { @keyframes pop{
0% { 0%{
transform: scale(0.5); transform: scale(0.5);
} }
100% { 100%{
transform: scale(1); transform: scale(1);
} }
} }
.arrowBack{
height: 90px;
width: 372px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 1rem;
}
.arrows{
height: 90px;
width: 90px;
border: none;
border-radius: 50%;
}
@media screen and (max-width: 500px){ @media screen and (max-width: 500px){
body{ body{
background-image: url("./mobile.jpg"); background-image: url("./mobile.jpg");
@@ -96,14 +75,6 @@ hr{
width: 60px; width: 60px;
border: 3px solid #bbada0; border: 3px solid #bbada0;
} }
.arrowBack{
height: 60px;
width: 246px;
}
.arrows{
height: 60px;
width: 60px;
}
} }
.x2{ .x2{