Javascript Highscore Table

[ellescuba27]

I couldn't find a script anywhere on the internet for a highscore table and it's tough to build, but here it is!
PART 1

Here's a little Javascript for highscores which I couldn't find anywhere on the internet, so I made my own (this is just an example):

var highscores = "100-tomy-200-tomyshadow-300-ellescuba-400-joe\\-burns\\-the\\-html\\-master"; // change this variable to whatever highscores there are, you may choose to save this in a cookie and put the results in this variable, or store the information in a database and use a server side language such as PHP to get the information
var currentname = "";
var namearray = new Array();
var i2 = 0;
var flip = 0;
var currentname2 = "";
var currentscore = "";
var highscorearray = new Array();
var i3 = 0;
var flip2 = 0;
var numberoflines = "";
var firsttestinfinalfor = 0;
var lowi = 0;
var highi = 0;
var firsttestinfinalfinalfor = 0;
var numberoflines2 = "\\\\-";
function getscores() {
for(i=0;i<=highscores.length-1;i++) {
if (flip == 0) {
if (highscores[i] != "-") {
currentname += "" + highscores[i] + "";
}
if (highscores[i+1] == "-") {
currentname += "-";
flip = 1;
}
} else {
if (highscores[i] != "-") {
if (i <= highscores.length-1) {
if (!highscores[i+1] || highscores[i+1] == "null" || highscores[i+1] == "undefined") {
currentname += "" + highscores[i] + "";
} else {
if (highscores[i] != "\\" || highscores[i+1] != "-") {
currentname += "" + highscores[i] + "";
}
}
}
}
if (!highscores[i+1] || highscores[i+1] == "null" || highscores[i+1] == "undefined") {
} else {
if (highscores[i] == "\\" && highscores[i+1] == "-") {
currentname += "\\-";
i++;
}
}
if (i == highscores.length-1) {
namearray[i2] = currentname;
}
if (!highscores[i+1] || highscores[i+1] == "null" || highscores[i+1] == "undefined") {
} else {
if (highscores[i+1] == "-") {
namearray[i2] = currentname;
i2++;
currentname = "";
flip = 0;
}
}
}
}
i = 0;
while (i3 <= namearray.length-1) {
if (flip2 == 0) {
if (namearray[i3][i] != "-") {
currentscore += "" + namearray[i3][i] + "";
}
if (namearray[i3][i+1] == "-") {
flip2 = 1;
}
i++;
} else {
if (namearray[i3][i] != "-") {
if (i <= namearray[i3].length-1) {
if (!highscores[i+1] || highscores[i+1] == "null" || highscores[i+1] == "undefined") {
currentname2 += "" + namearray[i3][i] + "";
} else {
if (namearray[i3][i] != "\\" || namearray[i3][i+1] != "-") {
currentname2 += "" + namearray[i3][i] + "";
}
}
}
}
if (!highscores[i+1] || highscores[i+1] == "null" || highscores[i+1] == "undefined") {
} else {
if (namearray[i3][i] == "\\" && namearray[i3][i+1] == "-") {
currentname2 += "\\-";
i++;
}
}
if (i == namearray[i3].length-1) {
if (!highscorearray[currentscore] || highscorearray[currentscore] == null || highscorearray[currentscore] == undefined) {
highscorearray[currentscore] = currentname2;
} else {
while (highscorearray["" + currentscore + "" + numberoflines + ""] || highscorearray["" + currentscore + "" + numberoflines + ""] != null || highscorearray["" + currentscore + "" + numberoflines + ""] != undefined) {
numberoflines += "\\\\-";
}
highscorearray["" + currentscore + "" + numberoflines + ""] = currentname2;
numberoflines = "";
}
currentscore = "";
currentname2 = "";
i = 0;
i3++;
flip2 = 0;
} else {
i++;
}
}
}
for (key in highscorearray) {
if (firsttestinfinalfor == 0) {
lowi = key;
highi = key;
firsttestinfinalfor = 1;
} else {
if (key < lowi) {
lowi = key;
}
if (key > highi) {
highi = key;
}
}
}
for (i=highi;i>=lowi;i--) {
if (firsttestinfinalfinalfor == 0) {
if (!highscorearray["" + i + ""] || highscorearray["" + i + ""] == null || highscorearray["" + i + ""] == undefined) {
} else {
for (key in highscorearray) {
if (key == "" + i + "") {
document.write(highscorearray['' + i + ''].replace(/\\-/g, '-') + " - " + key); // The username is stored in the variable highscorearray['' + i + ''].replace(/\\-/g, '-') and the the score is stored in the variable key, you might want to do something else with this than write it to the page using document.write, but be aware not all the code is outputted at once, instead looping through each username
}
}
if (!highscorearray["" + i + "\\\\-"] || highscorearray["" + i + "\\\\-"] == "null" || highscorearray["" + i + "\\\\-"] == "undefined") {
} else {
for (key in highscorearray) {
if (key == "" + i + "\\\\-") {
document.write(highscorearray['' + i + '\\\\-'].replace(/\\-/g, '-') + " - " + key.replace(/\\\\-/g, '')); // The username is stored in the variable highscorearray['' + i + ''].replace(/\\-/g, '-') and the the score is stored in the variable key.replace(/\\\\-/g, ''), you might want to do something else with this than write it to the page using document.write, but be aware not all the code is outputted at once, instead looping through each username
}
}
while (highscorearray["" + i + "" + numberoflines2 + ""] || highscorearray["" + i + "" + numberoflines2 + ""] != null || highscorearray["" + i + "" + numberoflines2 + ""] != undefined) {
numberoflines2 += "\\\\-";
for (key in highscorearray) {
if (key == "" + i + "" + numberoflines2 + "") {
document.write(highscorearray['' + i + '' + numberoflines2 + ''].replace(/\\-/g, '-') + " - " + key.replace(/\\\\-/g, '')); // The username is stored in the variable highscorearray['' + i + ''].replace(/\\-/g, '-') and the the score is stored in the variable key.replace(/\\\\-/g, ''), you might want to do something else with this than write it to the page using document.write, but be aware not all the code is outputted at once, instead looping through each username
}
}
}
}
firsttestinfinalfinalfor = 1;
}
} else {
if (!highscorearray["" + i + ""] || highscorearray["" + i + ""] == null || highscorearray["" + i + ""] == undefined) {
} else {
for (key in highscorearray) {
if (key == "" + i + "") {
document.write("<br>" + highscorearray['' + i + ''].replace(/\\-/g, '-') + " - " + key); // The username is stored in the variable highscorearray['' + i + ''].replace(/\\-/g, '-') and the the score is stored in the variable key, you might want to do something else with this than write it to the page using document.write, but be aware not all the code is outputted at once, instead looping through each username
}
}
if (!highscorearray["" + i + "\\\\-"] || highscorearray["" + i + "\\\\-"] == "null" || highscorearray["" + i + "\\\\-"] == "undefined") {
} else {
for (key in highscorearray) {
if (key == "" + i + "\\\\-") {
document.write("<br>" + highscorearray['' + i + '\\\\-'].replace(/\\-/g, '-') + " - " + key.replace(/\\\\-/g, '')); // The username is stored in the variable highscorearray['' + i + ''].replace(/\\-/g, '-') and the the score is stored in the variable key.replace(/\\\\-/g, ''), you might want to do something else with this than write it to the page using document.write, but be aware not all the code is outputted at once, instead looping through each username
}
}
while (highscorearray["" + i + "" + numberoflines2 + ""] || highscorearray["" + i + "" + numberoflines2 + ""] != null || highscorearray["" + i + "" + numberoflines2 + ""] != undefined) {
numberoflines2 += "\\\\-";
for (key in highscorearray) {
if (key == "" + i + "" + numberoflines2 + "") {
document.write("<br>" + highscorearray['' + i + '' + numberoflines2 + ''].replace(/\\-/g, '-') + " - " + key.replace(/\\\\-/g, '')); // The username is stored in the variable highscorearray['' + i + ''].replace(/\\-/g, '-') and the the score is stored in the variable key.replace(/\\\\-/g, ''), you might want to do something else with this than write it to the page using document.write, but be aware not all the code is outputted at once, instead looping through each username
}
}
}
}
}
}
}
}
getscores();

 

