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

NQ6 is now 'earning' money

Browse Source
This commit is contained in:
MrEidam
2024-09-01 23:57:28 +02:00
parent ddad696f4f
commit 94038d4f6c
4 changed files with 68 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Games/NumberQuess6/index.html
View File

@@ -10,6 +10,10 @@
<title>Quess Number 1D6</title>
</head>
<body>
<article class="cash">
<img src="../money.png" style="height: 1rem;">
<p>Money: <span id="money">0</span></p>
</article>
<article class="gameBack">
<h1>Guess The Number!</h1>
<img src="./6.png" alt="" id="dice">

20
Games/NumberQuess6/main.js
View File

@@ -2,11 +2,31 @@ const dice = document.querySelector('#dice'); //img
let answear = document.querySelector('#answear'); //text ans
let number = document.querySelector('#num'); //num selec
let moneyDisplay = document.querySelector('#money');
let money = 0;
async function display(){
moneyDisplay.innerHTML = money;
}
async function nft(amount){ //! MONEY POPPING
let dabloons = document.createElement('h4');
dabloons.classList.add('coins');
dabloons.innerHTML = `+${amount}`;
document.body.append(dabloons);
money += amount;
display();
setTimeout(() => {
dabloons.remove();
}, 500);
}
async function correct(){
let won = document.createElement('h1');
won.classList.add('result', 'won');
won.innerHTML = `Correct!<br> +10 coins`;
document.body.append(won);
nft(10);
setTimeout(() => {
won.remove();
}, 600);

45
Games/NumberQuess6/style.css
View File

@@ -28,7 +28,7 @@ body{
background: #555;
}
img{
#dice{
width: 100px;
height: 100px;
margin: 1.25rem;
@@ -135,4 +135,47 @@ button{
.result{
font-size: 45px;
}
}
.cash{
position: absolute;
left: 0;
top: 0;
background: #222222cc;
padding: .5rem;
border-radius: 0 0 1rem 0;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.cash img{
margin-right: .5rem;
aspect-ratio: 1/1;
object-fit: contain;
}
.coins{
position: absolute;
color: red;
z-index: 5;
user-select: none;
left: 135px;
top: 17px;
transform: translate(-50%, -50%);
animation: money .15s ease-in;
}
@keyframes money{
from{
transform: translate(-50%, -50%);
opacity: 1;
top: 17px;
}
to{
transform: translate(-50%, -50%);
opacity: 0;
top: -10px;
}
}