How to Program Games: Tile Classics in JS for HTML5 Canvas (Udemy.com)

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

Created by: Chris DeLeon

Produced in 2021

icon
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 large

icon
Quality Score

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 96 / 100

icon
Course 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 Phnixwei.)Who this course is for:
Anyone who wants to learn practical skills to program their own games at homePeople who may already be familiar with programming concepts but are new to applying that knowledge to making real-time computer gamesCreators who have only ever tried drag-and-drop tools but are interested in learning more about how to make games by programming for an deeper level of control over the detailsDevelopers interested in getting practice with a more traditional "code only" approach to core gameplay programming before moving on to major engines and tools (which are not covered in this course) like Unity or UnrealPeople looking for a technical game design foundation based in indie-style games or classic gameplay as a starting pointNew developers who completed the free course "Code Your First Game: Arcade Classic in JavaScript on Canvas" and are looking to further build upon their game development skills in JavaScript on HTML5 CanvasPlease note that advanced topics like object-oriented programming are only very briefly touched upon - software engineering patterns are generally outside the scope of this course

icon
Instructor Details

Chris DeLeon

Chris has been making games for 23 years. He's worked with startups and AAA games, taught game creation at Georgia Tech, and spoken at more than 10 conferences (including GDC, IndieCade, and SIEGE). Over 200,000 students have done his online courses, and he's made hundreds of videos and 140 podcast industry interviews to help people discover game development. Today he runs HomeTeam GameDev, where people around the world learn game development together in a practical way building long-term remote team projects, with included access to 1-on-1 support and ongoing mentorship.

icon
More javascript courses

Introduction to HTML5

Free

Functional Programming Principles in Scala

Free

Introduction to CSS3

Free

Front-End Web UI Frameworks and Tools

Free

Learn and Understand AngularJS

$11.99

Programming with JavaScript

$11.99

icon
Reviews

4.8

312 total reviews

5 star 4 star 3 star 2 star 1 star
% Complete
% Complete
% Complete
% Complete
% Complete

By Matthew Cannon on 10/24/2020

good course so far, learning and good explanation

By Phillip Seiffert on 10/13/2020

sometimes it goes a bit fast but i guss that is good so we learn alot i like when you explain what the code does great work :)

By Joshua R Thompson on 9/23/2020

Great course. I'm learning a lot about Javascript and programming.

By Lars Fe on 9/17/2020

Really a great course and good basis for coding games! Really impressive what I can do with this knowledge. I can only recommend it.

By Tarak Parekh on 9/11/2020

Yes. THis is an excellent course

By Usman Mohamed on 9/8/2020

Good Course For Some One Who Wants To Start Coding Games.

By Aditya Choudhary on 8/24/2020

Good course...really enjoying it a lot

By Lukas Krupa on 8/7/2020

Definitely the most entertaining course I ever had!

By Andy Pydde on 8/2/2020

Does a superb job of showing the fundamentals of classic game design even though I found some concepts tended to be explained a little too quickly and the short video duration can feel a bit choppy in the Udemy interface. Highly recommended.

By Jill Birchall on 8/1/2020

Very enjoyable course. I have learnt so much about creating tile based grid games!
This course contains tutorials for creating a brick breaker and a racing game, then the third game is an adventure style game you create yourself with some short videos for guidance. Creating it myself did feel quite challenging at first, but it deepened my understanding of the concepts!
I am now feeling very inspired to create my own games and I have so many ideas from the videos in the last 2 sections of the course! The free ebook is also really good, it includes tutorials for the games featured in the course, plus a couple of new ones, and plenty of exercises on how to extend and improve those games yourself.
One small thing to note is that the course is a few years old now, and so does not use the latest JavaScript features, such as the class keyword. However being quite new to JavaScript I appreciated it as it showed me how things were done before the new features were added.

By Gustavo on 7/23/2020

Awesome course, it teaches you some fundamental concepts that open you a lot of possibilities to create your own games, and even if the course is offered in JavaScript, those concepts could be implemented in any programming language and applied on any game engine. By the end of the course you will feel encouraged to explore what you have learned on your own projects. A must take either if you are just starting or just want to practice the use of tiles and maps in game development.

By Aawesome on 7/22/2020

:D