Alison's New App is now available on iOS and Android! Download Now

Creating a Shooting Game using HTML 5 Canvas and JavaScript

Learn to create a fun, shooting web game using HTML 5, Canvas and JavaScript; in this free online course.

Publisher: Laurence Svekis ✔
In this short, free online course, you will learn to create a fun shooting game from scratch, using elements drawn with canvas, and gameplay created using JavaScript. You will learn everything from setting up the project and drawing shapes using canvas, to creating the logic for the opponent, and even completely automating the game to have the players play against themselves, completely responding to the movements and actions of each other.
Creating a Shooting Game using HTML 5 Canvas and JavaScript
  • Duration

    3-4 Hours
  • Students

  • Accreditation






View course modules


This short, free, online course will cover all the steps involved in creating a shooting web game using HTML 5, Canvas, and JavaScript. The course 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 of the course begins with an explanation of Collision Detection, and how it can be used to detect when a player is hit. This is quickly followed by tutorials on creating a scoring system, as well as the ability to reset the game. The course proceeds to give detailed demonstrations of how the opponent logic could be created, and how to ensure the movements and shooting appear natural. The course 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 fun and 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, would thus, find the course very useful. Start now, and learn to create a web-shooting game from scratch, using HTML, Canvas, and JavaScript in 3 hours.

Start Course Now