How To Create a JavaScript TileMap For a 2D Game

In this tutorial we learn how to build a 2D tile map for a game in JavaScript. We set up the basic architecture for a game and dive into the details of what a tile map is and how to build one.
Links
GitHub Repository
github.com/CodingWith-Adam/Ti...
Direction download link from GitHub with assets
github.com/CodingWith-Adam/Ti...
Demo Of solution
codingwith-adam.github.io/Til...
Pac-Man Tutorial
• Coding Pac-Man in Java...
Multiple cursors in vs code
bit.ly/3C3qrfk
00:00:00 Introduction
00:01:14 Project Setup
00:02:13 Html Setup
00:05:44 Game.Js Setup with Game Loop
00:08:31 TileMap
00:21:50 Visualization of how TileMap is drawn
00:22:46 The End

[@nickmartinez5455]

I was looknig for something for sprite sheets, but this was very informatinal. Thank you for such nice video!

[@CodingWithAdam]

You’re welcome. Glad you enjoyed the video and thanks for the suggestion to make a tile map with a sprite sheet. I’ll add that to my list of future videos.

[@gianpaolomosoni7230]

Very clear thanks

[@CodingWithAdam]

Thanks Gian!

[@catalintudoreanu8880]

thanks man, great tutorial

[@CodingWithAdam]

Thank you! You’re welcome!

[@minhthemeowania.749]

It helps me alot, thanks man!

[@CodingWithAdam]

You’re welcome!

[@polrogi]

You should have more suscribers! Awesome.

[@CodingWithAdam]

Thanks Poleterogi! I'll just keep putting out great content :)

[@someThing38141]

How would I go about making a game with multiple tilemaps, in a way where there is multiple levels?

[@CodingWithAdam]

That’s a great question. The quick answer is that you need an array of tile maps and a way to track which one to draw to the screen.

[@rccowboys]

Do you have a video where you can use a sprite sheet instead of individual images?

[@CodingWithAdam]

I currently don’t have any videos using a sprite sheet. Thanks for the suggestion.

[@flopasen]

@@CodingWithAdam yeah really would appreciate some detail on sprite sheet usage, thanks for the video

[@CodingWithAdam]

You’re welcome! Thank you for the suggestion 😀

[@kherraaminembarek2150]

awesome video

[@CodingWithAdam]

Thank you!

[@blaineruffing4396]

I keep getting 'TileMap' is declares but it's value is never read.