Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

How to Code JavaScript Games: A 2D Shooter with HTML5 Canvas

Name: How to Code JavaScript Games: A 2D Shooter with HTML5 Canvas
Rating: 4.8 (48 reviews)

Learn to develop a 2D geometric shooter by combining programming concepts with geometry and physics

Created byChristopher Lis

Last updated 5/2022

English

What you'll learn

Project Setup
Player Creation
Projectile Creation
Enemy Creation
Collision Detection
Garbage Collection
Particle Explosion Creation
Score Tracking
Refactoring and Performance Techniques
User Interface Creation
User Interface Animation
Player Movement
Different Types of Enemies (Homing, Spinning, and Homing-Spinning)
Power-Ups
Interactive Background Particles
Sound Effects and Music
Mobile Responsive Techniques
Mobile Events and Testing
Deployment

Course content

2 sections • 30 lectures • 6h 32m total length

Project Setup9:33
Create a Player8:11
Let's set up a basic player class that we'll use to create and render our game's hero: a small white circle placed in the middle of the screen.
Shoot Projectiles20:16
Here we'll give our hero a semi-automatic cannon which we can shoot whenever we click on the canvas. We'll use some event listeners and a little bit of math to achieve this effect.
Create Enemies13:29
Now we need some baddies. Our enemies are going to be circles of different sizes that come outwards from the edges of the screen and move inwards towards the center in an attempt to destroy our player.
Detect Collision on Enemy and Projectile Hit6:18
Here we'll learn how to detect collision between our enemies and projectiles. We need a way to defend ourselves correctly, so let's implement it.
Detect Collision On Enemy and Player Hit3:08
If an enemy touches us, what happens? Yes that's right, we die. Here we'll learn how to code this effect using the same collision detection method we used for our projectiles.
Remove Off Screen Projectiles4:18
Projectiles that aren't rendered on the screen are pretty worthless, therefore, we need to write some code that removes them. Let's use this lesson to ensure our game is as performant as possible with garbage collection.
Colorize Game5:53
Life is dull without colors, so let's add some. We're going to learn how to apply varying colors to each of our enemy particles as they travel throughout our game.
Shrink Enemies on Hit6:50
Enemies can disappear instantaneously, but it would be even cooler if we could make them shrink into nothingness instead. We'll use a popular animation library called GSAP to achieve this effect.
Create Particle Explosion on Hit11:20
When a projectile hits an enemy, yes the enemy should shrink, but they should also go boom. With a few particle physics techniques, we'll learn how to create an explosion effect that almost resembles a firework whenever a projectile hits an enemy.
Add Score11:27
A shooter game like this would not be complete without a score (it could be, but wow would it be boring). Here we'll utilize HTML to create a score label that updates whenever we shoot off enemies.
More Accurate Object Removal14:06
Currently to remove objects from our game we loop through the front of our array, then call a splice method. Although this'll work when we use in pairing with setTimeout, it will cause issues later on once our game gets more complex and requires more resources. As a result, here we will refactor any forEach loop, that also uses splice, to loop through its contents starting from the back of the array.
Add Game Over UI18:23
With some basic HTML and CSS magic, we can create a really clean interface that displays when our game should begin and when it is over. It doesn't have to be complicated, and we can make this as dependency free as possible by not using any external libraries.
Add Restart Button13:35
We need a way to restart our game, because if we lose, we'd probably like to play again (as long as our game isn't garbage). Let's implement a restart button to finish off the first module of our game.
Add Start Game Button6:32
It would be a bit jarring if we forced our player to play the game as soon as it finished loading. Rather, we want the user to initiate an actual play through so they can begin whenever they feel ready. To achieve this effect, we'll create a simple "Start Game" modal in which a user can click a button to begin.
UI Animations12:45
User Interface (UI) animations are a nice way to bring a bit of professionalism to your game. They also help the user understand how or why something appeared or disappeared as they show the UI element's action over time rather than immediately affecting something.

This episode will show you how to utilize GSAP to fade out your start game modal when you click the start game button, and how to fade in that same modal when you end up losing the game.

Player Movement17:41
Getting your player to move around the screen requires event listeners for keydown events (pressing down on your keyboard). Once you learn how to listen for specific keys, you can react to these events and force your player to move by altering its velocity. This video will teach you exactly that and a few other techniques such as keeping your player confined to the visible area of your screen.
Homing Enemies10:30
A game can only get so far with one type of enemy. This tutorial will teach you how to create a homing enemy: one that tracks you down and follows you no matter where you move. Here we'll utilize some more trigonometry with Math.sin() and Math.cos() functions.
Spinning Enemies12:25
Getting an enemy to orbit in a ring-like motion requires a bit of trigonometry, but nothing we haven't learned in previous tutorials or courses. Here we'll be reviewing those exact skills and also cover techniques to get spinning enemies spawned at a randomized rate in sync with other enemy types.
Homing-Spinning Enemies5:31
Homing and spinning enemies are both tough, but you know what's even tougher? A combination of the two: homing-spinning enemies.

