How can I make a ranking system?

When the player reaches a certain rank, they will have a little badge and rank under their score, depending on the number of the score.

https://replit.com/@BluebayStudios/Ples-nerd

Ranks:

dirt: 1-500
metal: 501-10,000
copper: 10,001-50,000
silver: 50,001-100,000
gold: 100,001-500,000
titanium:500,001-1,000,000
diamond:1,000,001-5,000,000
grand nerd:5,000,001-10,000,000
godlike:10,000,001+

Thanks in advance!

This wouldn’t be an online leaderboard ranking system, correct?

Correct. I can’t afford a server :laughing:, so just a little indicator of your amount.

Make a div. Every time their score changes (they click the image, there is an autoclick, they buy more, etc.), call another function. In that function, you can use a switch statement on their score. Here’s an example:

function scoreChanged() {
  switch (score) {
    case score >= 1 && score <= 500: // greater than or equal to 1, or less than or equal to 500
      document.querySelector("div#rankIndicator").innerHTML=`dirt`
      break // so it doesn't get stuck (for good measure idk)
    case score >= 501 && score <= 10000:
      document.querySelector("div#rankIndicator").innerHTML=`metal`
      break
    // ...
    case score >= 10000001:
      document.querySelector("div#rankIndicator").innerHTML=`godlike`
    default: // for any other case, like if score is 0 (may be unnecessary bc if the score is 0, then it wouldn't have been changed yet) or somehow negative
      document.querySelector("div#rankIndicator").innerHTML=`none`
      break
  }
}

I typically just use Firebase for a simple database. It doesn’t even require Node or anything (but it is somewhat recommended for security).

1 Like

I’m not sure if this would work with players already having currency. Can i just check the value of the players points or, “nerds”? And if so, how can I do this?

Just replace score with the nerds value (or whatever you call your score variable)

But…what do you mean by:

I thought that every time the player clicked it, they would add to a different value. Also, how do I add more ranks?

Shouldn’t it add to their main score value?

Just type more of the case score >= ... things under the other ones like the example shows.

I thought that’s what your code did.

How can I show the rank in HTML though?

It does using querySelector, or you could use document → document.elementById("id-of-text").innerHTML = "rank-name". Hope this helps!

That was in my code.

Change the selector to your div or other type of element.


Yeah, it is. (If your score value is called score)

1 Like