The game that you will implement is called "Block Avoider." It's a game where teh user moves a virtuous blue block around and tries to avoid as many of the black blocks that are in a hurry to get from the far right side of the screen to the left. The user uses the arrow keys to move the blue block around. If there is every a collision between the user and the black block, then the black block with which the user collided is erased from the screen and a collision is detected. Game statistics are displayed - the number of blocks avoided, teh number of collisions and the number of steps elapsed since the beginning of the game (the number of steps is the number of times the canvas is re-drawn).

Game requirements:

1. You must use at least one array somewhere and in a meaningful/natural way, e.g., to store all the blocks.

2. Don't change the width or height of the canvas.

3. The timer for the graphics redraw should be set to repeat every 50 milliseconds. So a step in the game takes 50 milliseconds. That is, the repaint method in the starter code should be called once every 50 milliseconds.

4. Each square block must:

a. be black and have a random size that is at least 80 pixels.

b. Start with its upper left corner at a random y-coordinate between 0 and 479, inclusive, and its upper left corner at a x-coordinate 640.

c. have a strictly horizonal movement of a random number of pixels in each time step, with minimum step of 10 pixels.

6. The game releases MAX_BLOCKS blocks. This is a const set to 100, but your project should if this const is set to 500, and so on.

7. When all MAX_BLOCKS have either moved off the far left or collided with the user block, the game ends, the canvas is cleared and a "Game Over!" message is displayed, giving the overall success percentage.

8. The blue user block has the following specifics:

a. it should start out stationary and in the center of the canvas.

b. it should have a width and height of PLAYER_SIZE, which is a const whose value is 20.

c. it should be pure blue in color.

d. its movement should be controlled by the arrow keys. (code given in start code)

e. it should NOT move off ANY of the boundaries of the canvas.

9. The "easy", "moderate", and "hard" game modules should release a new block every 35, 20 and 10 steps of the timer, respectively.

10. If the blue block cuts through any part of a black block, then the latter is removed and a collision is registerd.

11. For each black block that moves completely off the far left of the canvas, an escape is registered.

STARTER CODE GIVEN BELOW:

JAVASCRIPT CODE:

const WIDTH = 640;

const HEIGHT = 480;

const PLAYER_SIZE = 20;

const REPAINT_DELAY = 50;

const EASY_DELAY = 1750;

const MODERATE_DELAY = 1000;

const HARD_DELAY = 750;

const MAX_BLOCKS = 100;

// You might want to add more constants...

var playerX = WIDTH / 2 - PLAYER_SIZE / 2,

playerY = HEIGHT / 2 - PLAYER_SIZE / 2;

// You will definitely NEED to add more variables...

document.onkeydown = function(e)

{

if (e.keyCode == 37)

left();

else if (e.keyCode == 38)

up();

else if (e.keyCode == 39)

right();

else if (e.keyCode == 40)

down();

};

function up()

{

alert("up");

}

function left()

{

alert("left");

}

function right()

{

alert("right");

}

function down()

{

alert("down");

}

window.onload = repaint;

function repaint()

{

var canvas = document.getElementById("myCanvas"),

context = canvas.getContext("2d");

context.fillStyle = "#0000FF";

context.fillRect(playerX, playerY, PLAYER_SIZE, PLAYER_SIZE);

}

// You will probably need to add more functions...

HTML CODE:

Block Avoider

width="640"

height="480"

style=" background-color: #fff8dc;

vertical-align:

bottom; border:

solid 5px #000000;">

Easy

Moderate

Hard

Collisions = 0

Avoisions = 0

Steps elapsed = 0