Chris Courses Logo
Out now

Make a killer video game while learning web dev   with pure, vanilla JavaScript

Out now

Make a killer video game while learning web dev   with pure, vanilla JavaScript

Learn how to program a full-featured game by yourself using professional-grade techniques from an eight year programming veteran.

Lifetime access to over 6 hours of professionally crafted video lessons and GitHub source code for every video that provides you with everything required to develop your very first JavaScript game.
Start first lesson free Purchase now

Introducing

JavaScript Games for Beginners

Hi! I'm Christopher Lis, a full-stack web developer who has worked professionally for clients such as Ford, Harvard University, and the American Advertising Federation, for over eight years.

When I first started learning web development, I was able to get text and images displaying in a browser, but when it came to developing interactive games, I was frustrated, baffled, and felt like I really wasn't made out to be a web developer. It seemed like game developers could easily whip up a fully functional game in a few files worth of code, but me, I was just an imposter.

I always attributed it to game developers being born with an innate ability to grasp mathematics and complex functions used throughout their day-to-day programming, but now I know, that's just not the case.

Through much trial and error, I eventually started putting the pieces of the game development puzzle together. I spent MONTHS studying and analyzing other developers canvas pieces, while also taking Khan Academy math courses to truly understand how math and programming work in tandem together to produce a fully functional game. I realized that game development wasn't that hard—it's just that no creators have pieced the puzzle together and presented it in a consumable manner that's easy for beginners.

This course covers everything I've learned during those months worth of learning throughout my eight years of experience. Rather than having you struggle to find the right resources and put all of the pieces together correctly (like I had to do), I've compiled everything into a few hours worth of concise, straight to the point videos, that'll get you started with all of the basics required to program your very own video game.

What you'll build

Together we will build a geometric, 2D platformer where you must fend off an assortment of different enemies for as long as you possibly can. We'll use vanilla JavaScript and math concepts to achieve the exact kind of play-style we want. Play the game below, just be sure to check out the instructions beneath it first!

Score: 0

0

Points

Continuously tap the WASD keys, or your arrow keys to move. Point and click to shoot. Grab power ups as needed to better your score (hold to shoot machine gun style).

Who this is for

This course is for beginners to web development. I cover everything in detail as if you have minimal experience in programming.

I used to develop many tutorials using pre-processors and bundlers like webpack. Issue is, even when I was creating these myself, I was having issues getting certain things setup! If the instructor is the one having issues with a certain tool, it certainly isn't suitable for students new to the topic at hand (unless they want to bang their heads against a wall).

As a result, I created this course using nothing but a simple HTML file and vanilla JS. This allows for students new to web development to easily jump in and begin learning game dev, without the struggle of tooling setup or learning a new library. Your focus will solely be on the important game-dev concepts at hand, and nothing else.

Although you should be fine with minimal programming knowledge, knowing about the following concepts will be beneficial to your learning:

  • let and const
  • for loops
  • classes

If anything in the course confuses you at anytime, you may post a video comment with a question in which either a fellow community member, or me myself will answer as best as possible. You may also utilize the chriscourses.com forum to get more eyes on your question and help other members in the process.

Covered Concepts

No matter if you're new or experienced to development, you'll come out with a solid understanding of each of these following game-dev topics:

  • Canvas resizing
  • Object-oriented interactions
  • Player creation
  • Object management and garbage collection
  • Precise projectile shooting
  • Randomized enemy generation
  • Collision detection
  • Explosion generation on enemy hit
  • Start, end, and restart game functionality
  • Game interface and UI creation
  • Player movement
  • Unique enemies (static, tracking, spinning, and spinning-tracking)
  • Machine-gun power up
  • Sound effects and music
  • Interactive background on move and enemy removal
  • Mobile-responsiveness and touch events

Included Lessons

On purchase, you'll receive 30 in-depth lessons on how to create a premium JavaScript game, totalling 6h 33m long. You'll also receive the completed code files and assets, so you can see exactly how this game was made.

