feat: add credits upgrade
This commit is contained in:
parent
0b9a141bc1
commit
3a30a74d3b
@ -41,7 +41,7 @@ a {
|
||||
text-shadow: 2px 2px 15px rgba(var(--color-light), 0.9);
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
@ -56,7 +56,7 @@ a {
|
||||
cursor: pointer;
|
||||
transition: 0.1s background-color linear, 0.1s color linear;
|
||||
}
|
||||
.back-btn:hover {
|
||||
.btn:hover {
|
||||
background-color: var(--color-light);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
@ -26,3 +26,43 @@
|
||||
opacity: 0.3;
|
||||
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
27
index.html
@ -14,7 +14,7 @@
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<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">
|
||||
<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>
|
||||
@ -54,6 +54,31 @@
|
||||
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
17
js/game.js
17
js/game.js
@ -151,9 +151,9 @@ function onResetProgressClick() {
|
||||
|
||||
function enableEmojis() {
|
||||
setInterval(() => {
|
||||
mood += 500;
|
||||
mood += 250;
|
||||
updateMoodCounter();
|
||||
}, 10000);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// calm_music, rain
|
||||
@ -176,6 +176,13 @@ function showCuteface() {
|
||||
document.body.style.backgroundColor = '#93560e';
|
||||
}
|
||||
|
||||
// credits
|
||||
|
||||
function showCredits() {
|
||||
const credits = document.getElementById('upg-credits');
|
||||
credits.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
|
||||
let upgrades = [
|
||||
{
|
||||
@ -197,7 +204,7 @@ let upgrades = [
|
||||
{
|
||||
id: 'emojis',
|
||||
name: 'Emoji Thruster',
|
||||
description: 'Let the emotions flyyyyyyy. +500mood/10s',
|
||||
description: 'Let the emotions flyyyyyyy- +250mood/5s',
|
||||
image: '../assets/img/upgrades/emojis.png',
|
||||
cost: 500,
|
||||
onPurchase: enableEmojis,
|
||||
@ -231,8 +238,8 @@ let upgrades = [
|
||||
name: 'Credits',
|
||||
description: 'Congratulations!',
|
||||
image: '../assets/img/upgrades/credits.png',
|
||||
cost: 1e22,
|
||||
onPurchase: () => {},
|
||||
cost: 1,
|
||||
onPurchase: showCredits,
|
||||
},
|
||||
];
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user