Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Space Invaders with JavaScript and HTML Canvas
Rating: 4.6 out of 5(35 ratings)
458 students

Space Invaders with JavaScript and HTML Canvas

Improve your game-dev skills by learning how to code power-ups, explosions, and more for this classic game type
Created byChristopher Lis
Last updated 11/2022
English
English [Auto],

What you'll learn

  • Setup a development environment
  • Create and move a player's spaceship
  • Import game images
  • Generate grids of enemy invaders at set intervals
  • Shoot projectiles
  • Remove enemies with precise collision detection
  • Create bombs that explode multiple invaders at once
  • Obtain machine gun power-ups that alter your rate of fire
  • Make enemies progressively harder
  • Add particle animations that follow your spaceship
  • Develop a game UI using HTML and CSS
  • Start and end screens with a restart button
  • Add custom sound effects and music
  • Code consistent frame rates for all types of monitors
  • Deploy to GitHub pages

Course content

2 sections • 26 lectures • 5h 20m total length

  • Project setup5:24
  • Create a player14:19

    Create a player class with position and velocity, render a spaceship image on the canvas using drawImage, load the image, center it at the bottom, and animate with requestAnimationFrame.

  • Move player15:29

    Learn to move the player in a canvas game by handling keydown events, tracking pressed keys, updating velocity, constraining movement to the screen, and rotating the player for a tilt.

  • Create projectiles10:06

    Create a projectile class with position, velocity, and radius; render as a circle on the canvas, update movement, and spawn from the player's center on spacebar while removing off-screen projectiles.

  • Create an invader4:19

    Import invader PNG, create an invader class with velocity, center it on screen, and render it in the animation loop while preparing for projectile collision and a grid of invaders.

  • Create grid of invaders15:57

    Create and move grids of invaders by building a grid class that generates dynamic rows and columns, renders invaders, and manages velocity-driven movement and downward shifts.

  • Spawn grids at intervals6:10

    Spawn grids at intervals to create an infinite game, using a frames counter, modulo checks, and a random interval to push new grids.

  • Shoot invaders8:35
  • Update grid width4:09

    Update grid width by using the first and last invaders' positions to recalculate width, then adjust grid x and remove invaders and projectiles for garbage collection.

  • Invader projectiles10:20

    Create invader projectiles by duplicating the projectile class into a white, rectangular bullet; enable invaders to shoot, render, and garbage-collect these bullets, and detect collisions to end the game.

  • Enemy explosions12:16

    Create reusable particle explosions for enemies and the player using a particle class, render particles with randomized velocity and invader color, fade via opacity, and remove them for performance.

  • Background stars5:15

    Add background star particles using the existing particle system, placing white stars at random positions and moving them downward, recycling them from the top to simulate a galaxy voyage.

  • Lose condition3:44

    Hide the player by setting its opacity to zero on hit, then use a 2-second setTimeout before stopping the game by toggling game over and game active and guarding actions.

  • Score4:30

    Add a fixed width canvas overlay by creating a score element above the canvas. Increment the score in JavaScript when removing an invader and update the score display.

  • Fixed width canvas3:25

    Fix a 1024 wide canvas with a 16:9 aspect ratio, center it with flex inside a containing div, and position the score relative to that container for consistent display.

Requirements

  • You should understand basic JavaScript principles like var, let, const, for loops, and functions
  • Some prior knowledge with HTML canvas will help, although it's not strictly required

Description

PLEASE READ: This is a freemium course—the first 2 1/2 hours are free (you can watch right here on Udemy [or YouTube] with each video's "Preview" button), while the remaining 3 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 Code Space Invaders course, where you will learn how to create a custom variation of the classic game, Space Invaders. We'll use JavaScript and HTML5 canvas fundamentals to progressively enhance your game development skills, and go all the way 'til you have a full-blown Space Invaders game live on the web.

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:


  • Setup a development environment

  • Create and move a player's spaceship

  • Import game images

  • Generate grids of enemy invaders at set intervals

  • Shoot projectiles

  • Remove enemies with precise collision detectionk

  • Create bombs that explode multiple invaders at once

  • Obtain machine gun power-ups that alter your rate of fire

  • Make enemies progressively harder

  • Add particle animations that follow your spaceship

  • Develop a game UI using HTML and CSS

  • Start and end screens with a restart button

  • Add custom sound effects and music

  • Code consistent frame rates for all types of monitors

  • Deploy to GitHub pages


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 Space Invaders game that's ready for production launch.

Who this course is for:

  • Beginner game devs looking to bolster their skills and better understand game development in general

Report abuse