Space Invaders with JavaScript and HTML Canvas

It would be nice to know the exact score we get from shooting each invader. This lesson will teach you how to create a "dynamic score label" that appears, then animates out whenever you shoot an invader. It creates for a really cool effect and immediately makes your game start to stand out compared to before.

The checklist for this feature is as follows:

• Create score label with document.createElement(label)

• Append to DOM with document.body.appendChild(score)

• Change element's innerHTML

• Change style for position, color, top, left, and userSelect

• Call gsap.to() for animation

• On complete, get parent node and call removeChild()

It's time to add our game's first special weapons: explosive bombs that bounce off the edges of our screen, explode when shot, and remove a large portion of enemy invaders on touch.

This video's chapters include:

• Create bomb class

• Render moving bombs

• Have bombs bounce off edges

• Add projectile-to-bomb collision detection

• Create explosion animation

• Add bomb-to-invader collision detection

• Remove bombs from scene

• Spawn new bombs over time

Here we'll learn how to create a power-up effect—one that allows your spaceship to shoot yellow projectiles in a machine gun-like rhythm. We'll utilize event listeners, object properties, timers, and randomization to achieve this effect.

Our checklist for this feature is:

• 0:00 Create MachineGunPowerUp class

• 01:44 Render and move across screen

• 03:28 Add collision detection and splices

• 06:49 Activate power up and set timer

• 08:31 Create machine gun effect

• 11:08 Change projectile color

• 12:18 Limit machine gun

• 13:44 Garbage collection

• 16:12 Spawn in random locations

At the moment, I'd say our game is too easy. As a result, we'll be covering how to make our enemies harder in two ways:

1. By spawning them more quickly over time

2. By increasing their velocity over time

We'll also be adding functionality that allows an enemy to end the game if they touch our player directly. You'll learn a bit more about spawn timers and how to affect object properties based on special events.

• 00:00 Spawn enemies more quickly over time

• 06:42 Increase grid velocity on bounce

• 08:31 Kill player on touch

We can create an animation for our spaceship in two ways:

1. Through a sprite sheet

2. Dynamic elements created directly within canvas

We'll opt for the second method here because it lends to a more randomized look.

• 0:00 Feature summary

• 0:43 Populate particles array

• 5:54 Render new particles

• 10:38 Spread out particles

Rather than throwing a user into our game right on the initial page load, it'd be much kinder to present them with a start screen in which they can choose when they'd like to begin playing. It'd also be nice if they could restart the game after losing. To achieve this effect, we'll utilize some external assets and integrate HTML directly into our JavaScript.

• 0:00 Download assets

• 2:36 Add background asset

• 7:37 Add button asset

• 14:36 Add title

• 18:16 Add click event listener to button

• 21:13 Game over screen

• 29:16 Fix spaceship particle bugs

We'll utilize a third-party JavaScript library called Howler to add sound effects and music. Howler fixes some native JavaScript audio API issues, such as not being able to overlap audio playbacks on top of each other. We'll learn how to add audio assets, loop audio, and alter the audio's volume.

• 0:00 Credits

• 1:25 Download assets

• 2:52 Import assets

• 6:48 Implement sound effects

• 13:21 Limit play rates

• 15:33 Loop audio

• 16:02 Lower overall volume

Some of you may have noticed that your game runs a lot faster on your computer than it does on mine. This is due to requestAnimationFrame being dependent on your monitor's refresh rate.

Most monitors run at 60hz, but newer ones like MacBook pros run at 120hz instead. This effectively doubles the speed at which your game runs, so we need to take this into account when releasing our game for others to play.

A game can run completely off of one file, but if we're to continue to make updates, it can get a little annoying to find exactly what it is we want to edit. As a result, it makes sense to refactor things into a scalable, more organized format.

Here I'll show you how I'd organize our game to make things a bit easier to find while fixing a bug or two along the way.

Here you'll learn how to deploy your site to GitHub pages for free. In the end, you'll have a visitable link that you can send to friends, family, and more.

Check out the finished game and deployed link for my instance using the attached link.