Skip to content

Instantly share code, notes, and snippets.

@oelna

oelna/highscore.html

Last active May 30, 2020
Embed
What would you like to do?
A very simple Javascript module to keep track of highscores in browser games. Uses localStorage to preserve entries.
<!DOCTYPE html>
<html>
<head>
<title>Highscore Demo</title>
</head>
<body>
<script type="module">
import highscore from './highscore.js'
let points = new highscore('points', 14, 'desc'); /* keep up to 14 scores, under the storage name 'points', sorted in descending order */
/* save a random entry */
let randomName = Math.random().toString(36).substring(2, 15);
let randomScore = Math.floor(Math.random()*100)*2;
points.save(test, randomScore);
/* load an array of 8 highscores, objects containing a 'name' and 'score' property */
let scoreBoard = points.load(8);
console.log(scoreBoard);
/* return a HTML `ul` list element with a class named 'xxx', containing the 6 highest scores */
let scoresListElement = points.list(6, 'xxx');
document.querySelector('body').appendChild(scoresListElement);
</script>
</body>
</html>
class highscore {
constructor (title, limit=10, direction='desc') {
this.store = window.localStorage;
this.title = (title) ? title : 'highscores';
this.limit = limit;
this.direction = (direction.toLowerCase() === 'desc') ? 'desc' : 'asc';
let content = this.store.getItem(this.title);
this.scores = [];
if (content) {
this.scores = JSON.parse(content);
}
}
save (name, score) {
let entry = {
'name': name,
'score': score
}
this.scores.push(entry);
this.scores = this.sort(this.scores, this.direction);
if (this.scores.length > this.limit) {
this.scores = this.scores.slice(0, this.limit);
}
this.store.setItem(this.title, JSON.stringify(this.scores));
}
load (amount) {
if (amount && amount > 0) {
return this.scores.slice(0, amount);
}
return this.scores;
}
list (amount, className='') {
let array = this.scores;
if (amount && amount > 0) {
array = array.slice(0, amount);
}
const list = document.createElement('ul');
if (className.length > 0) {
list.classList.add(className);
}
for (var i = 0; i < array.length; i++) {
const listItem = document.createElement('li');
const nameSpan = document.createElement('span');
nameSpan.classList.add('name');
nameSpan.textContent = array[i].name;
const scoreSpan = document.createElement('span');
scoreSpan.classList.add('score');
scoreSpan.textContent = array[i].score;
listItem.appendChild(nameSpan);
listItem.appendChild(scoreSpan);
list.appendChild(listItem);
}
return list;
}
sort (array, direction='desc') {
let sortedArray = array.sort(function (a, b) {
if ( a.score < b.score ) {
return -1;
}
if ( a.score > b.score ) {
return 1;
}
return 0;
});
return (direction === 'asc') ? sortedArray : sortedArray.reverse();
}
}
export default highscore;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment