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

Number Quess 6 Renamed+designe; Dice war Optimilization for smaller screens

Browse Source
This commit is contained in:
MrEidam
2024-08-16 01:05:35 +02:00
parent 5b6c5d9431
commit c77c6ce00c
13 changed files with 198 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Games/DiceWar/style.css
View File

@@ -87,7 +87,7 @@ img.pop{
img{
width: 40px;
height: 40px;
margin: .75rem;
margin: .60rem;
border-radius: 5px;
}
.result{

BIN
Games/NumberQuess6/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 B

BIN
Games/NumberQuess6/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 B

BIN
Games/NumberQuess6/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 B

BIN
Games/NumberQuess6/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 B

BIN
Games/NumberQuess6/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

BIN
Games/NumberQuess6/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 B

31
Games/NumberQuess6/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>
<article class="gameBack">
<h1>Guess The Number!</h1>
<img src="./6.png" alt="" id="dice">
<div class="ques">
<h3 class="que">Quessing:</h3>
<select id="num">
<option class="ye" value="1">1</option>
<option class="ye" value="2">2</option>
<option class="ye" value="3">3</option>
<option class="ye" value="4">4</option>
<option class="ye" value="5">5</option>
<option class="ye" value="6">6</option>
</select>
</div>
<button onclick="roll()">Roll<br>the<br>Dice!</button>
</article>
<script src="main.js"></script>
</body>
</html>

37
Games/NumberQuess6/main.js Normal file
View File

@@ -0,0 +1,37 @@
const dice = document.querySelector('#dice'); //img
let answear = document.querySelector('#answear'); //text ans
let number = document.querySelector('#num'); //num selec
async function correct(){
let won = document.createElement('h1');
won.classList.add('result', 'won');
won.innerHTML = `Correct!<br> +10 coins`;
document.body.append(won);
setTimeout(() => {
won.remove();
}, 600);
}
async function wrong(){
let lost = document.createElement('h1');
lost.classList.add('result', 'lost');
lost.innerText = "Wrong!";
document.body.append(lost);
setTimeout(() => {
lost.remove();
}, 600);
}
function roll(){
let newDice = Math.floor(Math.random()*6);
console.log(newDice);
dice.src = `./${newDice+1}.png`;
if(number.value == newDice+1){
correct();
}else{
wrong();
}
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

128
Games/NumberQuess6/style.css Normal file
View File

@@ -0,0 +1,128 @@
*{
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;
background-image: url("./pc.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: #fff;
text-align: center;
}
img{
width: 100px;
height: 100px;
margin: 1.25rem;
border-radius: 15px;
filter: drop-shadow(1.5px 1.5px 6px #aaa);
}
h1{
filter: drop-shadow(1.5px 1.5px 3px #000);
}
.ques{
display: flex;
flex-direction: row;
}
.ques p{
margin-right: .5rem;
filter: drop-shadow(1.5px 1.5px 6px #333);
}
.ques select{
color: #fff;
border: none;
background: none;
border-radius: 7px;
backdrop-filter: blur(10px);
box-shadow:
inset 1.5px 1.5px 3px #fff,
10px 10px 20px #333;
}
.ye{
background: #333;
backdrop-filter: blur(10px);
}
button{
text-transform: uppercase;
height: 69px;
width: 69px;
margin-top: 1rem;
border-radius: 10px;
border: none;
background: none;
color: #fff;
text-shadow: 2px 2px 2.5px #333;
/*filter: drop-shadow(10px 10px 20px #333);*/
backdrop-filter: blur(10px);
box-shadow:
inset 2.5px 2.5px 5px #fff,
10px 10px 20px #333;
}
.que{
margin-right: 1rem;
}
.result{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(1.5px 1.5px 6px #000);
text-transform: uppercase;
font-size: 100px;
user-select: none;
}
.won{
color: #0f0;
animation: pop 0,5s ease-in-out;
transition: .5s;
}
.lost{
color: #f00;
animation: pop 0,5s ease-in-out;
transition: .5s;
}
@keyframes pop{
0%{
scale: 0.1;
}
100%{
scale: 1;
}
}
.gameBack{
padding: 1rem;
height: 400px;
width: 300px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
backdrop-filter: blur(5px);
border-radius: 50px;
box-shadow:
inset 10px 10px 20px #fff,
10px 10px 20px #333;
}
@media screen and (max-width: 500px){
body{
background-image: url("./mobile.jpg");
}
.result{
font-size: 45px;
}
}

2
Games/index.html
View File

@@ -8,7 +8,7 @@
<body>
<a href="./2048/">2048</a>
<a href="./RockPaperScissors/">RockPaperScissors</a>
<a href="./QuessNumber-1D6/">QuessNumber-1D6</a>
<a href="./NumberQuess6/">NumberQuess</a>
<a href="./DiceWar/">DiceWar</a>
</body>
</html>