diff --git a/assets/audio/rain.mp3 b/assets/audio/rain.mp3 new file mode 100644 index 0000000..a73d54c Binary files /dev/null and b/assets/audio/rain.mp3 differ diff --git a/assets/css/upgrades.css b/assets/css/upgrades.css index 9fc2b11..33bac9e 100644 --- a/assets/css/upgrades.css +++ b/assets/css/upgrades.css @@ -15,6 +15,56 @@ text-decoration: underline; } +#upg-emojis { + display: none; + position: absolute; + font-size: 2em; + animation: 5s emojis linear infinite; +} +@keyframes emojis { + 0% { + left: 0; + opacity: 0; + transform: rotate(0deg); + } + 100% { + left: 100%; + opacity: 1; + transform: rotate(360deg); + } +} + +#upg-music { + position: absolute; + top: 6rem; + left: 1rem; + opacity: 0.6; +} +#upg-music > img { + width: 2.5rem; + height: 2.5rem; +} + +#upg-mixer { + visibility: hidden; + display: flex; + gap: 0.6rem; + flex-direction: column; + position: absolute; + right: 1rem; + bottom: 1rem; +} +#upg-mixer > div { + display: flex; + align-items: center; + gap: 0.6rem; +} +#upg-mixer > div > img { + width: 2rem; + height: 2rem; + border-radius: 8px; +} + #upg-cuteface { visibility: hidden; position: absolute; diff --git a/assets/img/upgrades/mixer.png b/assets/img/upgrades/mixer.png new file mode 100644 index 0000000..82304b3 Binary files /dev/null and b/assets/img/upgrades/mixer.png differ diff --git a/index.html b/index.html index 263ce2b..060f23f 100644 --- a/index.html +++ b/index.html @@ -52,6 +52,20 @@ Reset progress +
😆
+ +
+ Mixer +
+ Rain + +
+
+ Old radio + +
+
+ Cuteface
@@ -69,12 +83,12 @@

Other

Programmed by Kirill Siukhin - - + +
diff --git a/js/game.js b/js/game.js index b43ca9d..e0fa327 100644 --- a/js/game.js +++ b/js/game.js @@ -1,5 +1,5 @@ let mood = 0; -let moodPerClick = 50; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION +let moodPerClick = 1; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION let purchasedUpgrades = []; const upgradesContainer = document.getElementById('upgrades'); @@ -11,7 +11,11 @@ const upgradeName = document.getElementById('upgrade-name'); const upgradeDesc = document.getElementById('upgrade-desc'); const upgradeCost = document.getElementById('upgrade-cost'); -const upgSavesReset = document.getElementById('upg-saves-reset'); +const rainRange = document.getElementById('rain-range'); +const musicRange = document.getElementById('music-range'); + +const audioMusic = new Audio('./assets/audio/mood_not_found.mp3'); +const audioRain = new Audio('./assets/audio/rain.mp3'); function updateMoodCounter() { moodCounter.innerText = mood; @@ -144,6 +148,8 @@ function resetProgress() { } function onResetProgressClick() { + const upgSavesReset = document.getElementById('upg-saves-reset'); + if (upgSavesReset.innerText === 'Reset progress') { upgSavesReset.innerText = 'Reset progress (are you sure?)'; } else { @@ -154,24 +160,62 @@ function onResetProgressClick() { // emojis function enableEmojis() { + const upgEmojis = document.getElementById('upg-emojis'); + upgEmojis.style.display = 'block'; + + const emojis = ['😎', '😆', '😛', '😏', '😔', '🥲', '😔', '😒', '😍', '😃', '🤓', '😊', '😁', '😄']; + var randomEmoji = emojis[Math.floor(Math.random() * emojis.length)]; + setInterval(() => { - mood += 250; + mood += 200; + upgEmojis.innerText = randomEmoji; updateMoodCounter(); }, 5000); } -// calm_music, rain +// rain -function enableAudio(name) { - const audio = new Audio('./assets/audio/' + name); +function enableRain() { + audioRain.play(); + audioRain.loop = true; setInterval(() => { - if (audio.paused) { - audio.play(); + if (audioRain.paused) { + audioRain.play(); + rainRange.value = audioRain.volume * 100; } }, 1000); } +// calm_music + +function enableMusic() { + audioMusic.play(); + audioMusic.loop = true; + + setInterval(() => { + if (audioMusic.paused) { + audioMusic.play(); + musicRange.value = audioMusic.volume * 100; + } + }, 1000); +} + +// mixer + +function enableMixer() { + const upgMixer = document.getElementById('upg-mixer'); + upgMixer.style.visibility = 'visible'; +} + +function rainRangeChange(value) { + audioRain.volume = value / 100; +} + +function musicRangeChange(value) { + audioMusic.volume = value / 100; +} + // cuteface function showCuteface() { @@ -208,33 +252,41 @@ let upgrades = [ { id: 'emojis', name: 'Emoji Thruster', - description: 'Let the emotions flyyyyyyy- +250mood/5s', + description: 'Let the emotions flyyyyyyy +200mood/5s', image: '../assets/img/upgrades/emojis.png', cost: 500, onPurchase: enableEmojis, }, - { - id: 'calm_music', - name: 'Old Radio', - description: 'Listen to the hand-made music', - image: '../assets/img/upgrades/calm_music.png', - cost: 1000, - onPurchase: () => enableAudio('mood_not_found.mp3'), - }, { id: 'rain', name: 'Rain', description: 'It\'s rainy outside...', image: '../assets/img/upgrades/rain.png', - cost: 5000, - onPurchase: () => {}, + cost: 1000, + onPurchase: enableRain, + }, + { + id: 'calm_music', + name: 'Old Radio', + description: 'Listen to the hand-made music', + image: '../assets/img/upgrades/calm_music.png', + cost: 1500, + onPurchase: enableMusic, + }, + { + id: 'mixer', + name: 'Mixer', + description: 'Control the sounds', + image: '../assets/img/upgrades/mixer.png', + cost: 3000, + onPurchase: enableMixer, }, { id: 'cuteface', name: 'Cuteface', description: 'A little bit... unusual background... no?..', image: '../assets/img/upgrades/cuteface.png', - cost: 1e4, + cost: 15000, onPurchase: showCuteface, }, {