Create a Block Pushing Game Using A Canvas

In this project, you're going to create a block pushing game using a JavaScript canvas.

Click here to view fullscreen.

1. Add a canvas element to your page, and make JavaScript variables for it and its 2d context.

2. Make a new constructor function for a "spriteSquare" object that will keep track of the x, y, width, height and color of a square in the game. You can read more about constructor functions here.

3. Make two spriteSquares, one for the player and one for the ball.

4. Make a new array to hold all of your spriteSquares. Make sure to push your spriteSquare into this array.

5. Add an event listener that will make the player square move to the mouse's x and y whenever the mouse moves, then clear the canvas and redraw all of your squares. (If you don't clear your canvas, all of the old squares will still show up!)

Click here to view fullscreen.

6. Make a function that will check whether two squares are colliding.

7. Every time the mouse moves, call this function to check if the player and ball are colliding, and move the ball dependent upon how they are colliding.

Click here to view fullscreen.

8. Add in an endzone square.

Click here to view fullscreen.

9. When the ball and endzone collide, make the game stop.

Click here to view fullscreen.

10. Make the window alert the player that they have won!

Click here to view fullscreen.