Tutorial: How to make a tile-based 2D scrolling game world in JavaScript


After this tutorial you'll be able to build tile-based scrolling 2D worlds. You'll be able to use this in either top-down or side-scrolling games - the principle is the same.


As prerequisites, you should have a basic grasp of JavaScript (the Codecademy course will be enough), and have completed the first 6 lessons of the How to make a top-down shooter in JavaScript, as this one follows directly on from that. I've conveniently put direct links to these 6 lessons here:

0) Contents
1) Creating a game area with canvas
2) Drawing on the canvas
3) Creating a game loop
4) Getting started with objects
5) Detecting key-press input
6) Detecting multiple key presses at once


Once you've worked through those, you'll have a little player character (a charismatic red square) who moves around the screen. From here we can move on to the class at hand:
0) Contents
1) The Journey Ahead
2) Building a map
3) Creating a camera
4) Drawing the map
5) Stopping the camera from moving when you reach the edge of the map