diff --git a/Games/2048/index.html b/Games/2048/index.html index ea28277..cd16cfe 100644 --- a/Games/2048/index.html +++ b/Games/2048/index.html @@ -9,6 +9,10 @@ 2048 +
+ +

Money: 0

+

Score: 0

diff --git a/Games/2048/main.js b/Games/2048/main.js index d6c26a6..6fec656 100644 --- a/Games/2048/main.js +++ b/Games/2048/main.js @@ -10,6 +10,25 @@ const rows = 4; const columns = 4; 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(){ if(loadBoard()){ setGame(); @@ -76,6 +95,7 @@ function slide(row){ row[i] *= 2; row[i+1] = 0; score += row[i]; + nft(row[i]); } } //[4, 0, 2] row = filterZero(row); //[4, 2] diff --git a/Games/2048/style.css b/Games/2048/style.css index 23e10f5..ea84151 100644 --- a/Games/2048/style.css +++ b/Games/2048/style.css @@ -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{ background: #eee4da; color: #757371; diff --git a/Games/DiceWar/index.html b/Games/DiceWar/index.html index 136f66b..c5a387f 100644 --- a/Games/DiceWar/index.html +++ b/Games/DiceWar/index.html @@ -10,25 +10,29 @@ Dice War +
+ +

Money: 0

+
- Enemy Dice - Enemy Dice - Enemy Dice - Enemy Dice - Enemy Dice + Enemy Dice + Enemy Dice + Enemy Dice + Enemy Dice + Enemy Dice

Enemy score: 0

Your score: 0

- Player Dice - Player Dice - Player Dice - Player Dice - Player Dice + Player Dice + Player Dice + Player Dice + Player Dice + Player Dice

Do you think that you have score then the Enemy?

diff --git a/Games/DiceWar/style.css b/Games/DiceWar/style.css index 33a4677..8968e6d 100644 --- a/Games/DiceWar/style.css +++ b/Games/DiceWar/style.css @@ -24,7 +24,7 @@ body{ background: #555; } -img{ +.dice{ width: 100px; height: 100px; margin: 1rem; @@ -52,7 +52,7 @@ button{ background: darkblue; color: #fff; } -img.pop{ +.dice.pop{ animation: pop 0.2s ease-in-out; } @@ -95,7 +95,7 @@ img.pop{ @media screen and (max-width: 500px){ - img{ + .dice{ width: 40px; height: 40px; margin: .60rem; @@ -104,4 +104,47 @@ img.pop{ .result{ 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; + } } \ No newline at end of file diff --git a/Games/RockPaperScissors/index.html b/Games/RockPaperScissors/index.html index d7028d7..e7bffce 100644 --- a/Games/RockPaperScissors/index.html +++ b/Games/RockPaperScissors/index.html @@ -9,6 +9,10 @@ Rock Paper Scisors +
+ +

Money: 0

+

0

diff --git a/Games/RockPaperScissors/style.css b/Games/RockPaperScissors/style.css index 6b2e6f0..2c2ee70 100644 --- a/Games/RockPaperScissors/style.css +++ b/Games/RockPaperScissors/style.css @@ -112,4 +112,48 @@ section{ width: 69px; 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; + } } \ No newline at end of file diff --git a/Games/idea.todo b/Games/idea.todo index d580aec..8988595 100644 --- a/Games/idea.todo +++ b/Games/idea.todo @@ -1,4 +1,6 @@ 5 dices - WAR, WAR NEVER CHANGES (Done 100%) + Without money to memory 6 dices - Counting (Done 0%) 1 dice - quess (Done 100%) - Without money \ No newline at end of file + Without money to memory +2048 - without money to mem \ No newline at end of file diff --git a/Games/index.html b/Games/index.html index 2f8b871..5bcdea1 100644 --- a/Games/index.html +++ b/Games/index.html @@ -9,6 +9,10 @@ Games +
+ +

Money: 0

+
diff --git a/Games/style.css b/Games/style.css index 890c6fa..19576b2 100644 --- a/Games/style.css +++ b/Games/style.css @@ -16,6 +16,27 @@ body{ 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{ z-index: 1; position: absolute;