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

First Dice game; 2048 for mobile partialy; Shadows and custom background in rock paper scissors

Browse Source
This commit is contained in:
MrEidam
2024-08-09 00:05:18 +02:00
parent dc5bc86832
commit 5664a525db
19 changed files with 227 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Games/2048/index.html
View File

@@ -9,8 +9,13 @@
</head>
<body>
<h1>2048</h1>
<hr>
<h2>Score: <span id="score">0</span></h2>
<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>
</html>

20
Games/2048/main.js
View File

@@ -186,4 +186,24 @@ function hasEmptyTile() {
}
}
return false;
}
function left(){
slideLeft();
setTwo();
}
function up(){
slideUp();
setTwo();
}
function down(){
slideDown();
setTwo();
}
function right(){
slideRight();
setTwo();
}

BIN
Games/2048/mobile.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
Games/2048/pc.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

62
Games/2048/style.css
View File

@@ -1,6 +1,22 @@
body{
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
/*border: red 5px solid;*/
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background: #333;
background-image: url('./pc.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
hr{
@@ -8,8 +24,8 @@ hr{
}
#board{
width: 400px;
height: 400px;
width: 372px;
height: 372px;
background: #cdc1d5;
border: 6px solid #bbada0;
@@ -31,6 +47,46 @@ hr{
align-items: center;
}
.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){
body{
background-image: url("./mobile.jpg");
}
#board{
width: 246px;
height: 246px;
border: 3px solid #bbada0;
}
.tile{
height: 60px;
width: 60px;
border: 3px solid #bbada0;
}
.arrowBack{
height: 60px;
width: 246px;
}
.arrows{
height: 60px;
width: 60px;
}
}
.x2{
background: #eee4da;
color: #757371;