COMP4021 Lab 5 Extending SVG Platform Game

Overview

In this lab, you will continue building your assignment 2 - SVG Platform Game
You need to finish the previous lab before starting this one
If you have not finished the previous lab you could use the starting code from the previous lab here
After the previous lab your game can do the following:
- Move the player left/right using the N/M key
- Make the player jump using the Z key
- Select a zoom level
You need to add three additional features to the game:

The DOM Structure of the SVG

The following figure shows the DOM structure of the SVG for this lab (extended from the previous lab):
A monster is defined in the <defs> node
Monsters in the game are added in a monsters group inside the game area
- The group contains all monsters in the game
- The monsters are copies of the monster which is defined in the <defs> area

Task

1. Add Monsters to the Game

In this task, you are required to dynamically add monsters to the screen using JavaScript
We will add a simple monster
- For your assignment, you must change the monster to something appropriate for your theme
The game can have more than one monster at any one time
Nevertheless because all of them look the same we only need to define the appearance of the monsters once
We can then put multiple copies of the same monster in the game area using JavaScript

1.1 Define a Monster in the `defs` Node

First we put a monster, which is an SVG group containing the drawing of the monster, inside the <defs> node

The code below shows an example of an SVG monster definition:

<g id="monster">
  <path d="M0,30 q0,-30 20,-30 t20,30 l0,10 continue to the next line...
           l-5,-7 l-5,7 l-5,-7 l-5,7 l-5,-7 l-5,7 l-5,-7 l-5,7 l0,-10"
        style="fill:gray;fill-opacity:0.5;stroke:black;stroke-width:2"/>
  <circle cx="12" cy="20" r="5"
          style="fill:yellow;stroke:black;stroke-width:2">
    <animateColor attributeName="fill" values="yellow;red;yellow"
                  dur="1s" repeatCount="indefinite"/>
  </circle>
  <circle cx="28" cy="20" r="5"
          style="fill:yellow;stroke:black;stroke-width:2">
    <animateColor attributeName="fill" values="yellow;red;yellow"
                  dur="1s" repeatCount="indefinite"/>
  </circle>
</g>

The above SVG defines this monster:
Note that the above SVG code uses animateColor; it works in the Adobe SVG plugin but it may not work in some versions of Mozilla Firefox
After it has been defined the monster in the <defs> node can be refered to many times
Because the monster is in the <defs> node you cannot see it in the SVG area yet
You need to 'use' the definition before you can see it

1.2 Add Monsters into the Game Area

You need to add a new monsters group inside the game area group, i.e.:
```
<g id="gamearea">
    . . .
    <g id="monsters"/>
    . . .
</g>
```
To make a new monster we dynamically create the SVG use tag using JavaScript

For example, the following code creates a use tag and adds it to the monsters group:

var monster = svgdoc.createElementNS("http://www.w3.org/2000/svg", "use");
svgdoc.getElementById("monsters").appendChild(monster);

The above code adds a monster to the DOM structure:
You need to specify the position of the monster, e.g. (200, 15):
```
monster.setAttribute("x", 200);
monster.setAttribute("y", 15);
```

Then you need to say which object to use for the use element as follows:

monster.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#monster");

The above few lines of JavaScript code are equivalent to adding the following SVG:
```
<use x="200" y="15" xlink:href="#monster"/>
```
As soon as the code is executed, the monster will be visible in the SVG area
You can create as many monsters as you like using the same method
For example, you can make a function for creating a monster and then you can call it many times:
```
function createMonster(x, y) {
    . . .
}
```
The following example shows two monsters (two use nodes) have been added to the game:

(Click to see the image in original size)

2. Shoot a Bullet

A monster can be shot by the player
In this section of the lab, we explain how to program the shooting ability
When the player shoots, a bullet will be shown moving across the game area
- For your assignment, you must change the bullet to something appropriate for your theme
Similar to a monster, a bullet is first defined in the defs area and is then created dynamically using JavaScript
You can then move the bullet across the screen by updating its position continuously

2.1 Define a Bullet in the `defs` Node

You can add the following code to define a simple bullet in the <defs> node:

<g id="bullet">
  <circle cx="5" cy="5" r="5" style="fill:red"/>
  <circle cx="6" cy="3" r="1" style="fill:pink"/>
</g>

The above SVG creates this bullet:
Then you need to add a bullet group to the game area group so that all bullets go into this new group, i.e.:
```
<g id="gamearea">
    . . .
    <g id="bullets"/>
    . . .
</g>
```
In this lab, the player can shoot as many bullets as he/she wants so there may be several bullets inside the bullet group at any one time