[ellescuba27]

Part 2

how to use:
Set the variable highscores to the highscores in a certain format. The format is:

"score-username-score-username"

so first you write the score, then a line (-), then the username that owns the last score. It may seem a little backwards but makes more sense to loop through the numbers and not every single last name unknowingly. Note that the username cannot have a line (-) in it because otherwise it will think the last part of the username would count as a score. So:

"100-joe-burns-200-tomy"

this would not work because after the word joe there is a line, which means burns would be a score and 200 would be a username, and tomy would be another score. To fix it, put a backslash before the line. Because of javascript escaping, we have to escape the backslash as well. So the string would look like:

"100-joe\\-burns-200-tomy"

now the code works. If ever nessecary to have a backslash in the username next to a line, we would just add another backslash, like

"joe\\\-burns"

this would result in joe\-burns. Remember to call the getscores function.

How it works and the nitty gritty details:
It first loops through the highscores variable, checking for usernames and scores, and sorts them into an array called namearray:

namearray[0] = "100-joe\\-burns";
namearray[1] = "200-tomy";

it then loops through this halfway through array and breaks it down into another array called highscorearray, this time with the key being the score, like:

highscorearray["100"] = "joe\\-burns";
highscorearray["200"] = "tomy";

if two people had the same score, it could still handle it with a little string magic:

