top of page

CSY1018 Web Development

Javascript Assignment

Aims & Objective

The purpose of this assignment is to assess your ability to create an interactive web page using

Javascript, CSS and HTML


The zip file provides the start of a game. The code you have been given already includes

functionality for:

- Walking your character around using the arrow keys

- Collision detection so the trees cannot be walked through

The finished should allow the player to shoot arrows at enemies and dodge arrows fired by



For a bare pass (D- - D+) you make it so the player can shoot arrows which can destroy the


1) When the space bar is pressed, the player should display the fire animation (displaying the bow

briefly) and an arrow should be fired in the direction the player is facing (up, down, left or right)

from the player’s current position.

2) If the arrow hits a tree it should stop moving and remain stuck in the tree where it hit

3) If the arrow hits an enemy, the enemy should display the dead animation and be removed from

the game

For a good pass (C- - B-) you must improve the game

1) When all enemies have been shot, display a message saying “You win”

2) Display a “play again?” message to allow the player to restart the game

3) Limit the player’s fire rate to every half a second (repeatedly pressing the space bar should

only allow firing two arrows a second)

For a very good pass (B – A-) you make the enemies more interesting:

1) The enemies have two animations: appear and hide. Make it so that enemies appear and hide

at random intervals. They should not be able to be shot when hidden.

2) Make it so the enemies can fire back at the player.

2) The player has 3 lives (top left). Each time the player is hit by an enemy arrow display the

player’s hit animation and the player should lose a life. Once the player has been hit three times,

display the dead animation and do not allow the player to move. Create a restart button to allow

restarting the game.

For an excellent pass (A - A+) you must implement one of the following:

1) Add levels of increasing difficulty. For example, the first level has just one enemy, the next

level has two, etc. You can either design specific levels or make it so there are infinite levels

where a new enemy is added each time you finish a level.

2) Randomly place the trees/enemies on the screen (keep in mind that the width/height of the

screen may be different on different computers). Enemies can face all 4 directions and in-game

objects should not overlap.

3) The enemies have walk animations for up/down/left/right. Make it so the enemies can walk

around the screen avoiding trees and screen edges.

4) Make it so that the enemies can fire in any direction (not just 90 degree increments). You will

need to use CSS transform: rotate(Ndeg) to rotate the arrow and have it fire at the player’s

current position. Hint: Look up Math.atan2()


Submit Your Assignment here -

CSY1018 Web Development Javascript Assignment

    bottom of page