diff --git a/assets/css/global.css b/assets/css/global.css index 6a2d874..04d9358 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -8,6 +8,7 @@ body { font-family: "Noto Sans", sans-serif; background-color: var(--color-dark); color: var(--color-light); + text-align: center; } a { @@ -42,6 +43,12 @@ a { text-shadow: 2px 2px 15px rgba(var(--color-light), 0.9); } +.small-text { + font-family: "Noto Sans", sans-serif; + font-weight: 400; + font-size: 0.25em; +} + .btn { display: flex; align-items: center; @@ -128,6 +135,7 @@ a { color: var(--color-dark); padding: 1rem; border-radius: 8px; + margin-bottom: 1rem; } .phone-only { diff --git a/assets/css/upgrades.css b/assets/css/upgrades.css index 7856ddf..733147c 100644 --- a/assets/css/upgrades.css +++ b/assets/css/upgrades.css @@ -30,7 +30,7 @@ opacity: 1; } 100% { - left: 90%; + left: 80%; opacity: 0; transform: rotate(360deg); } @@ -110,11 +110,10 @@ } } -.upg-credits-footer { - margin-top: 1rem; - text-align: center; -} - .upg-credits-play-again { margin-top: 2rem; } + +#upg-multiplier { + display: none; +} diff --git a/assets/img/upgrades/emojis3.png b/assets/img/upgrades/emojis3.png new file mode 100644 index 0000000..dfea6f1 Binary files /dev/null and b/assets/img/upgrades/emojis3.png differ diff --git a/assets/img/upgrades/multiplier.png b/assets/img/upgrades/multiplier.png new file mode 100644 index 0000000..5422613 Binary files /dev/null and b/assets/img/upgrades/multiplier.png differ diff --git a/index.html b/index.html index 794d069..a8bdd07 100644 --- a/index.html +++ b/index.html @@ -26,7 +26,7 @@
-

Mood Clicker

+

Mood Clicker (alpha?)

