Hacking Super Mario, 2.0 — A CoderDojo Tutorial

Eileen King
Feb 1 · 5 min read

Note: this concept and the vast majority of the content were created by Omar Shehata . The old version is here; this version is an update to reflect the unfortunate demise of Thimble.

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.

Just look at that handsome mustache!

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.

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, 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:

Tons of code! Don’t worry, you won’t need to understand every piece to be able to do some great hacking.

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?

Jump higher!

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?

More Challenges

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!

https://github.com/leereilly/games

You can create a new Glitch project from one of these Github projects the same way you did with this one. Happy hacking!

    Eileen King

    Written by

    Minnesota educator primarily using Medium as a publishing platform for coding tutorials | nfldcoderdojo.org | #cs4all | #mncodes

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade