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.

What you'll 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

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ß.)