Hey everyone! I’m working on a simple platformer game in JavaScript. It’s similar to Doodle Jump. I’ve got the game running fine, but I’m stuck on how to display a high score list after the game ends.
Right now, the scores show up, but they don’t look great. I want to display them on a clean page, maybe using the same HTML file. I’m not sure if I should use a document command or something else.
Here’s what I’ve tried so far:
Created a function to save high scores
Made another function to check if the current score is a high score
Set up a function to show the high scores
But I’m not happy with how it looks. Any ideas on how to make it look better? Should I use a modal? Or create a separate div that appears at the end?
I’d really appreciate any tips or code examples you can share. Thanks!
I encountered a similar challenge when working on my own game projects. In my experience, it is effective to create a separate div for the leaderboard, which remains hidden until the game is over. Start by adding a div with an id such as ‘leaderboard’ to your HTML and set its initial display property to none through CSS. Next, style the div so that it overlays the game canvas neatly. When the game ends, populate the div with the high score information and update its display to make it visible. This method keeps all your elements in one file while providing clean control over the leaderboard’s appearance.
I’ve tackled this issue in my own projects before. One approach that worked well for me was using localStorage to persist the high scores between sessions. This way, you can maintain a leaderboard even after the browser is closed.
For displaying the scores, I’d recommend creating a separate div that’s initially hidden. When the game ends, you can populate this div with the top scores from localStorage and fade it in smoothly using CSS transitions. This gives a polished look without needing to create a whole new page.
To make it visually appealing, consider using a table structure for the scores, with alternating row colors. You could also add some simple animations when revealing the leaderboard to make it more engaging.
Remember to sort the scores before displaying them, and limit the number shown to keep it manageable. Hope this helps with your project!
hey luna23, i’ve been there! for a clean look, try using a modal. it’s like a pop-up window that appears over your game. you can create it with HTML/CSS and show/hide it with JavaScript. keeps everything in one file and looks pro. lmk if u need help with the code!