Member-only story
All you need to
Make HTML 5 Games — Side-Scroller Game Tutorial
In this tutorial and matching video tutorial, we will go through the steps to code a side-scroller game using the HTML 5 Canvas and JavaScript.
The game we will be making is called Lost Olive where a poor olive falls from a tree and lands on a top hat at a party. The player must use keys to roll and jump the olive across animated hats to a surprise destination! Falling off the hats will lose the game.
Preparation
Anyone should be able to follow the steps and make the game, however there are many skills and techniques used to make this type of game on your own. Here is ◎ Your Guide To Coding Creativity on the Canvas which introduces this magical world.
All of this is free and with very little set-up!
We will make the game with the ZIM JavaScript Canvas Framework that has built in physics which makes jumping and collisions very easy! ZIM also has an online editor and both a simple side-scroller example and the full side-scroller game are in the editor.
You are welcome to look over the simple example and get the general idea of how we will be rolling along platforms with the arrows (or WASD) and jumping with the up arrow, W or spacebar. This tutorial will follow the steps to make the complete game.
Editor
We usually make games in a desktop editor such as VS Code by Microsoft — free and quick to install. We will do the tutorial assuming that you are using VS Code but you can code it all online in the ZIM Editor if you wish.
Template
To get started in VS Code, make a new file called sidescroller.html and grab the ZIM template from https://zimjs.com/code — press the COPY button and paste it into your page. If working in the ZIM Editor then you do not need this.
