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>
|
<h2 class="game-overlay-title">Pausing</h2>
|
||||||
|
|
||||||
<div class="game-overlay-btns">
|
<div class="game-overlay-btns">
|
||||||
|
<button class="btn primary" id="resumeBtn">Resume</button>
|
||||||
<button class="btn primary">Resume</button>
|
<button class="btn danger" id="mainMenuBtn">Main Menu</button>
|
||||||
<button class="btn danger">Main Menu</button>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="game-overlay" id="game-over-menu">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="helper-functions.js"></script>
|
<script src="helper-functions.js"></script>
|
||||||
|
<script src="sound-manager.js"></script>
|
||||||
<script src="rect.js"></script>
|
<script src="rect.js"></script>
|
||||||
<script src="powerup-ball.js"></script>
|
<script src="powerup-ball.js"></script>
|
||||||
<script src="powerup-coin.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'),
|
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 resumeBtn = document.getElementById('resumeBtn');
|
||||||
const game = new Game(container);
|
const mainMenuBtn = document.getElementById('mainMenuBtn');
|
||||||
game.start();
|
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() {
|
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%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #333;
|
background: #333;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
@ -39,7 +40,7 @@ body {
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
display: grid;
|
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 {
|
.details h1, .details h3, .details .details-title {
|
||||||
|
@ -169,3 +170,24 @@ body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 16px 0 0;
|
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