COMP4021 Lab 4 SVG Platform Game

Overview

In this lab, you will start building your second project - SVG platform game
Three files (game.html, game.svg, game.js) are given to you as a starting point here
This lab project works in Mozilla Firefox (no plugin required) and Internet Explorer (Adobe SVG plugin required)
You need to do these tasks:

Structure of the Game Files

This diagram shows the relationship between the three given files:
game.html
- A simple HTML page that contains an embed SVG document and a reference to a JavaScript file
game.svg
- An SVG file that contains all the graphic components of the game
- The SVG file executes appropriate JavaScript code in the load event, i.e.:
```
<svg ... onload="top.load(evt)" ...>
```
- The top variable points to the parent document of the SVG file, i.e. the HTML page
- The JavaScript code is written in the game.js file
game.js
- A JavaScript file contains the code which defines the following:
  - Object properties
  - Event handlers, i.e. load(evt), keydown(evt) and keyup(evt)
  - Functions used to control the behavior of the objects

The DOM Structure of the SVG File

The following figure shows the DOM structure of the SVG:
<defs>
- It contains all definitions such as gradients and patterns
<g style="clip-path:url(#gameareaclip)">
- It is the group element which contains the 'gamearea' group
- It is clipped by the clip path defined in the <defs> node
- It is clipped because we do not want to show the objects that lie outside the background
<g id="gamearea" .../>
- It is the group element which contains all the moving elements related to the game such as the player, the monsters, etc.
<g id="player">
- The group is the element that represents the player in this game
<g id="platforms" .../>
- The platform group contains all the platforms in this game

Task

After extracting the given zip file, you can start the game by double-clicking game.html

(Click to see the image in the original size)
You can move the player (the smiley) around by pressing the "N" key for moving to the left and the "M" key for moving to the right
You need to add three features to this system:
1. Platforms for the player to stand on
2. The ability to press a key to make the player jump from one platform to another platform
3. The ability to select a different zoom level for the game area

1. Adding Platforms to the Game

Your first task is to add the platforms so that the player can stand on the platforms of the game
To do this you can add rectangles to the gamearea using the rect SVG command
For example, you can use the following SVG code to add a red platform with the size of 100x20 at the position (20, 20):
```
<rect x="20" y="20" width="100" height="20" style="fill:red"/>
```
Because of the structure of the given JavaScript code your platforms' position and size must be a multiple of 20
This ensures that the code for calculating the player movement can be simple
You are free to add any platforms to your game as long as you follow the requirement above (position and size must be multiples of 20)
Here is an example of platforms added to the game:

(Click to see the image in the original size)

2. Jump Movement

After you add the platforms you will find that the player can only fall off a platform but cannot jump back on it
We will add a jump action to the player so that the player can jump from one platform to another
First, you need to select a key (any key) for controlling the jump movement of the player
You can add another case statement in the keydown() function in game.js

For example, you can use the "Z" key to represent the jump action, as follows:

function keydown(evt) {
    . . .
    switch (keyCode) {
        . . .
        case "Z".charCodeAt(0):
            . . .
    }
    . . .
}

The code "Z".charCodeAt(0) returns the ASCII code of the character "Z"
To make the player jump you need to add a vertical speed to the player object
This can be done by assigning a JUMP_SPEED constant to the player.verticalSpeed variable
This player.verticalSpeed variable is the current speed of the player in the vertical direction
It is used to calculate the player movement in the gamePlay() function
However you cannot always let the player jump in the game
The player can only jump when he/she is standing on one of the platforms
We can check whether the player is standing on a platform using the isOnPlatform() function of the player object, i.e.
```
if (player.isOnPlatform()) {
    Set the player vertical speed
}
```

3. Zoom Level Selection

We can let the player select a different zoom level
For example, the score can be higher when a larger zoom level is applied in the game, because it is harder to play
In game.svg, the game area is contained inside a group named "gamearea"
You need to preset all objects in the "gamearea" group by using getElementById
You can achieve different zoom levels by changing the scale of all elements under that "gamearea" group
To do so, you can make use of the transform attribute of the group
The transform attribute can be used to apply various transformations of an SVG node including translation, rotation and scaling
First, you need to add some kind of control, such as a button, to select the zoom level in the game

For example, a simple SVG button can be created using the code below:

<g onclick="the code to run when clicked" transform="translate to a proper position">
    <rect x="0" y="0" width="140" height="40"
          style="fill:white;stroke:red;stroke-width:2" />
    <text x="70" y="28"
          style="fill:red;font-size:25px;text-anchor:middle">Zoom</text>
  </g>

This is the SVG created by the above code
Now the game area looks like this:

(Click to see the image in the original size)
You need to create a function in game.js so that when the button is clicked this function will be called
This new function is used to modify the zoom variable, which is used to indicate the zoom level of the game
For example, if the zoom level is 200% you can assign 2.0 to the zoom variable
Once the zoom variable is modified you need to adjust the transform attribute of the game area in the function updateScreen
There are two parts in the transform attribute:
1. scale(sx,sy)
  - This is used to change the scaling factor of the game area
    
    ⇨
  - For example, if you want to set the zoom level to 200%, you will use the following attribute:
```
transform="scale(2.0)"
```
  - For the SVG scale attribute, if there is only one parameter, both sx and sy are equal to the value provided
2. translate(tx,ty)
  - After scaling, you need to move the game area so that the player is at the center of the screen, i.e.:
    
    ⇨
  - The parameter tx and ty are the coordinates of the top-left hand corner of the zoomed area with respect to the local coordinate system of the game area
  - That means you need to calculate tx and ty with respect to the center of the player, i.e. (player.position.x + PLAYER_SIZE.w / 2, player.position.y + PLAYER_SIZE.h / 2)
After calculating the appropriate (sx, sy) and (tx, ty) pairs, you then need to assign the transform attribute of the platform as follows:
```
setAttribute("transform", "translate(" + tx + ", " + ty + ") scale(" + sx + "," + sy + ")");
```

Submission

No submission is required for this lab
This lab work is the starting point of your assignment two, so please save a copy of your work somewhere safe