highscorearray["200"] = "tomy";
highscorearray["200\\\-"] = "tomysshadow";

the difficult part was this. How could i get the array key to show? I knew only one key could be allowed with the same name, so i created a function looping through each number from lowest to highest in the array, and if a number was found, it would also test for the same score with a "\\\-" on the end, to see if someone got the same score, and would keep going until all of the same score was found. It would subsequently write these to the page. So:

highscorearray["100"] = "joe\\-burns";
highscorearray["200"] = "tomy";
highscorearray["200\\\-"] = "tomysshadow";

writes this to the page:

joe-burns - 100
<br>tomy - 200
<br>tomysshadow - 200

if you prefer not to use document.write, look for this comment:

// the username is stored in the variable highscorearray['' + i + ''].replace(/\\-/g, '-') and the the score is stored in the variable key, you might want to do something else with this than write it to the page using document.write, but be aware not all the code is outputted at once, instead looping through each username

and

// the username is stored in the variable highscorearray['' + i + ''].replace(/\\-/g, '-') and the the score is stored in the variable key.replace(/\\\\-/g, ''), you might want to do something else with this than write it to the page using document.write, but be aware not all the code is outputted at once, instead looping through each username

and follow the instructions in each comment to do what you want instead, for example, you may choose to store the html in a variable instead and write all the code at once (which i admit may be slightly faster overall, but won't update the display immediately after each loop.

Downsides:
It can't handle time. Try converting times to milliseconds then back again to regular time (seconds? Minutes?)
it can't handle decimals. Try multiplying by 10, 100, or 1000 and when writing to the page, dividing again by 10, 100, or 1000.
Because a for loop checks for each number, if the highscore have a range of around 100 million it would surely cause the script to freeze. A good maximum score would be 10000000 from the lowest.

On the other hand, it's easy to learn and great for family highscores (highscores that are only on one computer because of cookies).
To clarify, it does not matter what order the highscores are in when they are inside the varaible. This would also work:

"300-tomy-100-tomysshadow"

so all you have to do is basically add:

"-score-username"

everytime there is a new score, unless it is the first score on the list, in which case you shouldn't add the first line (-) character:

"score-username"

i wrote this script by myself. Feel free to edit this script to your liking, and use it without giving credit to the author! I like free stuff and don't like to bother with liscenses, and i can't wait to see what people do with it so go ahead (and if you do edit, maybe post it here for all to see)!
My main goals with scripts are to keep them safe and browser compatible. Not even the oldest of ancient browsers should be left out, because leaving them out means leaving out folks with no knowledge of computers and don't know what to do in the case of an error. And of course, with scripts made in languages such as php, safety can be a big concern. I do my best to take care of both situations in my scripts so that everyone can enjoy and be safe.

 

[garrette]

This would be put to better use in the scripts forum! This section is for help with scripts, so I believe this is misplaced unless you are looking for some sort of help !

 

[misson]

The bulk of getscores is unnecessary. There are already a number of formats for data interchange, such as JSON.

var highscores = [
    {score: 100, name: "tommy", /* You want floats? We got floats: */ time: 42.14},
    ...
];

// to save or send the high scores elsewhere, first convert to JSON:
var serializedScores = JSON.stringify(highscores);

// to convert from JSON:
highscores = JSON.parse(serializedScores);

// to sort in descending order by score:
highscores.sort(function(a, b) {return b.score - a.score;});

// lowest high score is now:
highscores[highscores.length-1].score;
// while the highest is:
highscores[0].score;

// to show the scores:
function showScores(parent, scores) {
    // a <dl> could also be appropriate
    var scoresElt = document.createElement('ol'),
        i, scoreText;
    scores.sort(function(a, b) {return b.score - a.score;});
    for (i=0; i < scores.length; ++i) {
        scoresElt.appendChild(document.createElement('li'));
        scoreText = scores[i].score + ': ' + scores[i].name;
        scoresElt.lastChild.appendChild(document.createTextNode(scoreText));
    }
    parent.appendChild(scoresElt);
}

<br/> isn't being used semantically; use something more appropriate, such as a paragraph or list element.

If the resource you're learning about JS and the DOM still uses document.write, toss it aside like a book on bodily humors. It's far too outdated and only of historical interest.

If you're not quoting that from somewhere, the

tags aren't appropriate.

 

[ellescuba27]

The quote tags were just to make it look nice.

Thanks for the code tips. Man that hurts to make that whole getscores function on my own just to find out there is a way to already do it! I made that in Notepad!

I only chose document.write because it's the only function I know that can write things to the page without the use of functions like innerHTML (which require a separate tag such as a span).

You are probably right that I should be using a list tag of some sort (almost forgot about those, it's the last tag I learned long after I thought I knew HTML). Maybe I should fix it up??

---------- Post added at 06:51 PM ---------- Previous post was at 06:42 PM ----------

Ok well I wrote this code so might as well finish it here is the new code same instructions using misson's suggestions. Note: Since I failed to find a function to replace document.write I am still using it, but that's easy to change...

var highscores = "100-tomy-200-tomyshadow-300-ellescuba-400-joe\\-burns\\-the\\-html\\-master"; // change this variable to whatever highscores there are, you may choose to save this in a cookie and put the results in this variable, or store the information in a database and use a server side language such as PHP to get the information
var currentname = "";
var namearray = new Array();
var i2 = 0;
var flip = 0;
var currentname2 = "";
var currentscore = "";
var highscorearray = new Array();
var i3 = 0;
var flip2 = 0;
var numberoflines = "";
var firsttestinfinalfor = 0;
var lowi = 0;
var highi = 0;
var numberoflines2 = "\\\\-";
function getscores() {
for(i=0;i<=highscores.length-1;i++) {
if (flip == 0) {
if (highscores[i] != "-") {
currentname += "" + highscores[i] + "";
}
if (highscores[i+1] == "-") {
currentname += "-";
flip = 1;
}
} else {
if (highscores[i] != "-") {
if (i <= highscores.length-1) {
if (!highscores[i+1] || highscores[i+1] == "null" || highscores[i+1] == "undefined") {
currentname += "" + highscores[i] + "";
} else {
if (highscores[i] != "\\" || highscores[i+1] != "-") {
currentname += "" + highscores[i] + "";
}
}
}
}
if (!highscores[i+1] || highscores[i+1] == "null" || highscores[i+1] == "undefined") {
} else {
if (highscores[i] == "\\" && highscores[i+1] == "-") {
currentname += "\\-";
i++;
}
}
if (i == highscores.length-1) {
namearray[i2] = currentname;
}
if (!highscores[i+1] || highscores[i+1] == "null" || highscores[i+1] == "undefined") {
} else {
if (highscores[i+1] == "-") {
namearray[i2] = currentname;
i2++;
currentname = "";
flip = 0;
}
}
}
}
i = 0;
while (i3 <= namearray.length-1) {
if (flip2 == 0) {
if (namearray[i3][i] != "-") {
currentscore += "" + namearray[i3][i] + "";
}
if (namearray[i3][i+1] == "-") {
flip2 = 1;
}
i++;
} else {
if (namearray[i3][i] != "-") {
if (i <= namearray[i3].length-1) {
if (!highscores[i+1] || highscores[i+1] == "null" || highscores[i+1] == "undefined") {
currentname2 += "" + namearray[i3][i] + "";
} else {
if (namearray[i3][i] != "\\" || namearray[i3][i+1] != "-") {
currentname2 += "" + namearray[i3][i] + "";
}
}
}
}
if (!highscores[i+1] || highscores[i+1] == "null" || highscores[i+1] == "undefined") {
} else {
if (namearray[i3][i] == "\\" && namearray[i3][i+1] == "-") {
currentname2 += "\\-";
i++;
}
}
if (i == namearray[i3].length-1) {
if (!highscorearray[currentscore] || highscorearray[currentscore] == null || highscorearray[currentscore] == undefined) {
highscorearray[currentscore] = currentname2;
} else {
while (highscorearray["" + currentscore + "" + numberoflines + ""] || highscorearray["" + currentscore + "" + numberoflines + ""] != null || highscorearray["" + currentscore + "" + numberoflines + ""] != undefined) {
numberoflines += "\\\\-";
}
highscorearray["" + currentscore + "" + numberoflines + ""] = currentname2;
numberoflines = "";
}
currentscore = "";
currentname2 = "";
i = 0;
i3++;
flip2 = 0;
} else {
i++;
}
}
}
for (key in highscorearray) {
if (firsttestinfinalfor == 0) {
lowi = key;
highi = key;
firsttestinfinalfor = 1;
} else {
if (key < lowi) {
lowi = key;
}
if (key > highi) {
highi = key;
}
}
}
document.write("<ol>");
for (i=highi;i>=lowi;i--) {
if (!highscorearray["" + i + ""] || highscorearray["" + i + ""] == null || highscorearray["" + i + ""] == undefined) {
} else {
for (key in highscorearray) {
if (key == "" + i + "") {
document.write("<li>" + highscorearray['' + i + ''].replace(/\\-/g, '-') + " - " + key + "</li>"); // The username is stored in the variable highscorearray['' + i + ''].replace(/\\-/g, '-') and the the score is stored in the variable key, you might want to do something else with this than write it to the page using document.write, but be aware not all the code is outputted at once, instead looping through each username
}
}
if (!highscorearray["" + i + "\\\\-"] || highscorearray["" + i + "\\\\-"] == "null" || highscorearray["" + i + "\\\\-"] == "undefined") {
} else {
for (key in highscorearray) {
if (key == "" + i + "\\\\-") {
document.write("<li>" + highscorearray['' + i + '\\\\-'].replace(/\\-/g, '-') + " - " + key.replace(/\\\\-/g, '') + "</li>"); // The username is stored in the variable highscorearray['' + i + ''].replace(/\\-/g, '-') and the the score is stored in the variable key.replace(/\\\\-/g, ''), you might want to do something else with this than write it to the page using document.write, but be aware not all the code is outputted at once, instead looping through each username
}
}
while (highscorearray["" + i + "" + numberoflines2 + ""] || highscorearray["" + i + "" + numberoflines2 + ""] != null || highscorearray["" + i + "" + numberoflines2 + ""] != undefined) {
numberoflines2 += "\\\\-";
for (key in highscorearray) {
if (key == "" + i + "" + numberoflines2 + "") {
document.write("<li>" + highscorearray['' + i + '' + numberoflines2 + ''].replace(/\\-/g, '-') + " - " + key.replace(/\\\\-/g, '') + "</li>"); // The username is stored in the variable highscorearray['' + i + ''].replace(/\\-/g, '-') and the the score is stored in the variable key.replace(/\\\\-/g, ''), you might want to do something else with this than write it to the page using document.write, but be aware not all the code is outputted at once, instead looping through each username
}
}
}
}
}
}
}
document.write("</ol>");
getscores();

 

[misson]

Man that hurts to make that whole getscores function on my own just to find out there is a way to already do it!

That's fairly common, especially among neophyte programmers. It happens to experienced developers who suffer from NIH.

Note: Since I failed to find a function to replace document.write I am still using it, but that's easy to change...

Instead of document.write, you can use the the DOM methods, such as document.createElement. See the showScores function in my previous sample, which also lets you put the scores anywhere on the page at any point, rather than just at the point in the document that the browser is currently processing. Pretty much everything in your code can be replaced by something in that sample.

As an alternative to the DOM, many JS libraries offer methods to construct and manipulate document elements.

A good chunk of web development comes down to learning the tech behind acronyms: DOM, AJAX, JSON, HTTP, HTML, CSS.