misterkirill/MoodClicker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add credits upgrade

Browse Source
This commit is contained in:
Kirill Siukhin 2025-06-20 02:50:20 +05:00
parent 0b9a141bc1
commit 3a30a74d3b
4 changed files with 80 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/global.css
View File

@ -41,7 +41,7 @@ a {
text-shadow: 2px 2px 15px rgba(var(--color-light), 0.9); text-shadow: 2px 2px 15px rgba(var(--color-light), 0.9);
} }
.back-btn { .btn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.2rem; gap: 0.2rem;
@ -56,7 +56,7 @@ a {
cursor: pointer; cursor: pointer;
transition: 0.1s background-color linear, 0.1s color linear; transition: 0.1s background-color linear, 0.1s color linear;
} }
.back-btn:hover { .btn:hover {
background-color: var(--color-light); background-color: var(--color-light);
color: var(--color-dark); color: var(--color-dark);
} }

40
assets/css/upgrades.css
View File

@ -26,3 +26,43 @@
opacity: 0.3; opacity: 0.3;
z-index: -5; z-index: -5;
} }
#upg-credits {
visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
background-color: var(--color-dark);
top: 0;
left: 0;
overflow: hidden;
}
.upg-credits-inner {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
width: 100%;
top: -85%;
left: 50%;
transform: translateX(-50%);
animation: 15s credits linear;
}
@keyframes credits {
0% {
top: 100%;
}
100% {
top: -85%;
}
}
.upg-credits-footer {
margin-top: 2rem;
text-align: center;
}
.upg-credits-inner > h2 {
margin-top: 2rem;
}

27
index.html
View File

@ -14,7 +14,7 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a href="https://misterkirill.com"> <a href="https://misterkirill.com">
<button class="back-btn"> <button class="btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-left-fill" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-left-fill" viewBox="0 0 16 16">
<path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/> <path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/>
</svg> </svg>
@ -54,6 +54,31 @@
<img src="./assets/img/bg/cuteface.png" alt="Cuteface" id="upg-cuteface"> <img src="./assets/img/bg/cuteface.png" alt="Cuteface" id="upg-cuteface">
<div id="upg-credits">
<div class="upg-credits-inner">
<h1 class="heading">Mood Clicker</h1>
<h2>Visuals</h2>
<p>Upgrade icons by <b>Kirill Siukhin</b></p>
<p>Cuteface by <b>realexa770</b></p>
<h2>Music</h2>
<p>Background music – "Mood Not Found" by <b>Kirill Siukhin</b></p>
<p>Rain FX by <b>Kirill Siukhin</b></p>
<h2>Other</h2>
<p>Programmed by <b>Kirill Siukhin</b></p>
<p><b>Time spent: 5 hours</b></p>
<button class="btn">Play again</button>
<div class="upg-credits-footer">
<p>Made with ❤️ by <a href="https://misterkirill.com" class="link">Mister Kirill</a></p>
<p>Thanks for playing!</p>
</div>
</div>
</div>
<script src="./js/game.js"></script> <script src="./js/game.js"></script>
</body> </body>
</html> </html>

17
js/game.js
View File

@ -151,9 +151,9 @@ function onResetProgressClick() {
function enableEmojis() { function enableEmojis() {
setInterval(() => { setInterval(() => {
mood += 500; mood += 250;
updateMoodCounter(); updateMoodCounter();
}, 10000); }, 5000);
} }
// calm_music, rain // calm_music, rain
@ -176,6 +176,13 @@ function showCuteface() {
document.body.style.backgroundColor = '#93560e'; document.body.style.backgroundColor = '#93560e';
} }
// credits
function showCredits() {
const credits = document.getElementById('upg-credits');
credits.style.visibility = 'visible';
}
let upgrades = [ let upgrades = [
{ {
@ -197,7 +204,7 @@ let upgrades = [
{ {
id: 'emojis', id: 'emojis',
name: 'Emoji Thruster', name: 'Emoji Thruster',
description: 'Let the emotions flyyyyyyy. +500mood/10s', description: 'Let the emotions flyyyyyyy- +250mood/5s',
image: '../assets/img/upgrades/emojis.png', image: '../assets/img/upgrades/emojis.png',
cost: 500, cost: 500,
onPurchase: enableEmojis, onPurchase: enableEmojis,
@ -231,8 +238,8 @@ let upgrades = [
name: 'Credits', name: 'Credits',
description: 'Congratulations!', description: 'Congratulations!',
image: '../assets/img/upgrades/credits.png', image: '../assets/img/upgrades/credits.png',
cost: 1e22, cost: 1,
onPurchase: () => {}, onPurchase: showCredits,
}, },
]; ];