Current Mood: 0 diff --git a/js/game.js b/js/game.js index 8a64f7a..6263512 100644 --- a/js/game.js +++ b/js/game.js @@ -1,6 +1,7 @@ let mood = 0; -let moodPerClick = 1; // FOR TESTING PURPOSES, SHOULD BE 1 IN PRODUCTION +let moodPerClick = 1; let purchasedUpgrades = []; +let multiplier = 1; const upgradesContainer = document.getElementById('upgrades'); const moodCounter = document.getElementById('mood-counter'); @@ -17,24 +18,26 @@ const musicRange = document.getElementById('music-range'); const audioMusic = new Audio('./assets/audio/mood_not_found.mp3'); const audioRain = new Audio('./assets/audio/rain.mp3'); +const upgMultiplier = document.getElementById('upg-multiplier'); + function updateMoodCounter() { - moodCounter.innerText = mood; + moodCounter.innerText = Math.floor(mood); updateUpgrades(); - if (mood < 100) { + if (mood < 50) { favicon.setAttribute('href', './assets/favicons/1.ico'); - } else if (mood < 1e3) { + } else if (mood < 500) { favicon.setAttribute('href', './assets/favicons/2.ico'); - } else if (mood < 1e5) { + } else if (mood < 1500) { favicon.setAttribute('href', './assets/favicons/3.ico'); - } else if (mood < 1e9) { + } else if (mood < 4000) { favicon.setAttribute('href', './assets/favicons/4.ico'); - } else if (mood < 1e16) { + } else if (mood < 80000) { favicon.setAttribute('href', './assets/favicons/5.ico'); - } else if (mood < 1e19) { + } else if (mood < 300000) { favicon.setAttribute('href', './assets/favicons/6.ico'); - } else if (mood < 1e22) { + } else if (mood < 2000000) { favicon.setAttribute('href', './assets/favicons/7.ico'); } } @@ -77,7 +80,7 @@ function updateUpgrades() { } function onLiftMoodClick() { - mood += moodPerClick; + mood += moodPerClick * multiplier; updateMoodCounter(); } @@ -113,6 +116,9 @@ function enableSaves() { const save = { mood, purchasedUpgrades, + multiplier: +multiplier, + musicVolume: audioMusic.volume, + rainVolume: audioRain.volume, }; localStorage.setItem('save', JSON.stringify(save)); @@ -133,6 +139,11 @@ function loadSave() { if (save) { const decodedSave = JSON.parse(save); mood = decodedSave.mood; + audioMusic.volume = decodedSave.musicVolume; + audioRain.volume = decodedSave.rainVolume; + + multiplier = decodedSave.multiplier; + upgMultiplier.innerText = 'Multiplier: x' + multiplier.toFixed(1); const needUpgrades = upgrades.filter((upgrade) => decodedSave.purchasedUpgrades.includes(upgrade.id)); needUpgrades.forEach((nUpgrade) => { @@ -165,23 +176,29 @@ function getRandomEmoji() { return emojis[Math.floor(Math.random() * emojis.length)]; } -function addEmoji() { +function addEmoji(count = 1) { const upgEmojis = document.getElementById('upg-emojis'); upgEmojis.style.display = 'block'; - - const emoji = document.createElement('span'); - emoji.innerText = getRandomEmoji(); - emoji.className = 'upg-emojis'; - setTimeout(() => { - upgEmojis.append(emoji); - }, Math.random() * 1000); + for (let i = 0; i < count; i++) { + setTimeout(() => { + const emoji = document.createElement('span'); + emoji.innerText = getRandomEmoji(); + emoji.className = 'upg-emojis'; + upgEmojis.append(emoji); - setInterval(() => { - mood += Math.floor(Math.random() * 1000); - emoji.innerText = getRandomEmoji(); - updateMoodCounter(); - }, 5000); + setInterval(() => { + mood += Math.floor(Math.random() * 1000) * multiplier; + emoji.innerText = getRandomEmoji(); + updateMoodCounter(); + + if (purchasedUpgrades.includes('multiplier')) { + multiplier += 0.1; + upgMultiplier.innerText = 'Multiplier: x' + multiplier.toFixed(1); + } + }, 5000); + }, Math.floor(Math.random() * 4000) + 1000); + } } // rain @@ -233,6 +250,7 @@ function showCuteface() { const cuteface = document.getElementById('upg-cuteface'); cuteface.style.visibility = 'visible'; document.body.style.backgroundColor = '#93560e'; + moodPerClick += 600; } // credits @@ -245,12 +263,20 @@ function showCredits() { // cursor function enableCursor() { + moodPerClick += 800; var allElements = document.querySelectorAll('body, .btn, .click-btn'); for (var i = 0; i < allElements.length; i++) { allElements[i].style.cursor = 'url("./assets/img/cursors/cursor.png"), auto'; } } +// multiplier + +function enableMultiplier() { + const upgMultiplier = document.getElementById('upg-multiplier'); + upgMultiplier.style.display = 'block'; +} + let upgrades = [ { @@ -291,7 +317,7 @@ let upgrades = [ description: 'Let the emojis flyyyyyyy-- and get some more mood', image: '../assets/img/upgrades/emojis2.png', cost: 1500, - onPurchase: addEmoji, + onPurchase: () => addEmoji(5), }, { id: 'calm_music', @@ -304,7 +330,7 @@ let upgrades = [ { id: 'cursor', name: 'Cursor', - description: 'Click Clack. +400 mood/click', + description: 'Click Clack. +800 mood/click', image: '../assets/img/upgrades/cursor.png', cost: 4000, onPurchase: enableCursor, @@ -314,7 +340,7 @@ let upgrades = [ name: 'Mixer', description: 'Control the sounds', image: '../assets/img/upgrades/mixer.png', - cost: 4500, + cost: 50000, onPurchase: enableMixer, }, { @@ -322,15 +348,31 @@ let upgrades = [ name: 'Cuteface', description: 'A little bit... unusual background... no?..', image: '../assets/img/upgrades/cuteface.png', - cost: 8000, + cost: 80000, onPurchase: showCuteface, }, + { + id: 'emojis3', + name: 'Even More Emoji Thrusters', + description: 'mayhem but more mood', + image: '../assets/img/upgrades/emojis3.png', + cost: 100000, + onPurchase: () => addEmoji(20), + }, + { + id: 'multiplier', + name: 'Mood Multiplier', + description: 'Even more mood with time', + image: '../assets/img/upgrades/multiplier.png', + cost: 300000, + onPurchase: enableMultiplier, + }, { id: 'credits', - name: 'Credits', - description: 'Congratulations!', + name: 'The End', + description: 'it\'s alpha', image: '../assets/img/upgrades/credits.png', - cost: 1, + cost: 15000000, onPurchase: showCredits, }, ];