This tutorial was 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 hack 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, on Github! You can click that link if you’re curious about what Github looks like, or you can read on to see how to run the project and then dig into the code.
Open and Run
We’ll use a browser-based tool called Glitch to hack this project. To start, go to glitch.com, then click New Project, then Clone from Git Repo.
Next, a box will pop up asking you for a URL. Copy (control-C) and paste (control-V) in this address: https://github.com/robertkleffner/mariohtml5
Then click OK, and you should see something like this:
First, of course, you’ll want to try the game! Look for the Show button (it’s sunglasses), then choose whether you want to run the game in its own window or next to the code. (The rest of this tutorial will show it next to the code, but either way is fine!)
It’ll look something like this:
Scroll down until you see main.html, and click on it. You should see this!
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 in your web browser. You also have access to all the code that makes it run! There are a lot of code files here, but don’t be intimidated.
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. In Glitch, look at the list of files on the left, and click on main.html:
There’s not that much code there! All this file is doing is just loading a bunch of other code files. Can you guess what each of these files do? For example, 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 control-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 to -4.
Seeing your changes
Once you’ve made a change, all you need to do is to open main.html again, 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?)
- Make a super tricky version of the game by reversing the arrow keys (hint: look in the Enjine folder for files that look related to the keyboard)
- Change the messages you see on the loading or game over screens
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 create a new Glitch project from one of these Github projects the same way you did with this one. Happy hacking!