How to Program Games: Tile Classics in JS for HTML5 Canvas

Learn to code tile-based worlds and related core gameplay for genres like arcade, overhead racing, and puzzle adventure.

4.15 (2005 reviews)
Udemy
platform
English
language
Game Development
category
instructor
10,187
students
14.5 hours
content
Jul 2020
last update
$99.99
regular price

What you will learn

Create, display, and play with a 2D tile world that supports optimized collision (a central concept for generations of games in a variety of genres!)

Program games in JavaScript for HTML5 Canvas without using any external libraries or plug-ins

Create, load, display, and rotate image graphics in games

Break game code into multiple files to better manage large projects

Define a class and use it to create multiple instances of gameplay objects in unique positions (note: only using the very basic first concept of object-oriented programming, it doesn't dive deep into that rabbit hole)

Handle mouse input for a one-player game, or keyboard controls for both one and two-player games

Implement basic item pick-ups (keys) and trigger their usage upon collision (open doors)

Develop and adapt gameplay for basic platformer movement, digital board/strategy games, simple matrix formations for retro arcade-style enemies, and worlds larger than the screen viewed by scrolling camera

Apply simple trigonometry calls to move game objects at arbitrary angles

Implement basic loading screen functionality in HTML5

Description

By taking this new course you'll program several classic game types that all incorporate 2D tile-based worlds. You'll code in JavaScript for HTML5 Canvas, so a text editor and ordinary web browser are all you need (an art program can be handy for a few sections but is not required). I've attached my code for each step so you'll never be stuck. At the end you'll learn even more ways to apply what you've learned. Also by completing the course you'll get a PDF of my complete 500-page textbook on game development: Hands-On Intro to Game Programming. The book contains over 100 exercises, a couple of more game types, and additional material with more detail about the projects you created in this course.

(HTML5 Logo in the course image is by W3C, licensed under Creative Commons Attribution 3.0 Unported. Background pattern for transition cards CC BY-SA 3.0 Subtle Patterns © Atle Mo. drawn by Paul Phönixweiß.)

Content

Ball with Mouse Paddle - Warm-Up and Review

Section Introduction
Create the HTML File
Proper HTML Header
JavaScript in HTML with Console Use
HTML5 Canvas with Setup Function
Draw Filled Rectangle and Circle
Variable and Timed Updates for Motion
Modify Speed, Also for Vertical Motion
Reason for a Big Rectangle Each Frame
Separate the Motion and Draw Code
Make Functions for Fill Rect and Circle
Mouse-Controlled Horizontal Paddle
Reset Ball When It Goes Off Bottom
Move Paddle From Edge, Reflect Ball
Aim Based on Where Ball Hits Paddle
Section 1 Review

Row of Removable Bricks

Section Introduction
Display Mouse Coordinate by Cursor
Set Up and Display the First Brick
Draw Multiple Bricks with Gaps
Vanish Individual Bricks
Renumber Bricks to Start at Zero
Using an Array for Bricks
How For() Can Loop on the Brick Array
Clearing Isolated Bricks in the Array
Label Deeply Stacked Closing Braces
Section 2 Review

Ball-Brick Grid Collision

Section Introduction
Display Tile Coordinate Near Mouse
Supporting Multiple Brick Rows
Changing Brick "Count" to "Columns"
Support Removal of Each Brick Position
Make More Bricks, and Smaller
Compute Index From Row and Column
Remove Bricks Under Mouse
Remove Bricks Where the Ball Goes
Fix Edge-Wrap Collision Bug
Bounce Ball When It Hits Bricks
How to Start the Ball in the Center
Section 3 Review

Advanced Ball Collision

Section Introduction
Cutting Ball Code Into Functions
Understanding the Ball-Brick Side Test
Get the Ball Bouncing Off Brick Sides
Add Cheat to Reposition the Ball
Fix the Covered-Edge-Corner Case
Section 4 Review

Finish Brick Gameplay

Section Introduction
Keep Count of Bricks Remaining
Start with Empty Gutter at Top
Reset Ball at Start, Bricks After Last Hit
Reset Bricks When Player Misses Ball
Fix Bug with Hitting Bottom Bricks
Testing to Look for Remaining Bugs
Fixing the Ball-Stuck-Along-Edge Bug
Play Testing to Look for Bugs Again
Section 5 Review

Adapt the Grid for Racing

Section Introduction
Now Let's Tear This Up
Remove the Paddle
Rename "Brick" in the Code to "Track"
Stretch Tile Grid to Cover the Canvas
Design a Grid Layout by Hand
Quick Example of Grid Map Design
Fill in a Basic Track Layout
Set Ball Start Location in the Array
Section 6 Review

Draw and Code an Image

Section Introduction
How to Create the Car Image
Turning on Headlights and Taillights
Import and Display the Car Image
Section 7 Review

Spin and Angled Motion

Section Introduction
Replace "Ball" in Code with "Car"
Spin the Car Image
Drive the Car the Way It Faces
Use of Sine and Cosine for Games
Understanding Why We Use Sin & Cos
Clean Away Outdated Ball Code
Section 8 Review

Giving You the Car Keys

Section Introduction
Functions on Key Press and Release
Find the Key Code for Each Arrow Key
Crude Steering and Gas on Key Presses
Treat Keys More Like Buttons
Lose Speed From Driving Into Walls
Slow Down Over Time
Fix Car's Start Direction
Section 9 Review

Break to Get Organized

Section Introduction
Label Car Tuning Values
Create Labels for Tile Types
JavaScript and HTML in Different Files
Give Common Graphics Code a File
Divide Code Into Files by Purpose
Section 10 Review

Graphical Tiles

Section Introduction
Draw the Road Tile Image
Create Wall Tile Art
Load Your Tile Art in Code
Display the Tile Images
Stop Drawing Giant Rect Every Frame
Section 11 Review

Improve Image Loading

Section Introduction
Bring Together All Image Code
Wait for the Last Image to Load
Connect OnLoad Automatically
Auto Count Images to Load: A Bad Way
Auto Count Images to Load: Good Way
Add a Basic Loading Screen
Section 12 Review

New World Tile Types

Section Introduction
Divide Project Files Into Folders
Create Images for New Track Tiles
Load New Track Images in Code
Put New Track Types in Level Grid
Get New Tile Types to Block Car
Show the Images for New Track Types
Make a Layout Using New Tiles
Tune Car & Disallow Spinning in Place
Section 13 Review

Accelerate Your Project

Section Introduction
Save All Track Tile Art to an Array
Draw Track Tile Based on Index
Optimizing the Track Draw Loops
Section 14 Review

Add a Classy Player 2 Car

Section Introduction
Put Car's Vars and Functions in a Class
Update Use of Variables in the Class
Create Player One's Car Instance
Make a Second Car for Player Two
Copy and Recolor Blue Car to Green
Import and Use the Green Car Image
Use Different Control Keys Per Car
Section 15 Review

Reach the Finish Line

Section Introduction
Decrease Time to Test the Finish Line
Vary Consequences by Tile Type Hit
Assign Each Car a Unique Name
Declare Winner When Goal is Reached
Understanding the Problem with Reset
Separate Active Map From Saved Layout
Reset When Finish Line is Reached
Reset Car Speed When Map Reloads
How to Support Multiple Level Maps
Racing Game Wrap-Up
Section 16 Review

Racing to Adventure

Section Introduction
Start with Racing Source Minus Player 2
Rename files and variables
Rework Drive Motion Into Walking
Enlarge Tiles to Bring Camera Closer
Replace Racing Art with Dungeon Art
Support Partially Transparent Tiles
New Layout and Code for Keys & Doors
Adventure Core Wrap-Up
Section 17 Review

More Grid Applications

Section Introduction
Many Balls in Grid
Scrolling Camera
Side View Platform Jumper
Moving Grid with Collision Gaps
Board Game with Mouse Control
Course Wrap-Up
Section 18 Review

Demonstration of Games You're Ready to Make Next, Plus a Few Additional Concepts

Bonus Lecture: What to Create Next (Real Game Examples by Gamkedo Club Members)

Your Included PDF Textbook: Hands-On Intro to Game Programming

Full Included PDF Textbook: Hands-On Intro to Game Programming

Screenshots

How to Program Games: Tile Classics in JS for HTML5 Canvas - Screenshot_01How to Program Games: Tile Classics in JS for HTML5 Canvas - Screenshot_02How to Program Games: Tile Classics in JS for HTML5 Canvas - Screenshot_03How to Program Games: Tile Classics in JS for HTML5 Canvas - Screenshot_04

Reviews

Chris
February 20, 2023
Learning all sorts of things about Javascript and how it applies to games. Very good, easy to follow, and very informative.
Brian
January 5, 2023
Great teacher and wonderful content plus you get a free e-book. Removing one star because there is no video content for the last several chapters of the book and its a shame, there was more that could have been added to this course that was not.
Antonio
September 27, 2022
This is another great course by Chris. If you're looking to get introduced to how to program some basic game mechanics, this is incredibly helpful.
Adam
August 28, 2022
I have mixed feelings about this "course." Language is clear. Videos are short and easy to follow. Programs are interesting and practical. Here are some of the problems: 1. This is really more of a tutorial than a course. If I follow along step-by-step and copy his code, I'll end up with exactly what he's created, but what have I actually learned? Am I going to be able to go and create my own code based on these videos? 2. I don't know what's up with the editing. I'll follow along, my code is 100% the same, but then in the following video, there's code that somehow got into his program (like a function or variable in different places) that he didn't show in a video, so then my code doesn't work and I can't figure out why. 3. He could do a better job of explaining how code is being pulled from different parts of the program and being used. On the positive side, all course content (as far as I can tell) is included within downloadable files.
Karlan
June 30, 2022
Great course. Lot of depth. It goes fast so you need to pause a lot. The Photoshop version used is very old but all the images are provided. And there is a book included.
Gerald
January 11, 2022
Since Now everything has been great. I'm at chapter 11 and It has been a long time since I found a course I had so much fun coding and learning.
Michael
August 30, 2021
Love the material! The bite site sections are encouraging to keep going, although I wish you go slightly slower in letting us see the code before you switch to your browser.
Tim
July 30, 2021
I really enjoy this instructor. He is easy to listen to. Having said that, at this point in the course, the current project seems to be in need of refactoring. If the code does not get cleaned up later, I would say that from an architectural standpoint the code is a bit of a mess. For Example, we are laying out bricks using an array to make a grid. We are using a long one dimensional array rather than a 2d array and treating the 1D array as a 2D. Why not just make a 2D array in the first place and then use the nested loops that are being used as coordinates? He may go on to change this in later videos, but I don't know why he would not just do this from the beginning. He is also using working within the HTML document rather than making separate files for script with different jobs. Furthermore there are a ton of global variables that seems to be getting more and more confusing as we jump around the file. I am hoping that this initially is being used to show the need to refactor later. This so far is a good general concept course, but not a great course in terms of teaching best practices. Many pieces of these games really would be more reusable if OOP concepts were utilized. I would like it if we would make a brick class template, or a ball or paddle object etc. I don't want to make the course sound bad. It isn't. I just hope that it develops towards more organized and clean object oriented code.
Brent
July 13, 2021
He has a really good and simple way to teach from scratch - not only Javascript but core programming concepts and game mechanics.
Robbie
June 5, 2021
If you are at all interested in writing game programs, this is the course for you! Super instructor. Explains concepts very clearly. Don't be concerned at all that the content may be a few years old. The concepts are exactly the same and he includes loads of games at the end for you to explore on your own, such as Space Invaders and Adventure game features where the scrolling camera expands the screen's field of view to follow the player around. Lots of tips and tricks that I honestly would never figure out on my own. Even for the extra games he includes in for free at the end, he goes over the overall design concept, explains the tricky bits, and since at this point you are equipped with the tools to build it on your own you can explore and learn it by reviewing his code. Super value and again, he explains things very clearly with great graphics.
Albin
June 3, 2021
This course is just amazing, you learn so much about mainly Javascript but also how to connect some HTML5 with javascript. It's very priceworthy!
Juan
April 28, 2021
Excellent teacher, he knows how to code games, whit concepts like Game Feel which is hard at the begining
Roland
January 18, 2021
I was able to learn and experience beginning and more advanced coding in JS. This will be a good source for me to go back and refresh in how to accomplish certain types of code while I develop my own.
Vladimir
January 2, 2021
I love this course so far. Good explanations. Lecturer is trying to add a little spice with humour, to make it less boring.
Rodrigo
December 14, 2020
Really great, the course have been so far very informative and it has given me a lot of ideas on how to build games using Javascript.

Charts

Price

How to Program Games: Tile Classics in JS for HTML5 Canvas - Price chart

Rating

How to Program Games: Tile Classics in JS for HTML5 Canvas - Ratings chart

Enrollment distribution

How to Program Games: Tile Classics in JS for HTML5 Canvas - Distribution chart
535562
udemy ID
6/23/2015
course created date
11/16/2019
course indexed date
Bot
course submited by