Create a Dueling Game Using a Canvas

In this project, you're going to create a dueling game using HTML Canvas.

Click here to view fullscreen.

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

Click here to view fullscreen.

2. Create a constructor function for 'playerSprite' objects, giving them all of the necessary information (x, y, width, height, etc.). Create an array that all of these objects get pushed to.

3. Create two of these 'playerSprite' objects, and have them be drawn to the canvas to test them.

Click here to view fullscreen.

4. Create a function that will be looped many times a second (try 30) that will draw all of the 'playerSprite' objects to the canvas.

Click here to view fullscreen.

5. Make your playerSprites move whenever a selected key is pressed. (The real challenge here is getting the game to react to multiple keys simultaneously.)

Click here to view fullscreen.

6. (Part 1) Make an array that will keep track of all of the keys that are currently pressed.

6. (Part 2) Make it so that when a key is pressed, its keyCode is used to set the value at that index of your array to true. For instance, the keyCode of the left arrow key is 37, so when you press the left arrow key, the value at index 37 in your array should become true.

6. (Part 3) Make it so that when a key is released, its keycode is used to set the value at that index of your array to false.

6. (Part 4) Make a function that will cause different things to happen dependent upon which values in that array are true. Call this function in the looping function.

7. Make your characters constantly fall until they hit the ground.

Click here to view fullscreen.

8. Make your characters jump when a specific key is pressed, but only if they aren't currently in the air.

Click here to view fullscreen.

9. Create another constructor function for 'attackSprite' objects. These objects will be representative of your players' attacks. Give them all of the necessary information. Create an array that all of these objects get pushed to.

10. Create two of these 'attackSprite' variables and have them be drawn to the canvas to test them.

11. Make your attacks be drawn by the looping function, but only for a while after a specific button has been clicked. They should also show up at the right point in relation to their respective player.

Click here to view fullscreen.

12. Create a function to detect if two rectangles are colliding. (It should work for both the Attacks and the Players.)

13. Make your looping function detect if an Attack is colliding with a Player, and if so, stop the loop and tell the player they have won.

Click here to view fullscreen.

Additional Challenges: Make your characters accelerate instead of moving at a constant speed, and make the characters get knocked away from each other if their attacks collide.

Click here to view fullscreen.