diff --git a/index.html b/index.html index 47c0f69..4b38321 100644 --- a/index.html +++ b/index.html @@ -39,20 +39,23 @@

Pausing

- - - - + +
+

Game Over

+
+ +
+ diff --git a/main.js b/main.js index 4ad5b0a..1e62fe4 100644 --- a/main.js +++ b/main.js @@ -6,12 +6,84 @@ const sounds = { gameOver: new SoundManager('assets/game_over.wav'), }; -let coinCount = 0; +const containerEl = document.getElementsByClassName('container')[0]; +const highscoreEl = document.getElementById('highscore'); +const coinCountEl = document.getElementById('coin-count'); -const container = document.getElementsByClassName('container')[0]; -const game = new Game(container); -game.start(); +const resumeBtn = document.getElementById('resumeBtn'); +const mainMenuBtn = document.getElementById('mainMenuBtn'); +const restartBtn = document.getElementById('restartBtn'); + +let game; + +let coinCount = 0; +let highscore = 0; + +const unlockedSkins = []; +let selectedSkin = 0; + +function loadFromLocalstorage() { + const data = localStorage.getItem('data'); + + if (!!data) { + const items = data.split(';'); + setHighScore(parseInt(items[0])); + setCoinCount(parseInt(items[1])); + selectedSkin = parseInt(items[2]); + unlockedSkins.push(...JSON.parse(items[3])); + } +} + +function saveToLocalstorage() { + let data = highscore + ';' + coinCount + ';' + selectedSkin + ';'; + data += JSON.stringify(unlockedSkins); + + localStorage.setItem('data', data); +} + +function setHighScore(newHighScore) { + highscore = newHighScore; + + highscoreEl.innerText = highscore; +} + +function setCoinCount(newCoinCount) { + coinCount = newCoinCount; + + coinCountEl.innerText = coinCount; +} + +loadFromLocalstorage(); function onGameOver() { + if (game.roundNumber > highscore) { + setHighScore(game.roundNumber); + } + saveToLocalstorage(); + + containerEl.classList.add('game-over'); } + +function startGame() { + game = new Game(containerEl); + game.start(); +} + +function stopGame() { + game.destroy(); + game = undefined; +} + +startGame(); + +restartBtn.addEventListener('click', () => { + stopGame(); + startGame(); + + containerEl.classList.remove('game-over'); +}); + +window.addEventListener('beforeunload', () => { + saveToLocalstorage(); +}); diff --git a/style.css b/style.css index dab9793..f79ba9c 100644 --- a/style.css +++ b/style.css @@ -3,6 +3,7 @@ body { height: 100%; margin: 0; background: #333; + overflow: hidden; } * { @@ -39,7 +40,7 @@ body { .details { display: grid; - grid-template-columns: 1fr 2fr 2fr 1fr 1fr; + grid-template-columns: 1fr 2fr 2fr 2fr 1fr; } .details h1, .details h3, .details .details-title { @@ -169,3 +170,24 @@ body { width: 100%; margin: 16px 0 0; } + +#score { + z-index: 4; + transition: .3s; +} + +.game-over #score { + font-weight: bold; + -webkit-transform: scale(3) translateY(65px); + -moz-transform: scale(3) translateY(65px); + -ms-transform: scale(3) translateY(65px); + -o-transform: scale(3) translateY(65px); + transform: scale(3) translateY(65px); + text-shadow: 2px 2px rgba(255,255,255,.2), 0 0 20px rgba(245, 155, 0, 0.4); + transition: transform .3s, font-weight .3s, text-shadow .3s .3s; + color: #f59b00 +} + +.game-over .play-btn { + display: none; +}