2.2 Shoot a Bullet

In game.js, we have to declare some variables as follows:

var BULLET_SIZE = new Size(10, 10); // The size of a bullet
var BULLET_SPEED = 10.0;            // The speed of a bullet
                                    //  = pixels it moves each game loop
var SHOOT_INTERVAL = 200.0;         // The period when shooting is disabled
var canShoot = true;                // A flag indicating whether the player can shoot a bullet

We can then decide which key will initiate shooting in the keydown() function

In the example below the spacebar is used to shoot a bullet:

switch (keyCode) {
    ...
    case 32: // spacebar = shoot
        if (canShoot) shootBullet();
        break;
    ...
}

A shooting game should stop a player from shooting many bullets in a short space of time because:
- Too many bullets will slow the game down
- The game will be too easy as monsters can be easily hit by many bullets
We can disable shooting many bullets in a short space of time using the following idea:
A variable canShoot is used to determine whether the player can shoot a bullet or not
It is temporarily set to false when a player shoots a bullet, i.e. he/she cannot shoot another bullet immediately after that
The variable canShoot is changed back to true after a while, i.e. the player can shoot a bullet again

The code to shoot a bullet and set the canShoot variable is defined in the shootBullet() function, which you have to add to your code:

function shootBullet() {
    // Disable shooting for a short period of time
    . . .

    // Create the bullet by createing a use node
    . . .

    // Calculate and set the position of the bullet
    . . .

    // Set the href of the use node to the bullet defined in the defs node
    . . .

    // Append the bullet to the bullet group
    . . .
}

Remember shooting is disabled only for a short period of time
We can enable shooting again by setting a timeout as follows:
```
setTimeout("canShoot = true", SHOOT_INTERVAL);
```
The initial position of the bullet is the center of the player

2.3 Move the Bullets across the Screen

After the bullet is created it moves to the right as indicated below:

⇨
To do that, we update the position of the bullets in the gamePlay() function

We can move the bullets by creating a new function called moveBullets() as follows:

function moveBullets() {
    // Go through all bullets
    var bullets = svgdoc.getElementById("bullets");
    for (var i = 0; i < bullets.childNodes.length; i++) {
        var node = bullets.childNodes.item(i);

        // Update the position of the bullet
        . . .

        // If the bullet is not inside the screen delete it from the group
        . . .
    }
}

We can then call the function at the end of the gamePlay() function
If a bullet is not inside the game area it is not useful any more
That means we can delete it from the group using the removeChild() function

3. Collision Detection

Something should happen when the player collides with a monster, or one of the bullets collides with a monster
A collision happens when two objects overlap each other
In this lab we will use a simple 'bounding box' approach to work out if a collision occurs
A bounding box is the name given to a simple box drawn around an object
- For example, the bounding box of the player consists of the player's position, i.e. player.position, and size, i.e. PLAYER_SIZE
To test if a subject has collided with an object we consider whether the bounding box of the subject overlaps with the bounding box of any other object

To do this, you need to create a collisionDetection() function as follows:

function collisionDetection() {
    // Check whether the player collides with a monster
    var monsters = svgdoc.getElementById("monsters");
    for (var i = 0; i < monsters.childNodes.length; i++) {
        var monster = monsters.childNodes.item(i);

        // For each monster check if it overlaps with the player
        // if yes, stop the game
        . . .
    }

    // Check whether a bullet hits a monster
    var bullets = svgdoc.getElementById("bullets");
    for (var i = 0; i < bullets.childNodes.length; i++) {
        var bullet = bullets.childNodes.item(i);

        // For each bullet check if it overlaps with any monster
        // if yes, remove both the monster and the bullet
        . . .
    }
}

The collisionDetection() function is called at the start of the gamePlay() function
In the function, we have to check two things:
1. Player collides with a monster
  - Collision occurs when the bounding box of the player overlaps with the bounding box around a monster
  - If we find the player has collided with a monster, stop the game by clearing all timers used in the game
2. Bullet collides with a monster
  - Collision occurs when the bounding box of a bullet overlaps with the bounding box around a monster
  - If we find a bullet has collided with a monster, remove both the bullet and the monster using the removeChild() function
To specify the size of a monster we add the following variables at the top of the game.js file:
```
var MONSTER_SIZE = new Size(40, 40); // The size of a monster
```
The sizes of the player, monsters and bullets have to be defined in the code because they are not available from the SVG DOM
You can then use the position and size of the player, bullets and monsters to detect any collision using the intersect() function

Submission

No submission is required for this lab
You now have the essential skills to do the majority of the assignment
Cookies and high score handling will be covered in the next lab