Assignment 2
GAME1003 – Web Game Development
** Due Sat, April 08 **
Assignment 2:
The goal of this assignment is to utilize HTML5 canvas technology and
JavaScript to build a simple 2D game. The background will consist of scrolling
tiled images giving the illusion of movement. Player movement and capability to
shoot objects while avoiding collision will also be implemented.


Game Setup

1) The html file (index.html) will be a simple HTML5 document housing a
single canvas element and a div/paragraph element used for displaying
score. As well it will reference your external JavaScript file. Place the
validation script just before the closing </body> tag:
<script src=http://my.gblearn.com/js/loadscript.js></script>

2) Ensure that the canvas element is in a 2D context (do this in JS) and is
700 pixels wide by 600 pixels tall and centered in the html page.

3) Use any CSS as you need. Apply any background color to the body of
your HTML document. Up to you if you like to use external CSS file.

4) Store all your images in a separate folder.


Scrolling Background

1) Your 700x600 scrolling background will be setup as a grid with 6 rows and
7 columns PLUS an extra row to make the scrolling look seamless.

2) This means each tile should be 100x100 in size. It will scroll vertically
from top to bottom (hence: tiles move down each frame of the game). For
this, you’ll need to increment the y value of each tile. Set the scroll speed
to something reasonable.

3) The background will be made up of two different tile images.
a. The first image is the main safe space, like water or stars or clouds,
or whatever you choose. The player cannot collide with these tiles.
b. The second image is an obstacle that the player is supposed to
avoid, like rocks for example.

4) The background should be made of safe tiles with some obstacle tiles
mixed in. Generation of obstacle tiles can and should be random so each
play through is different. Some considerations are:
2
a. Start out with all safe tiles when the game begins and when one
row goes off-screen, that’s when you can remove that row and
generate a new row at the top.
b. When coding for a random obstacle generation, ensure that the
player is not blocked by many obstacles that makes it almost
impossible to pass through. The game should not be so difficult
that player constantly crashes into the obstacle nor should be so
easy that obstacles are rarely seen! One recommendation is to
apply 20% obstacle tile, and 80% safe tile for the background for
beginners.
c. Optional challenge: As time goes on in the game you could make
the game more challenging by introducing more obstacles. i.e after
30 seconds of being alive, increase the number of obstacles by 5%
to 25%. Repeat this incrimination 3 times, to a maximum of 35%
obstacles – 65% safe tiles. 1% bonus mark

5) You’ll have a main setInterval loop controlling everything and thus a
pseudo-engine set up with different functions.


Player Movement & Collision

1) The player should also be an image, same size as the background tiles
(100x100) pixels.

2) Ensure that your background is initially made up of all safe tiles, so you
can have the player start near the bottom of the game area.

3) Keep in mind, the player is NOT part of the background and should be
rendered AFTER the background, so it appears on top of the tiles.

4) The player should be able to move in all four cardinal directions plus
diagonal. Use the arrow keys and/or wasd to move the player.

5) Use spacebar to shoot down the enemy/alien.

6) Set the player movement speed as you like. Should be slightly higher than
the background scrolling speed.

7) You will need to keep track of the player’s X and Y positions in the canvas
for collision purposes. The width and height (same size) of the player
image will also be used in collision.

8) If the player touches an obstacle tile, stop the scrolling and use a simple
alert dialog box to notify that the player has crashed.


Shooting enemies (i.e, aliens/birds/planes)

1) An enemy object such as alien appears randomly near the top (one of the
top three rows) of the game area and moves horizontally. Enemy’s speed
is about the same as the background tiles. You can use an array to store
at least 3 or more enemies and recycle each one that moves out of the
game area.

2) Player scores 10 points every time an enemy is shot. Display ongoing
score beside or below the canvas in a div or paragraph element.

3) When an enemy gets shot, the missile and the enemy should disappear.

Optional challenge: Obstacles should block the player’s shot, preventing a
missile from reaching the enemy. Missile would disappear when it hits the
obstacles that are part of background tiles. 1% bonus mark
You could store each background tile as an object in a 2 dimensional array to
layout the rows and columns.
Sound effects or music are not required, but if you want to include them you can.