Sorting algorithm for basic leaderboard using bubble sort

Question

Sorting algorithm for basic leaderboard using bubble sort

I'm in the process of developing a basic video game leader board that will arrange user scores against preset scores in descending order.

<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>

The program is showing the arrays correctly, but I am facing an issue where it does not output values from highest to lowest. Instead, when a higher value is inserted after another, it duplicates the same value. If anyone has suggestions on how to tackle this problem, please advise. I'm still relatively new to programming, so apologies if I'm missing something obvious. Thank you!

javascript arrays sorting leaderboard

Answer 1

Answer №1

It is recommended to utilize Array.sort for sorting purposes.

Nevertheless, the issue with the provided code lies in the implementation of your bubble sort. It appears that instead of swapping elements, you are simply 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]

Answer 2

It is recommended to utilize Array.sort for sorting purposes.

Nevertheless, the issue with the provided code lies in the implementation of your bubble sort. It appears that instead of swapping elements, you are simply 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]

Answer 3

Answer №2

If you're working with JavaScript without utilizing prototype or jQuery, consider replacing your while statement with the following code snippet:

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

You can find a comprehensive guide on 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>

Here are some improvements to your code that should be considered:

You had two head tags.
You were sorting your array and then displaying the output with a decrementing for loop. My approach sorts the array in descending order and displays the output in ascending order.
I started arrays at index 0 for simplicity in the for statements.
Replaced the bgcolor HTML tag with CSS
Updated the script tag to use type instead of language.
Instead of using document.write which can cause issues, I'm updating the content of a div element as a placeholder.

Take a look at this fiddle.

Answer 4

If you're working with JavaScript without utilizing prototype or jQuery, consider replacing your while statement with the following code snippet:

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

You can find a comprehensive guide on 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>

Here are some improvements to your code that should be considered:

You had two head tags.
You were sorting your array and then displaying the output with a decrementing for loop. My approach sorts the array in descending order and displays the output in ascending order.
I started arrays at index 0 for simplicity in the for statements.
Replaced the bgcolor HTML tag with CSS
Updated the script tag to use type instead of language.
Instead of using document.write which can cause issues, I'm updating the content of a div element as a placeholder.

Take a look at this fiddle.

Sorting algorithm for basic leaderboard using bubble sort

Answer №1

Answer №2

Similar questions

Guide to animating the height of a div using jQuery:

What is the best way to access and utilize the data stored in my database using mySQL, PHP, and JavaScript?

I tried moving the onchange(this) function from HTML to JavaScript, but I seem to have missed a parameter. The code ends

Issue with FusionCharts rendering correctly arises when the <base> tag is present in the HTML head section

How can I use jQuery to target and modify multiple elements simultaneously

Efficiently merging two arrays in PHP using a foreach loop

Converting CSS code into JavaScript

Error encountered: _moment2.default.date is not a recognized function within the React application

Bootstrap Dropdown Functionality Malfunctioning

Accessing an Array from a service method in Angular and passing it to my main component

"Utilizing MongoDB's aggregate function to filter data by specific

Creating a circular frame for your image to use as a Facebook profile picture

Encountering a blank page and error message on Vue JS while attempting to generate a JSON file within the

Aurelia-powered DataTable plugin for effortless data updating

If the window width is less than the specified value, hide the DIV and replace it with a

What is the best way to extract user input from a bootstrap search bar and integrate it into an ajax request to fetch information?

I am facing an issue with the Ionic Framework where the Javascript function for JWPlayer only works after the page is reloaded. Can anyone help

Tips for concealing overlay when the cursor hovers

Steps for selectively extracting objects from an array containing nested objectsNeed a way to isolate specific objects

Using jQuery, input data into a textarea element