Adding a high scores table
Well, T-Bob asked about this feature. I’ve spent some time on doing this and I have the feeling that the achieved result meets expectations.
If you want to store any manipulated data you can do it using a database application or you can write data on a file. I’ve chosen the last method because it requires minimum intervention and configuration.
The idea is to give to a player, after the game is finished, the possibility to save the number of clicks he/she made. So, after the last pair of cards disappear a form is created with two input fields, one for his/her name and the other for an email address. The restriction for this step is the maximum string length which can be typed in, and is 15 chars for the name and 35 chars for the email address. After clicking the “OK” button the data is passed to a PHP script which will save it in a XML structure file, and the high scores table displayed on game’s page will be updated. Only the first 20 records will be shown.
Files matchgame.js, index.html and style.css were affected and new files and folders were added.
Function startGame() has the following piece of code added:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
setTimeout(function() { $("#update-val tr").remove(); var items=[]; $.ajax({ type: "GET", url: "data/highscores.xml", dataType: "xml", success: function(xml) { $(xml).find('highscore').each(function(){ var name_text = $(this).find('name').text(); var value_text = parseInt($(this).find('value').text()); items.push({"key":name_text,"value":value_text}); //items = $.merge(items, items); //alert(items["key"]); }); //close each( if (items.length > 0) { $("#update-val").html("<thead><td>Name</td><td>Highscore</td></thead>"); var j; var cmp = function(x, y){ return x > y ? 1 : x < y ? -1 : 0 } items = items.sort(function(x, y){ return cmp(x.value, y.value) < cmp(y.value, x.value) ? -1:1 }); if (items.length<20) { for (j in items) { $('<tr></tr>').html('<td>' + items[j].key + '</td>' + '<td>' + items[j].value + '</td>').appendTo('#update-val'); } } else { for (j=0;j<=19;j++) { $('<tr></tr>').html('<td>' + items[j].key + '</td>' + '<td>' + items[j].value + '</td>').appendTo('#update-val'); } } } else { $('<tr></tr>').html('<td>Hmmmm... no records so far!</td>').appendTo('#update-val'); } } }); //close $.ajax( },1800); |
Briefly, what is new: the data stored in file highscores.xml is served using AJAX and stored in an array in a JSON manner. The first impulse was to store data in an array like:
|
1 2 |
items[name_text]=value_text; items = $.merge(items, items) |
but, with this approach was difficult to sort data based on criteria, so I had to change the way data is stored in the array with:
|
1 |
items.push({"key":name_text,"value":value_text}); |
In this way, using associative arrays, data can be sorted for any valid criteria.
Displaying data on high scores table is achieved with:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
if (items.length > 0) { $("#update-val").html("<thead><td>Name</td><td>Highscore</td></thead>"); var j; var cmp = function(x, y){ return x > y ? 1 : x < y ? -1 : 0 } items = items.sort(function(x, y){ return cmp(x.value, y.value) < cmp(y.value, x.value) ? -1:1 }); if (items.length<20) { for (j in items) { $('<tr></tr>').html('<td>' + items[j].key + '</td>' + '<td>' + items[j].value + '</td>').appendTo('#update-val'); } } else { for (j=0;j<=19;j++) { $('<tr></tr>').html('<td>' + items[j].key + '</td>' + '<td>' + items[j].value + '</td>').appendTo('#update-val'); } } } else { $('<tr></tr>').html('<td>Hmmmm... no records so far!</td>').appendTo('#update-val'); } |
So, if no score yet, display a message, otherwise show the first (ascending) 20 values stored. Internet Explorer v8 (and maybe previous versions) doesn’t know to stop iterations if number of items in array is lesser than the max number of iterations, and an error is thrown. Practically the code is doing the same thing, but I just wanted to be more strictly and to emphasize these two situations.
