GameDevPath

Game development

Game Programming:
Tiled Worlds in JS

Learn to create classic tile games in JavaScript for HTML5 Canvas, including arcade, racing, and puzzle games.

Get Started Now

Study from anywhere in the
world

Consolidation of knowledge in
practice

Support for experienced
curators

Certificate of Advanced
Training

A game developer

is a person who is involved in the creation of video games, including their conception, design, programming and testing.

Games have become not only entertainment, but also an important part of culture and economy, which opens up many opportunities for developers.

Why you should learn to develop
tile games in JavaScript

Accessibility and ease of learning

JavaScript and HTML5 Canvas are accessible technologies that allow you to quickly start developing games without the need for complex tools.

Wide market of opportunities

You will be able to create games that will work on all devices, including mobile phones and PCs, which opens up access to a huge audience of players.

Creativity and Self-Expression

Tiled game development allows you to realize your ideas and creative concepts by creating unique game worlds and mechanics.

Career prospects

With the demand for game developers increasing, mastering JavaScript to create games on HTML5 Canvas can be a great foundation for your career in game development.

Who is this course suitable for?

For aspiring
game developers

You will gain practical skills in programming your own games, regardless of your skill level.

People with basic
programming knowledge

Deepen your understanding of game mechanics, improve your programming skills, and expand your ability to create unique game solutions in JavaScript and HTML5 Canvas.

People with basic
programming knowledge

Deepen your understanding of game mechanics, improve your programming skills, and expand your ability to create unique game solutions in JavaScript and HTML5 Canvas.

How will you study

Feedback from professionals

The course contains many practical exercises to reinforce the material, and on all assignments you will receive feedback from an experienced professional working in the industry.

Personal account

Your personal account contains all lectures, streams, homework, checklists and additional materials that will be available to you.

Study at a comfortable pace

All course materials will be available to you online 24/7 and you will be able to choose a convenient time and place of training, as well as the pace of the lessons.

Community

You will have access to a general chat where you can communicate with students, alumni and curators, exchange ideas, give each other feedback and much more.

Experts and course curators

Our teachers have valuable experience that they have gained while working in studios on interesting projects. They have an excellent understanding of how teams and their processes function.

Alexander Nevzorov

Leading game designer at GSC Game World. Participated in the development of cult games such as "S.T.A.L.K.E.R.".

Natalia Sokolova

Animation specialist at the studio "Nival". Has experience working on projects with high-quality character animation.

Zaur Mirimov

Programmer at Wargaming. Worked on algorithms for multiplayer games.

Ekaterina Romanova

Sound design specialist at Moscow Game Jam. Participated in the creation of sound effects and music for indie games.

German Firsov

VR game developer at Owlchemy Labs. Has experience in creating interactive VR experiences and developing games for virtual reality.

Take the training
and create your
own unique game in
Game Programming!

Course Program

Introduction

Introduction to the course

Module 1. Ball - with a mouse - with a paw. Warm up and repeat

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

Module 2. 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

Module 3. 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

Module 4. 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

Module 5. 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

Module 6. 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

Module 7. 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

Module 8. Spin and Angled Motion

Section Introduction
Replace "Ball" in Code with "Car"
Spin the Car Image
Drive the car like it looks
Using sine and cosine in games
Understanding Why We Use Sin & Cos00:48
Clean Away Outdated Ball Code
Section 8 Review

Module 9. 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

Module 10. 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 the code into files according to purpose
Section 10 Review

Module 11. 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

Module 12. 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

Module 13.

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

Module 14. 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

Module 15. 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

Module 16. 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

Module 17. 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

Module 18. 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

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

Bonus Section: What to Do Next (HomeTeamGameDev.com Member Examples)

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

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

Your portfolio after completing the course

Game Developer Portfolio

I can:

Create unique 2D games

I mastered game development in JavaScript for HTML5 Canvas, creating engaging game worlds without using external libraries or plugins.

Work with graphics

I create, load, display, and rotate graphic images, allowing me to develop visually appealing and dynamic projects.

Structure code

I effectively break down game code into several files, simplifying the management of large projects and enhancing the development and debugging process.

Use object-oriented programming

I define classes and create multiple instances of game objects in unique positions, applying basic OOP concepts to increase the flexibility and scalability of the code.

Manage gameplay

I implement mouse control for single-player games and keyboard control for single-player and multiplayer games, ensuring an intuitive interface.

Develop item pickup mechanics

I implement basic key pickup functionalities and activate their use upon collision, for example, to open doors, which adds depth to the gameplay.

Create platformer games