This episode will teach you how to combine homing and spinning enemies together to create an enemy that's hard to shoot and hard to escape from.
Power-Ups49:07
Power-Ups are similar to other object classes, but if we want to make the actual rendered object stand out (by using an image and making it rotate), we need to do an extra bit of work.
Here we'll be replacing our default circle objects with that of an image, a lightning bolt specifically, that'll serve as an indicator that this is something we want to grab to obtain additional powers. We'll be covering the exact process for finding a good power-up icon, how to export it into something we can use within canvas, and how to ensure our player gains abilities once this power-up is grabbed.
You'll also learn a few things regarding how to manage this power-up such as how to create multiple instances of it over time, how to ensure it expires after a certain amount of time has passed, and how to change the player and projectile colors after it has been grabbed.
Dynamic Score Labels15:16
Although we only have one static location for our overall score, it's a good idea to dynamically show how many points we're earning for each enemy we hit. This tutorial will show you how to render and animate HTML on your canvas to display the exact amount of points you've earned for hitting or eliminating an enemy.
Interactive Background Particles28:04
Our game is looking good, but it's having trouble standing out from that of a standard 2d shooter. This episode will teach you how to create a geometric background that interacts with your player as you traverse the screen and eliminate enemies.
Sound Effects23:38
No game is complete without an array of sound effects to go with it. This tutorial will teach you how to integrate sound effects into your game with JavaScript, and where to find good sound bites to use.
Background Music5:22
Background music is a quick and easy way to add excitement and entertainment to your game. Very similar to sound effects, you'll be integrating background music by using a new Audio() object. However, we need to take into account: what happens if our audio reaches the end? How do we replay our audio?
This video will teach you how to do exactly that.
Mute Button16:46
Keeping background music running in a game can get quite annoying. It makes sense to give users the option to turn this off. This tutorial will show you how to get free sound on / off icons to use and how to implement them so we can mute our game whenever we'd like.
Screen Resizing9:33
If you try resizing your browser window before you play your game, you're going to notice quite a few bugs come up... How annoying. This video will show you how to add resize event listeners to your game so that no matter the size of your browser, your game will still function as intended.
Mobile Events and Performance17:57
If you'd like for your game to work on a mobile device, you'll need to add in a few additional event listeners: touchstart and touchmove. There are a few caveats with adding these as clientX and clientY are not directly available within the event listeners' event objects. This video will show you workarounds for this and how to emulate a mobile device using chrome.
Revisiting setInterval5:37
Our current usage of setInterval is great for spawning enemies and power-ups, but there are some drawbacks that we need to address. Since setInterval functions still call themselves when switching to another tab, we need a way to clear these intervals, then restart them when navigating away from our game. We'll learn how to do exactly that, right here.
Deployment9:22
To deploy our game, we'll use a free solution: GitHub pages. Now this does require that you have a bit of knowledge regarding Git and GitHub, so if you're unfamiliar with either, now is the time to watch a brief intro video on YouTube. Otherwise, we'll simply upload our project to GitHub, then select the option to host our game live on the web.

Requirements

A basic understanding of JavaScript (know how to create functions, know differences between var, let, and const; etc.)
How to push to a GitHub repo (only required for the last lesson on deployment)

Description

PLEASE READ: This is a freemium course—the first 1-2 hours are free (you can watch right here on Udemy [or YouTube] with each video's "Preview" button), while the remaining 4-5 hours require course purchase. I've always been a big advocate of spreading the basics to as many people as possible, as I believe knowledge and personal growth are some of the best ways to better our world as a whole. Enjoy.

Welcome to the JavaScript Games 101 course, where you will learn how to create your very first 2d, geometric, shooter-style JavaScript game.

My name is Christopher Lis, and I'm an award winning Full-Stack Engineer with over ten years of web development experience. I've directly worked with clients like Harvard University, The Basketball Tournament, and premium award winning agencies like Brave People.

The goal of this course is to give you the skillset required to code your own JavaScript games from scratch. Many game dev fundamentals are covered in this course, and much of what you'll learn uses hand-written math functions rather than hidden away abstractions that game dev libraries typically provide.

In this course, you'll learn everything from:

- Project Setup

- Player Creation

- Projectile Creation

- Enemy Creation

- Collision Detection

- Garbage Collection

- Particle Explosion Creation

- Score Tracking

- Refactoring and Performance Techniques

- User Interface Creation

- User Interface Animation

- Player Movement

- Different Types of Enemies (Homing, Spinning, and Homing-Spinning)

- Power-Ups

- Interactive Background Particles

- Sound Effects and Music

- Mobile Responsive Techniques

- Mobile Events and Testing

- Deployment

And so much more.

If you're serious about taking your game dev skills to the next level, then let me guide you through the full production of a 2D game that's ready for production launch.

Who this course is for:

This course is for beginner JavaScript developers looking to get into the realm of game development.

How to Code JavaScript Games: A 2D Shooter with HTML5 Canvas

What you'll learn

Explore related topics

Course content

Basic Game Functionality (player, enemies, shooting, and explosions)16 lectures • 2hr 46min

Movement, Enemies, and Enhanced Interaction14 lectures • 3hr 47min

Requirements

Description

Who this course is for: