CODEWITHSUNDEEP
javascriptarrayssortingleaderboard
Ruben
Ruben

Reputation: 37

bubble sort for simple leaderboard

I am creating a simple video game leader board which will rank the user score against pre-set scores which will place their rank from highest to lowest depending.

<html>
  <!Foundation Page for building our Javascript programs>
  <head>
    <title>The Foundation Page </title>
    <script type="text/javascript">
      function leaderboard()
      {
        var leaderboardarray = new Array (5);
        var n, temp;
        ok=false;
        var score 
        var rank

        score = 150

        leaderboardarray[1] = 50;
        leaderboardarray[2] = 60;
        leaderboardarray[3] = 180;
        leaderboardarray[4] = 120;
        leaderboardarray[5] = score;

        while(!ok)
        {
          ok = true
          for (n=1; n<=5; n=n+1)
          { 
            if (leaderboardarray [n]<leaderboardarray [n-1])
            {
              leaderboardarray [n] = leaderboardarray [n-1];
              ok = false;
            }
          } 
        }

        for (n=5; n>=1; n=n-1) 
          document.write (leaderboardarray [n] + "<br>");
      }

    </script>
  </head>head>
  <body BGCOLOR="WHITE">
    <h2>The Foundation Page </h2>
    <hr>
    <script LANGUAGE="Javascript"> leaderboard() </script>

  </body>
</html>

Its outputting the arrays as normal, but I am stuck on how the array outputs a value from highest to lowest. When I place a value higher than any other value after it, it will only produce the same value. When I change one of the value to Would anyone suggest on what I should do to do so would be much appreciated. I am still new to programming so sorry if I am doing anything silly. Thank you!

Upvotes: 0

Views: 2402

Answers (2)

dting
dting

Reputation: 39297

You should use Array.sort.

However, the problem with the code you posted is, you aren't actually swapping in your bubble sort. You are just overwriting the smaller value with the larger one.

function bubbleSort(arr) {
  var n = arr.length, swapped, tmp;
  do {
    swapped = false;
    for (var i = 1; i < n; i++) {
      if (arr[i-1] < arr[i]) {
        tmp = arr[i];
        arr[i] = arr[i-1];
        arr[i-1] = tmp;
        swapped = true; 
      }
    }
  } while (swapped && n--)
}

a = [50, 60, 70, 80, 150, 120]

bubbleSort(a);
console.log(a);
// [150, 120, 80, 70, 60, 50]

Upvotes: 2

AbsoluteƵER&#216;
AbsoluteƵER&#216;

Reputation: 7880

Since you're using Javascript without prototype or jQuery, have you tried replacing your while statement with something like this:

leaderboardarray.sort(function(a, b){return b-a});

There is a great write-up of the Javascript sort function at w3schools.

<HTML>
<!--#Foundation Page for building our Javascript programs#-->
<HEAD>
<TITLE>The Foundation Page </TITLE>
<!--fixed this-->
<SCRIPT type="text/javascript">
    function leaderboard()
    {

            var n, temp;
            ok=false;
            var score 
            var rank

            var score = 150

            var leaderboardarray = new Array(5);
                leaderboardarray[0] = 50;
                leaderboardarray[1] = 60;
                leaderboardarray[2] = 180;
                leaderboardarray[3] = 120;
                leaderboardarray[4] = score;

            leaderboardarray.sort(function(a, b){return b-a});
            var myContent = '';
            for (var n=0;n<5;n++) 
                myContent += leaderboardarray[n] + "<br>";

            document.getElementById("leaderBoard").innerHTML = myContent;
    }

    //call the function here


</SCRIPT>
</HEAD>
<!--#Using CSS#-->
<BODY style="background-color:#FFF;">
        <H2>The Foundation Page </H2>
        <HR>
        <!--#This is a placeholder#-->
        <div id="leaderBoard"><script type="text/javascript">leaderboard();</script></div>

</BODY>
</HTML>

Few things about your code that needed to be addressed.

  • You had two head tags.
  • You were sorting your array, then showing the output with a decrementing for statement. On this I'm sorting the array in descending order and then showing ascending output.
  • I also have started arrays at 0 (where they want to be), this allows for less math in the for statements.
  • I've replaced the bgcolor HTML tag with CSS
  • Updated the script tag to use type instead of language.
  • Rather than using document.write which can cause problems, I'm replacing the content of a placeholder div.

Here is a fiddle.

Upvotes: 0

Related Questions