Hacking Super Mario: A CoderDojo Tutorial

This tutorial is written for the Northfield chapter of CoderDojo for our special “April Fools Hacker” theme. It is aimed at students ages 8 and up.

We all know and love this little Italian plumber.

Image for post
Image for post
Just look at that handsome mustache

We’re not just going to be playing Super Mario today, we’re going to hacking away at it! Breaking things apart and looking at other people’s code is an incredibly valuable way to learn.

We’re going to be using Javascript, the language that powers most interactivity on the web.

The Game

The first thing you need to do is find a game of Super Mario where the creator has allowed us to view the source. Projects like this are called open source.

Lucky for us, there’s one right here! Click on the link below to see the project’s source code on Github.

https://github.com/robertkleffner/mariohtml5

Download and Run

On the Github page, click on the green “Clone or Download” and then on “Download Zip”

Image for post
Image for post

Once you download it, find the file in the downloads folder and extract it by right clicking on it, and clicking “extract here”.

Image for post
Image for post

When it finishes, you should see a folder pop up. Open main.html inside this folder using any web browser, and you should see:

Image for post
Image for post

Click on the browser, and press S to start the game! When you’re ready, go to the next section to start hacking.

Now the hacking!

This is the exciting part! You have the game running on your computer. You also have access to all the code that makes it run! There’s a lot of code files here, but don’t be intimidated!

To edit the code, you can use any code editor if you have one. If you don’t have one, Mozilla Thimble is a really cool editor runs completely in your browser!

Image for post
Image for post
You can see the files on the left, code in the middle, and the project on the right.

To use it, go to the Thimble website:

https://thimble.mozilla.org

And click “Start a project from scratch”. Now select all the files inside the Mario folder on your computer, and drag them into the Thimble editor as shown.

Image for post
Image for post

After it finishes uploading, you’ll find the main.html file in the list of files on the left in Thimble. Click on it to see the code, and see the game running at the same time.

Part of the fun of the challenge here is figuring out how everything works. Since we opened the file main.html to start the game, let’s see what’s inside it. Open main.html using any code/text editor.

There’s not that much code here. You should see something like this:

Image for post
Image for post

All this file is doing is just loading a bunch of other code files! Can you guess what each of these files do? If you wanted to see the code for the character, where would you go?

There’s a lot of files to explore here, but we’ll just take a look at the code for the character. Open code/character.js

Don’t worry about understanding every single line of code. Let’s try to change something simple. We want to make Mario jump higher.

Take a moment to see if you can find the code that makes him jump. You might want to use CTRL+F and look for the word “jump” in the code somewhere.

If you scroll down to around line 200, you might see this:

Image for post
Image for post

There’s a property called YJumpSpeed. What do you think this does? Try changing it -4.

Once you’ve made a change, all you need to do is to open main.html again (or refresh the page if you still have it open) and the game will run with the new changes!

Try starting the game and jumping. Does Mario jump higher now?

This was just a simple change. There’s so much more you can do! See if you can:

  • Make him run faster
  • Give Mario 999 lives instead of just 3
  • Make Mario completely invincible (hint: look at the property this.InvulnerableTime, what can you do with it?)

Use your imagination to make something cool!

More games to hack on

If you want to see more open source games that you can play around with, check out this huge list!

https://github.com/leereilly/games

You can download them, run them and change them in exactly the same way.

Written by

Graphics programmer at Cesium. I absolutely love telling stories and it's why I do what I do, from making games, to teaching & writing. https://omarshehata.me/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store