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