COMP4021 Lab 6 Creating High Score Table Using Cookies

Overview

In this lab, you will continue to build your assignment 2 - SVG Platform Game
You will learn how to create a high score table using cookies
Then all the highest scores will be remembered, even if the browser is closed and opened again
You can start from the file svg4_start.zip, which is given to you for this part
You need to add the following features to the game:

1. Update a Score in the Game

In the previous lab you have checked the collision between a bullet and any monster in the game
When a bullet hits a monster the monster is killed
In this lab you will add a global variable called score, i.e.:
```
var score = 0; // The score of the game
```
This variable will be increased whenever a monster is killed
To display the score variable you can add an SVG text element to the game

For example, we can add the following SVG in the game:

<g transform="translate(640, 120)">
  <text x="70" y="0"
   style="fill:orange;font-size:25px;font-weight:bold;text-anchor:middle">
    Score:
  </text>
  <rect x="0" y="10" width="140" height="35" style="fill:white" />
  <text id="score" x="70" y="36"
   style="fill:orange;font-size:25px;text-anchor:middle">0</text>
</g>

It will look like this:

The following code is needed to update the score on the screen:

svgdoc.getElementById("score").firstChild.data = ...the updated score...;

The first child node is updated in the above code because any text inside an XML element (in this case the score value in the SVG text node) is stored as a child node of the element
For example, the DOM structure of the SVG shown above looks like this:

2. Store High Scores in Cookies

Remember in the collision code in the previous lab we check whether a player collides with a monster
The game is over when a player collides with one of the monsters in the game or if he/she runs out of time
We can use cookies to store the name and score of the player so that they can be displayed later
However we can only store a limited number of scores because the cookie storage is limited in size
In this lab (and the assignment) we store the 10 highest scores of the game
A JavaScript file highscore.js, is given to you for this part
The file contains a score record class and a few functions for handling cookies
You need to download the file, put it in the same directory as your SVG game and then include the file at the head section of your game.html, i.e.:
```
<head>
    . . .
    <script language="JavaScript" src="highscore.js"></script>
</head>
```

2.1. Organization of the Cookies

We are going to use 10 cookies to store the 10 highest scores of the game
Each score record contains the player name and the player score
We name these 10 cookies player0, player1, player2, ... and player9
In order to store two pieces of information in a cookie we store the score record in the following form:
```
name of the player~score of the player
```
The '~' character is the separator between the name and the score of the player
For example, if the name of the player is "David" and the score of the player is 79 then the cookie string would be "David~79"
The following image shows an example high score table of the game in SVG after 6 games have been played:

The corresponding content of the cookies is shown in the following table:

Cookie	Value
player0	"David~79"
player1	"Hello Kitty~78"
player2	"Pokemon~65"
player3	"McMug~43"
player4	"McDonald~28"
player5	"Keroro~10"
player6	Empty or does not exist
player7	Empty or does not exist
player8	Empty or does not exist
player9	Empty or does not exist

2.2. Read the High Score Table When the Game is Over

When the game is over you need to read the current highest score of the game from the cookies
This can be done using a for-loop to read the cookie values into an array of score record
A JavaScript class called ScoreRecord has been created to store each score record, i.e. the name and the score of the player:
```
function ScoreRecord(name, score) {
    this.name = name;
    this.score = score;
}
```

The outline of the code to read the highest scores of the game is then:

// Initialize an empty array to store the high score table
var table = new Array();

for (var i = 0; i < 10; i++) {
    // Construct the cookie name
    . . .

    // Get the cookie value using the cookie name
    . . .

    // If the cookie does not exist exit from the for loop
    . . .

    // Extract the name and score of the player from the cookie value
    . . .

    // Add a new score record at the end of the array
    table.push(new ScoreRecord(...name of the player..., ...score of the player...));
}

After retrieving the cookie value you can use the split() function to extract the name and score from the cookie
The name and score are then stored at the end of the array as a score record object
You need to finish the code given in the getHighScoreTable() function in highscore.js
You need to call this function when the game is over

2.3. Update the High Score Table

After reading the high score table you need to update it using the name and score of the current player
That means you need to ask for the name of the player when the game is over
- Note that in the assignment you need to ask for the name of the player at the start of the game
You can use the prompt() function to do that

With the name and score of the current player you can create a new record by using this code:

var record = ScoreRecord(...name of the current player..., ...score of the current player...);

You need to insert this new record in the appropriate position in the high score table
That means you need to insert the new record before the first record in the table which has a smaller score
To insert an item in the middle of an array you can use the JavaScript splice() function
For example,
- let us assume the new record is stored in the variable record and the high score table in the variable table
- if the new record is (Gibson, 75) and the high score table is [(David, 79), (Hello Kitty, 78), (Pokemon, 65), (McMug, 43), (McDonald, 28), (Keroro, 10)] you can insert the record in the appropriate position by:
```
table.splice(2, 0, record);
```
  - The first argument is the position to insert a new item in the array
  - The second argument is the number of items to be deleted in the array (always 0 in our case)
  - The third argument is the new item, i.e. the new score record, to be inserted in the array

2.4. Store the Updated High Score Table

After the high score table is updated you need to store the updated table back into the cookies
The code for that is similar to what you have done when you read the table

That means you need a for-loop to store the score records using the correct cookie names:

for (var i = 0; i < 10; i++) {
    // If i is more than the length of the table exit from the for loop
    . . .

    // Construct the cookie name
    . . .

    // Store the ith record as a cookie using the cookie name
    . . .
}

To store the score records as cookies you can use the setCookie() function given in highscore.js
Remember you need to change the score record into a single string using the '~' as the separator between the name and the score of the record
You can write the above code in the setHighScoreTable() function in highscore.js
Then run the function after you have inserted the new record in the high score table

3. Show the High Score Table

After updating the high score table we can show it on the screen
You need to create a new SVG group to show the table

For example, you can use the following SVG:

<g id="highscoretable" transform="translate(40,40)">
  <rect width="520" height="480"
   style="fill:white;stroke:red;stroke-width:2"/>
  <text x="260" y="40"
   style="fill:red;font-size:30px;font-weight:bold;text-anchor:middle">
    High Score Table
  </text>
  <text id="highscoretext" y="45"
   style="font-size: 20px;font-weight:bold"/>
</g>

The above SVG looks like this:
Your task is to put the high score records in the table
The showHighScoreTable() function is given in highscore.js
The function creates the high score table by displaying each record, i.e. name and score of a player, on its own row inside the SVG area

A row of a score record is added using the following SVG:

<tspan x="100" dy="40">...name of the player...</tspan>
<tspan x="400">...score of the player...</tspan>

The dy attribute means displaying a text span at a y position dy pixels down from the previous text y position
Therefore, by using the dy attribute of a text span you do not need to calculate the exact y position of each new row of score record
In the above example, SVG 'automatically' moves each row, i.e. each score record, 40 pixels downwards
You need to finish the addHighScore() function which is used to display one player's name and score
This function uses DOM functions (i.e. createElementNS(), setAttribute() and so on) to dynamically create a name text span and a score text span, and then append them at the end of the high score table

Submission

No submission is required for this lab
You now have all the essential skills to complete the assignment