Canvas takes a bit of getting used to because you probably aren't familiar with the steps involved in rendering specific shapes, but once you get the hang of it the sky's the limit on what you can produce. You'll see in this project, where we bring back one of the classics -- Missile Command. You can (and should) play it here to get a feel for the game.
The basic game rules are that you have a finite number of missiles in your base at the bottom of the screen and need to intercept incoming missiles before they hit the ground. You do this by clicking on the screen where you would like your missiles to detonate. After clicking, a missile slowly travels to the point of click and then explodes. Each explosion sets off a chain reaction, blowing up any missiles it touches before fading away.
Build Missile Command in an HTML5 Canvas.
You'll need to think about how to render each shape (e.g. missile, explosion) as well as how to use 2-dimensional space to place objects on the screen. You'll need to keep track of where each object is on every refresh of the screen, and you'll need to use some basic geometry to determine how the speed/direction of the missiles changes their position each refresh.
If your game logic gets too complicated or the speed is too fast, you'll probably find that the browser starts getting choppy and unreliable.
Submit a link below to the github repo with your files in it by using a pull request. See the section on Contributing for how. Please include your partner's github handle somewhere in the description if you had one and they would like attribution.
This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something
From the creators of The Odin Project...