Javascript game creation + implementing using teamviewer

Brief The zip file [login to view URL] 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 enemies. Requirements For a bare pass (D- - D+) you make it so the player can shoot arrows which can destroy the enemies. 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 [login to view URL]() Technical Details The following CSS classes are available for you to use. You can chain CSS classes by choosing one of each of the following. For example, the CSS class list: player left stand fire Displays the player looking left and standing still while firing the bow. Animations with times (in brackets) will need to be removed after the animation has finished Base class Directions Primary Actions Secondary Actions player left right up down walk stand fire (0.5s) dead enemy grey left right up down walk stand fire (1s) dead appear hide arrow left right up down tree blocking used to describe elements which cannot be passed through by players or arrows - i will also provide content code guidelines that you MUST follow - you will implement the code that you have done and implement it on team viewer