I design and adapt gameplay for basic platforming movements and digital tabletop/strategy games, creating engaging and varied game mechanics.

Apply trigonometry

I use simple trigonometric calls to move game objects at arbitrary angles, allowing for more dynamic and interesting mechanics.

Create loading screens

I implement basic loading screen functionality in HTML5, enhancing the user experience and making games appear more professional.

Validation of your skills

Certificate will be an excellent confirmation of your skills and will help you when applying for a job.

Reviews from our students

I have always dreamed of creating my own game, but I didn't know where to start. This course has been a real discovery for me! The instructor explains the material clearly and visually, and the practical tasks help reinforce the knowledge. I was able to develop my first 2D game and now confidently continue my programming studies. I recommend it to anyone who wants to dive into the world of game development!

Anna P.

The course turned out to be very useful for me as a beginner developer. I learned the basics of JavaScript and was able to apply them in creating my first game. The only thing that was a bit confusing was the need to sometimes return to previous lessons to better understand the material. Overall, I was satisfied and recommend the course to those who want to grow in this field.

Igor M.

This course exceeded all my expectations! I came in with zero knowledge, and now I can create my own games. The experts share a lot of useful advice. I especially liked the practical tasks that helped me reinforce the theory. I am looking forward to continuing my studies and recommend this course to anyone who wants to learn how to program games!

Elena K.

The course was very informative and interesting. I learned a lot about game development and JavaScript. However, some topics were difficult to grasp, and I had to spend more time studying them. Overall, I believe that the course is worth the money, and it really helps develop skills in game programming.

Dmitry S.

I took this course and was thrilled with the knowledge I gained! The instructor explains everything very clearly, and the assignments allow you to apply theory in practice. I created my first game and now plan to continue my studies. This course is a great start for anyone who wants to get into game development. I recommend it to everyone who wants to learn how to program!

Maria T.

Tuition fees

Introduction

Introduction to the course - 2 modules
Learning materials
No feedback
Access - 1 week
No certificate

$299

Start Now

Basic

Syllabus - 18 modules
Learning materials
Practical assignments
General chat with curators
Course access - 2 months
No certificate

$499

Start Now

Advanced

Syllabus - 18 modules
+Game programming textbook
Learning materials
Practical assignments
Student chat
Feedback from curators
Course access - 6 months
Certificate

$699

Start Now

Premium

Syllabus - 18 modules
+Bonus module
+Game programming textbook
Learning materials
Practical assignments
Student chat with curators
Mentor support
Course access - 12 months
Certificate

$799

Start Now

Corporate

Groups of 5 to 10 people
Syllabus - 18 modules
Bonus module
+Game programming textbook
Learning materials
Practical assignments
Curator support
Access for 12 months
Participation in group chat
Certificate

$899

Start Now

We will return your money
if the training is not suitable

Money can be returned at any time. During the first three lessons, we will refund you the full amount, and starting from the fourth, we will calculate the refund amount or help you choose another course instead.

Why you should learn to develop
tile games in JavaScript

Ease of access.

You can log into your personal account from any device - computer, tablet or phone. Study in a place convenient for you!

Organization of educational material

The program is divided into modules and topics. The material contains both lecture lessons and practical assignments to consolidate skills.

Methodological development.

The course is carefully structured, making it easy to learn the material and consistently develop skills.

Frequent Questions

I have never programmed before, will I be able to learn in this course?

Yes, of course. The training program is designed for beginners without programming experience and those starting with some basic experience. If you are already familiar with the basics of coding, you will be able to refresh your knowledge. If not — we will teach you everything.

How many hours a week will I need to dedicate to learning on the platform?

It all depends on you. On average, users of the platform spend 5 to 7 hours a week.

How is the interaction organized?

The main place for communication with mentors and other participants of the learning process is the Telegram messenger. It has well-organized discussion threads, so you can quickly get answers to various questions about the course, chat with classmates, share experiences and successes, find additional useful materials.

What qualifications will I have after completing the course?

A sufficient set of knowledge and skills to qualify for junior positions or to take freelance projects.

Are there any special requirements?

You will need a text editor. Any simple one will do, for example, Notepad, however, one that supports features for programmers, such as multiple file tabs, code highlighting, line numbering, and smart/automatic indentation, can be useful at later stages as the length of the code increases (Notepad++ is free for Windows, TextWrangler for Mac, or Sublime Text 2, which I use, has a fully functional free trial version for each of them). You will also need a program that allows you to draw and save images with transparency, such as Photoshop, to follow several steps in art drawing.

Learn anytime, from
anywhere develop your
professional skills online!