Hacking Super Mario, 2.0 — A CoderDojo Tutorial

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

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

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!

Where to start

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!

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

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

More Challenges

  • 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

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!

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

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