Learn to Code via Tutorials on Repl.it!

← Back to all posts
Javascript platformer - ultimate tutorial

Getting started

Start off by creating a new html, CSS and JavaScript repl and head over to the index.html file. We will need a canvas on the website page. Start off by adding this code into the index.html file:

You may have to fiddle around with its width and height as different computers have different sized screens

Starting with JavaScript

Head over to the script.js file. Lets start by creating a few variables:

Now we need to get the canvas and store it in a variable so we can access its properties:

Now create these arrays:

All of the arrays can be edited (Look at the bottom as how to) apart from the collected!!

Creating the player

Lets create an object to store our player data in...

The keys array is important for recieving player input!!

The Game Loop

We now need to create a simple game loop, there are many ways we can go about this, but here is the one I used...

Don't worry about the function errors as we are going to create the needed code for this loop to run properly!

Player input

We now need to move the player when a certain key is pressed, add this underneath the Game Loop:

This code checks to see if certain keys are pressed and moves the player...

The code underneath is very important as it detects all collisions the player has made making the platforms solid:

It is quite a chunky piece of code but I am working on how to make it smaller!!

Drawing the level

You will need this code to draw the level:

This code draws the actual ground the player interacts with, you can easily change it's colour by editing the hex codes!!

The code below is useful as it draws the water beneath the platformer stopping the player from falling infinitely into the void:

Also this code is useful as it draws the bounce pads...

The code below is used to render coins...

and this code is used to draw the enemies in the level...

and finally this code is used to draw the background effects...

Making the level scroll smoothly

To make the level scroll it uses a very simple function:

Final lines of code

To finsih it all off you will need this small bit of code to call the drawing function:

and then this restart function that is very important for respawning the player when they die

and finally to get the keys the player is pressing add this code right at the bottom...

How to use the arrays

Platforms array

The array called platforms is, you guessed it, the positions and sizes of the platforms! The platforms are equal to 4 numbers in the array, the 1st number is the x position, the 2nd is the y position, the 3rd is the length and the 4th is the height, so when deleting platforms delete all 4 numbers otherwise it will become very weird.

bounce array

This array controls where the bounce pads are and is layed out in the same way as the platforms array. 1st is the x, then the y, then the length and finally the height.

enemies array

The enemies array is done differently than the platforms and bounce array as each enemy is only 3 values! The first is the one you change depending on the platform size that the enemy is on, the higher the number the smaller the amount of platform the enemy covers and the smaller the number the more of the platform the enemy covers!! I suggest fiddling about with this value until it stops just where you want it to! The 2nd value is the x position and the 3rd is the y.

backing array

This array renders the dark blue buildings in the background, this array only needs one value for each building, the distance from the roof it will spawn, the higher the number the closer to the bottom of the game it's roof will be, but the lower the value the closer to the top of the game it's roof will be.

coins array

This draws the coins on the map which you have to collect! It only needs to input values the 1st is the x and the 2nd is the y!! It gets a bit more complicated now as for the win screen to show properly you will need to change a small value in the code!!
So when you are happy with your coin placing go to the timer.js file and head down to line 21 and you should say an if statement

in the if statement on line 21 replace 23 or whatever number is at the position of 23 with the amount of coins in your game and tada everything is working and the win screen will show when you finish by collecting all the coins

Simple right??


The end result...

This is my platformer once I had filled up the arrays...
P.S - You will only have the canvas platformer, not any of the death count, coin counter or timer...

Play the result here...
Javascript platformer