Custom T-Rex Runner on Chrome and Chromium

How many times did you lose your connection during internet surfing? And how many times did it happen on Chrome/Chromium browsers? We all know what to do in this kind of situations… just press Spacebar to start a prehistoric adventure!

(image from omgchrome.com)

Yesterday, during this umpteenth frustrating experience, i was wondering how to play this game in a different way, so i asked myself: “is there a way to change these graphics with something different?”. I like to break things so, in few minutes and with the help of the Developer Tools, i started to dig into the code, looking for something to change under my will.

The Developer Tools Console couldn’t show me all the source code of the T-Rex Runner, but i’ve found it on GitHub (https://github.com/wayou/t-rex-runner), already extracted from the Chromium source code. Interesting, if you want to replicate the T-Rex Runner in different environment, but i was looking for something that could be implemented in a fast way inside the original T-Rex Runner. BTW, thanks to this source code, my attention shifted to a particular HTML element called offline-resources:

Bingo. I’ve found a gold mine! All the game graphics are contained in a single sprite image, provided in two different versions: offline-resources-1x, that contains the sprite in 1233x68 resolution, and offline-resources-2x, with a 2441x130 image. Both images are Base64-encoded, directly injected inside the <img> tag. The same treatment is used for game audios, but first of all i’m interested in graphics. Excited, i’ve found an online Base64 converter to get the original sprite images:

Original T-Rex Runner sprite (2x).

With this sprite on my hands, the only limit was my fantasy… and colors! My first experiment was done with a colored image, but it contains much more informations than a grayscale image, and its Base64 footprint is also huge. When i tried to inject it inside the <img> tag my Mac was about to explode, so i started again with a grayscale image.

Probably it’s still possible to use colored images, but i suggest you to start your experiments with a grayscale image.

The image i’ve used for my first experiment is very ugly and incomplete but i was trying to reach my goal as soon as possible, so i’ve just changed the running T-Rex images with LuckySeven’s logo:

With another online converter, i’ve obtained the Base64-encoded image and then i’ve injected it with the Developer Tools inside the offline-resources image tags. Luckily i didn’t need to re-initialize the script but i’ve just pressed Spacebar to start the game with this brand new graphic:

Obviously this is only a small starting experiment, but you can do better using great graphics and new sounds. My next objective is to create a small copy/paste code for non-developers that would like to enjoy this game with personalized media.

Hope that you’ve enjoyed my first not-so-serious Medium story! Feel free to comment and/or ask anything, and remember to follow me everywhere on the net: LinkedIn, Facebook and on LuckySeven’s website. See ya!

Full stack developer — CEO @ LuckySeven. In love with technology, my mission is to learn something new every day!

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