30 Lessons — 6h 33m
01 Project Setup
9m
02 Create a Player
8m
03 Shoot Projectiles
20m
04 Create Enemies
13m
05 Detect Collision on Enemy and Projectile Hit
6m
06 Detect Collision On Enemy and Player Hit
3m
07 Remove Off Screen Projectiles
4m
08 Colorize Game
5m
09 Shrink Enemies on Hit
6m
10 Create Particle Explosion on Hit
11m
11 Add Score
11m
12 More Accurate Object Removal
14m
13 Add Game Over UI
18m
14 Add Restart Button
13m
15 Add Start Game Button
6m
16 UI Animations
12m
17 Player Movement
17m
18 Homing Enemies
10m
19 Spinning Enemies
12m
20 Homing-Spinning Enemies
5m
21 Power-Ups
49m
22 Dynamic Score Labels
15m
23 Interactive Background Particles
28m
24 Sound Effects
23m
25 Background Music
5m
26 Mute Button
16m
27 Screen Resizing
9m
28 Mobile Events and Performance
17m
29 Revisiting setInterval
5m
30 Deployment
9m

Simple no-tricks pricing

If you're not satisfied, contact me within the first 14 days and we'll send you a full refund

Monthly

$ 15 /month
  • Everything included in the one-time purchase

  • Access to 347+ more chriscourses.com tutorials

  • Cancel anytime

Most popular

One-Time

$ 49 /once
  • 6 hours of video lessons in 4K HD

  • All completed code files

  • All final image and game assets

  • Unlimited updates with no expiration

  • 14 day money back guarantee

“Holy sh*t. that's simply the best tutorial I've ever seen in my entire life. I haven't even done any GUI before and after watching this playlist, I've made a game in few days. Thank you so much man!!”

Kar Kaplani
Commenter, YouTube

“I started making canvas experiences in 2010, and I've seen many videos/tutorials since. This video is one of the best tuts I've seen out there. Your code is very clean, and in my opinion, your commentary is also very good and joyful to listen to. Keep up the great work.”

Andre Canilho
Commenter, YouTube

“This tutorial was by far the best I have seen, I loved the game and it was super simple. The camera and the lighting shows me how your course would be. IDK why people give credits to big entities when it is people like you who make true content. ”

Merlina Nadar
Commenter, YouTube

“This tutorial is f*cking perfect I watched like 10mins and now I am god in CSS, HTML, canvas and javascript.”

Mr Robot
Commenter, YouTube

“You are gifted when it comes to explaining things”

Sertan Sahbaz
Commenter, YouTube

Frequently asked questions

Is this a subscription based purchase?

Only if you select the subscription purchase option. If you select the one-time purchase, you'll have access to the course, along with any additional updates for life.

Are credit card payments secure here?

Yes! All credit card payments are managed directly through Stripe, an online payment processor considered "the standard" when it comes to accepting online payments. Your credit card never actually touches any part of the chriscourses.com server—it is encrypted and managed directly by Stripe which has strict protocols in place to ensure your card is always secure.

How long is this course?

At the time of this posting, this course is a total of 6h 33m long

How much will this course cost?

The one-time purchase will cost $49, while the monthly subscription will remain at $15 per month. Compare that to Wes Bos' Learn Node course where 4.75 hours of content costs $89, or Kent Dodds' JavaScript testing course where all of the content costs $332. This course is about 5 hours long, so want to make the price fair and competetive while still being enough to help me transition from client work to full-time course work.

I already have a chriscourses.com subscription, will I be able to access this course's contents?

Yes! If you are currently subscribed as a chriscourses.com premium member, you will be able to access this course without any additional purchase. You can do so by signing into your account and visiting the course's page.

What exactly do I get after purchase?

After purchase, you'll immediately be presented with an interface to download all of the 4k videos and completed code files associated with the course. There will also be an option to stream the course on chriscourses.com you'd prefer to watch online and add comments. No matter which option you choose initially, you'll always have the ability to both download the 4k videos or stream online.

Where can I use the code from this course?

You can use this code anywhere you'd like—a portfolio, personal website, or client website. Once you buy this course, you instantly gain the ability to use this code without crediting me at all.

What if I'm not satisfied?

Send me a message using the chriscourses.com contact form and I'll immediately refund you 100% of your purchase. I've been burned too many times by companies who refuse to offer a refund because "I've already used their product," even though I wasn't satisfied with it. I think that's deceptive, poor practice, and I vowed to never do the same to others as a business owner.

Have a question not answered here?

If you have a question that wasn't answered here on this FAQ, feel free to contact me directly and I'll get back to you as soon as possible.