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.
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.
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.
Download and Run
On the Github page, click on the green “Clone or Download” and then on “Download Zip”
Once you download it, find the file in the downloads folder and extract it by right clicking on it, and clicking “extract here”.
When it finishes, you should see a folder pop up. Open main.html inside this folder using any web browser, and you should see:
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!
To use it, go to the Thimble website:
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.
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.
Where to start
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:
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:
There’s a property called YJumpSpeed. What do you think this does? Try changing it -4.
Seeing your changes
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!
You can download them, run them and change them in exactly the same way.