Creating a Shooting Game using HTML5 Canvas and JavaScript

This free online course covers all the steps involved in creating a shooting web game using HTML5, Canvas, and JavaScript. It begins with a demonstration of the process of setting up the project, and how Canvas is used to draw rectangles, circles, and paths. This is followed by demonstrations on animating elements using the animation frame, adding the ability to move elements with user input, as well as setting the conditions for movement and shooting.

The second half begins with an explanation of collision detection, and how it can be used to detect when a player is hit. This is followed by tutorials on creating a scoring system, as well as the ability to reset the game. The material gives detailed demonstrations of how the opponent logic could be created, and how to ensure the movements and shooting appear natural. It concludes with a code recap and a tutorial on how the game can be fully automated.

In addition to teaching the process of creating a dynamic web game, this course covers a range of useful topics in web development using JavaScript and HTML. The concepts include collision detection, animations using the animation frame, drawing paths and shapes using Canvas, dynamically created objects, as well as JavaScript DOM manipulation. New and experienced web developers will find the course useful. Start now, and learn to create a web-shooting game from scratch, using HTML5, Canvas, and JavaScript in just three hours.