Exercise: High-Score Leaderboard

Finish six functions that turn an arcade game's high-score list into its top 3, display lines, totals and a numbered leaderboard, using map, filter, reduce and sort, and let the tests check each one.

Journeyman · JavaScript · Updated

Comet Dash, the arcade game from this chapter, has a problem: its high-score list is one long array in the order the games were played, and the game's screens need it reshaped. The title screen wants the top 3. The stats screen wants a total and an average. The leaderboard wants numbered lines, best first. You'll write the six functions that do it, each with the array methods from this chapter, and tests check every one as you go.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it into a folder of your own. Or clone it with Git.

The folder holds:

  • leaderboard.js: the six functions you'll finish.
  • high-scores.js: Comet Dash's high-score list, eight games, ready to use.
  • show-leaderboard.js: prints what your functions give back, so you can watch them work.
  • leaderboard.test.js: the tests that check your functions. You don't need to change it.

Open the folder in VS Code, and open its terminal with Terminal > New Terminal.

What to do

Every function in leaderboard.js already has its name and parameters, and returns [] or 0 for now. The comment above it says what it should return, with examples from the high-score list:

/*
 * 2. Return the entries that scored more than `minimum` points, in the order they're in now.
 *    A score equal to `minimum` doesn't count as more.
 *
 *    playersOver(highScores, 9000) -> the entries for NovaFox, LunaByte and GlitchGoose
 *    playersOver(highScores, 20000) -> []
 */
export function playersOver(players, minimum) {
  return [];
}
  1. topThree: the three best scores, highest first.
  2. playersOver: the entries over a score.
  3. displayLines: one line of text per entry, such as PixelPanda: 8200 points (level 7).
  4. totalScore and averageScore: the total of every score, and the average rounded to a whole number.
  5. leaderboard: the entries at one level or higher, best first, as numbered lines, written as one chain.

Two rules hold for every function: use the chapter's array methods rather than for loops, and never change the list you're given. The game still needs it in the order the games were played.

Check your work

Run the tests from the exercise folder:

node --test

At first every test fails. That's expected: each function you finish turns its test green. When a test fails, its message says what it expected, for example Nobody scored over 20000, so playersOver should give an empty array. If one says your function changed the list it was given, look for a sort that should be a toSorted.

To see your functions at work on the real list, run:

node show-leaderboard.js

Hints

  • Name the job before you write the code. "Keep these" is filter, "turn each one into a line" is map, "add them all up" is reduce, "put them in order" is sort. The table at the end of Sorting Arrays lines them up.
  • The top 3 is two steps. Put the entries in order first, then take the first three with slice(0, 3).
  • Give reduce a starting value. The total of an empty list should be 0, not an error. reduce shows what happens without one.
  • Functions can call functions. averageScore needs a total, and you'll already have a function that works one out.
  • Number the lines with the index. map hands your callback each item's position as well as the item, as in map and filter. Positions start at 0, and leaderboards start at 1.

When you're done

Every test is green, and node show-leaderboard.js prints:

1) topThree: NovaFox, GlitchGoose, LunaByte
2) playersOver 9000: NovaFox, LunaByte, GlitchGoose
3) displayLines, the first line: PixelPanda: 8200 points (level 7)
4) totalScore: 56300
5) averageScore: 7038
6) leaderboard, level 5 and up:
   1. NovaFox: 12450
   2. GlitchGoose: 10300
   3. LunaByte: 9900
   4. PixelPanda: 8200
   5. WaffleWizard: 6750
   6. MossyMoose: 5150

Now look back at leaderboard. Read the chain aloud, one method per line. Does it say what the function does, in the order it does it? If someone asked for "the top 5 only", which one line would you add?

So what

Taking a raw list and reshaping it for a screen, by keeping some items, ordering them and turning them into lines, is a job you'll do in nearly every app you build, from a game's leaderboard to a shop's search results. You now have the four tools that do it.

Key terms

Related