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

Added money display everywhere + 2048 'makes' money

Browse Source
This commit is contained in:
MrEidam
2024-09-02 00:51:46 +02:00
parent 94038d4f6c
commit c110a916f3
10 changed files with 204 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Games/2048/index.html
View File

@@ -9,6 +9,10 @@
<title>2048</title> <title>2048</title>
</head> </head>
<body> <body>
<article class="cash">
<img src="../money.png" style="height: 1rem;">
<p>Money: <span id="money">0</span></p>
</article>
<h1>Score: <span id="score">0</span></h1> <h1>Score: <span id="score">0</span></h1>
<div id="board"></div> <div id="board"></div>
<button id="reset" onclick="reset()"></button> <button id="reset" onclick="reset()"></button>

20
Games/2048/main.js
View File

@@ -10,6 +10,25 @@ const rows = 4;
const columns = 4; const columns = 4;
let startX, startY, endX, endY; let startX, startY, endX, endY;
let money = 0;
async function display(){
let moneyDisplay = document.querySelector('#money');
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();
}, 150);
}
window.onload = function(){ window.onload = function(){
if(loadBoard()){ if(loadBoard()){
setGame(); setGame();
@@ -76,6 +95,7 @@ function slide(row){
row[i] *= 2; row[i] *= 2;
row[i+1] = 0; row[i+1] = 0;
score += row[i]; score += row[i];
nft(row[i]);
} }
} //[4, 0, 2] } //[4, 0, 2]
row = filterZero(row); //[4, 2] row = filterZero(row); //[4, 2]

44
Games/2048/style.css
View File

@@ -97,6 +97,50 @@ body{
} }
} }
.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;
color: #fff;
}
.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;
}
}
.x2{ .x2{
background: #eee4da; background: #eee4da;
color: #757371; color: #757371;

24
Games/DiceWar/index.html
View File

@@ -10,25 +10,29 @@
<title>Dice War</title> <title>Dice War</title>
</head> </head>
<body> <body>
<article class="cash">
<img src="../money.png" style="height: 1rem;">
<p>Money: <span id="money">0</span></p>
</article>
<article> <article>
<div style="--clr: #cd2525;"> <div style="--clr: #cd2525;">
<section> <section>
<img src="./Dices/7.png" alt="Enemy Dice" id="enDice1"> <img src="./Dices/7.png" alt="Enemy Dice" id="enDice1" class="dice">
<img src="./Dices/7.png" alt="Enemy Dice" id="enDice2"> <img src="./Dices/7.png" alt="Enemy Dice" id="enDice2" class="dice">
<img src="./Dices/7.png" alt="Enemy Dice" id="enDice3"> <img src="./Dices/7.png" alt="Enemy Dice" id="enDice3" class="dice">
<img src="./Dices/7.png" alt="Enemy Dice" id="enDice4"> <img src="./Dices/7.png" alt="Enemy Dice" id="enDice4" class="dice">
<img src="./Dices/7.png" alt="Enemy Dice" id="enDice5"> <img src="./Dices/7.png" alt="Enemy Dice" id="enDice5" class="dice">
</section> </section>
<h2>Enemy score: <span id="enemyScore">0</span></h2> <h2>Enemy score: <span id="enemyScore">0</span></h2>
</div> </div>
<div style="--clr: #2525cd;"> <div style="--clr: #2525cd;">
<h2>Your score: <span id="playerScore">0</span></h2> <h2>Your score: <span id="playerScore">0</span></h2>
<section> <section>
<img src="./Dices/7.png" alt="Player Dice" id="plDice1"> <img src="./Dices/7.png" alt="Player Dice" id="plDice1" class="dice">
<img src="./Dices/7.png" alt="Player Dice" id="plDice2"> <img src="./Dices/7.png" alt="Player Dice" id="plDice2" class="dice">
<img src="./Dices/7.png" alt="Player Dice" id="plDice3"> <img src="./Dices/7.png" alt="Player Dice" id="plDice3" class="dice">
<img src="./Dices/7.png" alt="Player Dice" id="plDice4"> <img src="./Dices/7.png" alt="Player Dice" id="plDice4" class="dice">
<img src="./Dices/7.png" alt="Player Dice" id="plDice5"> <img src="./Dices/7.png" alt="Player Dice" id="plDice5" class="dice">
</section> </section>
<main> <main>
<h3>Do you think that you have <select id="choice"><option value="1">more</option><option value="2">less</option></select> score then the Enemy?</h3> <h3>Do you think that you have <select id="choice"><option value="1">more</option><option value="2">less</option></select> score then the Enemy?</h3>

49
Games/DiceWar/style.css
View File

@@ -24,7 +24,7 @@ body{
background: #555; background: #555;
} }
img{ .dice{
width: 100px; width: 100px;
height: 100px; height: 100px;
margin: 1rem; margin: 1rem;
@@ -52,7 +52,7 @@ button{
background: darkblue; background: darkblue;
color: #fff; color: #fff;
} }
img.pop{ .dice.pop{
animation: pop 0.2s ease-in-out; animation: pop 0.2s ease-in-out;
} }
@@ -95,7 +95,7 @@ img.pop{
@media screen and (max-width: 500px){ @media screen and (max-width: 500px){
img{ .dice{
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: .60rem; margin: .60rem;
@@ -105,3 +105,46 @@ img.pop{
font-size: 69px; font-size: 69px;
} }
} }
.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;
}
}

4
Games/RockPaperScissors/index.html
View File

@@ -9,6 +9,10 @@
<title>Rock Paper Scisors</title> <title>Rock Paper Scisors</title>
</head> </head>
<body> <body>
<article class="cash">
<img src="../money.png" style="height: 1rem;">
<p>Money: <span id="money">0</span></p>
</article>
<h1 id="opponent-score">0</h1> <h1 id="opponent-score">0</h1>
<section> <section>
<article class="choiBACK"> <article class="choiBACK">

44
Games/RockPaperScissors/style.css
View File

@@ -113,3 +113,47 @@ section{
aspect-ratio: 1; aspect-ratio: 1;
} }
} }
.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;
filter: none;
}
.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;
}
}

4
Games/idea.todo
View File

@@ -1,4 +1,6 @@
5 dices - WAR, WAR NEVER CHANGES (Done 100%) 5 dices - WAR, WAR NEVER CHANGES (Done 100%)
Without money to memory
6 dices - Counting (Done 0%) 6 dices - Counting (Done 0%)
1 dice - quess (Done 100%) 1 dice - quess (Done 100%)
Without money Without money to memory
2048 - without money to mem

4
Games/index.html
View File

@@ -9,6 +9,10 @@
<title>Games</title> <title>Games</title>
</head> </head>
<body> <body>
<article class="cash">
<img src="./money.png" style="height: 1rem;">
<p>Money: <span id="money">0</span></p>
</article>
<div id="blob"></div> <div id="blob"></div>
<div id="blur"></div> <div id="blur"></div>
<script src="main.js"></script> <script src="main.js"></script>

21
Games/style.css
View File

@@ -16,6 +16,27 @@ body{
overflow: hidden; overflow: hidden;
} }
.cash{
z-index: 69;
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;
color: #fff;
}
.cash img{
margin-right: .5rem;
aspect-ratio: 1/1;
object-fit: contain;
}
#blob{ #blob{
z-index: 1; z-index: 1;
position: absolute; position: absolute;