Right now you are storing all your clicks in the localStorage but this only saves the clicks of the local user on their local device. In order to have a leaderboard, you will need to implement a backend with a database of some sort to store users and the number of clicks they have. If you are familiar with backend languages like NodeJS or PHP and SQL then you can figure something out from that, or if you would prefer to keep it all in JavaScript I know Google Firebase Realtime Database or Firebase Firestore are both viable options that work with JavaScript and require very little backend knowledge.
What you would need to do in either of those scenarios is collect a unique identifier of each user (like a name or email) and then store the number of clicks they have.
Since you just said in the comments that you want it to be on a single device, again I would suggest collecting an identifying piece of information like a name so that you can store that in localStorage along with their click count, and when they come back to the website they can just put in the same information and continue where you left off. But this would only work on one person’s device.
I’m currently making an app with Flask and I’m running into some issues. So the app, for now, is a very simple online clicker game where you can click a button at the center of the screen.
I’ve also implemented a system where the browser tracks the number of times the user clicked on the central button. Here is the full HTML code for the main game screen:
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have currently gained " + localStorage.clickcount + " clicks stored on this browser.";
} else {
document.getElementById("result").innerHTML = "Your browser does not support web storage... (clicks: UNRESOLVED)";
}
}
/* clicking_game style */
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 400;
font-family: Cursive;
}
div {
margin-left: 360;
position: fixed;
font-family: Cursive;
}
button {
margin-left: 470;
display: inline-block;
padding: 15px 25px;
font-size: 50px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: lime;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
button:hover {
background-color: yellow;
}
button:active {
background-color: red;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
img {
position: static;
}
<!-- HTML5 Main -->
<html>
<!-- Head -->
<head>
<!-- Title -->
<title>Clicker Game</title>
<h1>The Clicking Game</h1>
</head>
<body>
<!-- Image Placements -->
<img src="../static/game_screen_img/arrow1.png" style="width:100px;height:100px;margin-left: 300">
<img src="../static/game_screen_img/arrow2.png" style="width:100px;height:100px;margin-left: 300">
<img src="../static/game_screen_img/salutation.png" style="width:100px;height:200px;float:right;margin:-8px;">
<img src="../static/game_screen_img/stunned.png" style="width:80px;height:120px;margin-left:-300;margin-bottom: -30px">
<img src="../static/game_screen_img/upsidedown.png" style="width:70px;height:120px;margin-left: -610;margin-bottom: -350">
<!-- Using Scripts -->
<p><button onclick="clickCounter()" type="button">Click</button></p>
<div id="result"></div>
</body>
</html>
Now, what I would like to add is a leaderboard indicating the top 8 people who clicked the most times on the “Click” button. In the ninth spot on the leaderboard, there will be you with your personal score. I would also like the leaderboard to be in the top-left corner of the page. How do I add such interactivity using JavaScript and implement it into my HTML code?
To clarify, here is an image of how I would like the leaderboard to be on the page:
Is your leaderboard synchronized with all world wide users? In this case you will need a server, where to send the click results. Or is your leaderboard only available locally for users with the same browser open? In this case you can store a JSON object into local storage.
I want it to be only available locally for users with the same browser opened.
