Add high score
This commit is contained in:
parent
d4fbde3b55
commit
3cfd384b84
11
index.html
11
index.html
|
@ -39,20 +39,23 @@
|
|||
<h2 class="game-overlay-title">Pausing</h2>
|
||||
|
||||
<div class="game-overlay-btns">
|
||||
|
||||
<button class="btn primary">Resume</button>
|
||||
<button class="btn danger">Main Menu</button>
|
||||
|
||||
<button class="btn primary" id="resumeBtn">Resume</button>
|
||||
<button class="btn danger" id="mainMenuBtn">Main Menu</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-overlay" id="game-over-menu">
|
||||
<h2 class="game-overlay-title">Game Over</h2>
|
||||
|
||||
<div class="game-overlay-btns">
|
||||
<button class="btn primary" id="restartBtn">Restart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="helper-functions.js"></script>
|
||||
<script src="sound-manager.js"></script>
|
||||
<script src="rect.js"></script>
|
||||
<script src="powerup-ball.js"></script>
|
||||
<script src="powerup-coin.js"></script>
|
||||
|
|
80
main.js
80
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();
|
||||
});
|
||||
|
|
24
style.css
24
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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user