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> </head>
<body> <body>
<h1>2048</h1> <h1>2048</h1>
<hr>
<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>

20
Games/2048/main.js
View File

@@ -187,3 +187,23 @@ function hasEmptyTile() {
} }
return false; 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; font-family: Arial, Helvetica, sans-serif;
text-align: center; 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{ hr{
@@ -8,8 +24,8 @@ hr{
} }
#board{ #board{
width: 400px; width: 372px;
height: 400px; height: 372px;
background: #cdc1d5; background: #cdc1d5;
border: 6px solid #bbada0; border: 6px solid #bbada0;
@@ -31,6 +47,46 @@ hr{
align-items: center; 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{ .x2{
background: #eee4da; background: #eee4da;
color: #757371; color: #757371;

BIN
Games/QuessNumber-1D6/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 B

BIN
Games/QuessNumber-1D6/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 B

BIN
Games/QuessNumber-1D6/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 B

BIN
Games/QuessNumber-1D6/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 B

BIN
Games/QuessNumber-1D6/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

BIN
Games/QuessNumber-1D6/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 B

31
Games/QuessNumber-1D6/index.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="./icon.png" type="image/x-icon">
<title>Quess Number 1D6</title>
</head>
<body>
<h1>Guess The Number!</h1>
<h3>You are: <span id="answear"></span></h3>
<img src="./6.png" alt="" id="dice">
<div class="ques">
<p>Quess: </p>
<select id="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<button onclick="roll()">Roll<br>the<br>Dice!</button>
<script src="main.js"></script>
</body>
</html>

17
Games/QuessNumber-1D6/main.js Normal file
View File

@@ -0,0 +1,17 @@
const dice = document.querySelector('#dice'); //img
let answear = document.querySelector('#answear'); //text ans
let number = document.querySelector('#num'); //num selec
function roll(){
let newDice = Math.floor(Math.random()*6);
console.log(newDice);
dice.src = `./${newDice+1}.png`;
if(number.value == newDice+1){
answear.innerHTML = `<p class='won'>Correct! +10 coins</p>`;
}else{
answear.innerHTML = `<p class='lose'>Wrong!</p>`
}
}

51
Games/QuessNumber-1D6/style.css Normal file
View File

@@ -0,0 +1,51 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: #333;
color: #fff;
text-align: center;
}
img{
width: 100px;
height: 100px;
margin: 1.25rem;
}
.ques{
display: flex;
flex-direction: row;
}
.ques p{
margin-right: .5rem;
}
.ques select{
border: none;
border-radius: 7px;
}
button{
text-transform: uppercase;
height: 69px;
width: 69px;
margin-top: 1rem;
border-radius: 10px;
border: none;
}
.won{
color: lime;/*
text-transform: uppercase;*/
}
.lose{
color: red;/*
text-transform: uppercase;*/
}

BIN
Games/RockPaperScissors/Invis.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 B

10
Games/RockPaperScissors/index.html
View File

@@ -4,15 +4,17 @@
<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">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="./icon.png" type="image/x-icon">
<script src="main.js"></script> <script src="main.js"></script>
<title>Rock Paper Scisors</title> <title>Rock Paper Scisors</title>
</head> </head>
<body> <body>
<h1 id="opponent-score">0</h1> <h1 id="opponent-score">0</h1>
<img id="opponent-choice" draggable="false"> <article class="choiBACK">
<br> <img src="Invis.png" class="choices" id="opponent-choice" draggable="false">
<img id="your-choice" draggable="false"> <img src="Invis.png" class="choices" id="your-choice" draggable="false">
<div id="choices"></div> </article>
<div id="choices" draggable="false"></div>
<h1 id="your-score">0</h1> <h1 id="your-score">0</h1>
</body> </body>
</html> </html>

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

43
Games/RockPaperScissors/style.css
View File

@@ -16,6 +16,11 @@ body{
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
color: #fff; color: #fff;
background-image: url('./pc.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: 0s;
} }
img{ img{
@@ -27,16 +32,12 @@ h1{
filter: drop-shadow(1.5px 1.5px 6px #aaa); filter: drop-shadow(1.5px 1.5px 6px #aaa);
} }
#opponent-choice{ #opponent-choice{
width: 240px;
height: 240px;
/*background: #fcda45;*/ /*background: #fcda45;*/
margin-top: 10px; margin-top: /*1*/0px;
} }
#your-choice{ #your-choice{
width: 240px;
height: 240px;
/*background: #4fdc5e;*/ /*background: #4fdc5e;*/
margin-top: 10px; margin-top: 20px;
} }
#choices{ #choices{
width: 240px; width: 240px;
@@ -50,3 +51,33 @@ h1{
width: 80px; width: 80px;
height: 80px; height: 80px;
} }
.choiBACK{
padding: 2rem;
display: flex;
flex-direction: column;
backdrop-filter: blur(5px);
border-radius: 50px;
box-shadow:
inset 10px 10px 20px #fff,
10px 10px 20px #333;
}
.choices{
width: 240px;
height: 240px;
border-radius: 25px;
}
@media screen and (max-width: 500px){
body{
background-image: url("./mobile.jpg");
}
.choices{
width: 180px;
height: 180px;
}
.choiBACK{
}
}