Make Your Own T-Rex Runner Game

If you have Chrome installed in your PC or Mobile Devices, and if you are in offline mode you will meet the Dino Character in your Screen. Did you Know that Dino there is a game featured by Chrome Dev if we are facing connection issue.

We can touch or click on Dino to start the game. On mobile devices we only seeing cactus as Obstacle, while in the Desktop mode we can see pterodactyl flying. If we running the game in mobile version, we only just tap screen to make dino jump avoiding obstacle, while in desktop we have ability to Duck by pressing keyboard Arrow Down and Jump with Spacebar.

Did You Know we can make our own Dino Lonely T-Rex Runner game!. The Game is one of the Google Easter Eggs If you browsing abot T-Rex Runner you will see many website have custom Dino game on it, even me have T-Rex runner on this blog pages.

To make one, we need a Source Code. We can take it from The Chromium Projects. But the best easy way is take source from wayou on Github. Click on Clone or Download and take the Zip, then extract it somewhere on your pc / mobile device.

Now you will have folder contain index.html, index.js, index.css and assets folder. If we open Index.html on a Browser, then we now can play T-Rex Dino Runner game without going to be offline.

We got the source, and now we can modify the game. If you want to make game more stylish with margin, border etc then we must edit index.css and look for the line .offline .interstitial-wrapper and .icon-offline you can do more searching about css in the internet.

We can modify game logic by editing index.js. if  yu want to customize button to jump or duck, open index.js with notepad and look for the line

Runner.keycodes = {         JUMP: { '38': 1, '32': 1 },  // Up, spacebar         DUCK: { '40': 1 },  // Down         RESTART: { '13': 1 }  // Enter     }; 

This keycode using virtual keycode with decimal value. You can find other keycode on this Link. As you can see Jump key is presented by Keyboard Up and Spacebar. Arrow Up keycode is '38' and Spacebar keycode is '32'. Duck keycode is '40', and i add Ctrl key have ability to duck, Ctrl keycode is '17' so i added line DUCK: { '40': 1, '17':1 }, // Down

For editing Game Config see this line, you can change how much obstacle, cloud spawn, how long dino can jump, speed of the game, etc.

Runner.config = {         ACCELERATION: 0.001,         BG_CLOUD_SPEED: 0.2,         BOTTOM_PAD: 10,         CLEAR_TIME: 3000,         CLOUD_FREQUENCY: 0.5,         GAMEOVER_CLEAR_TIME: 750,         GAP_COEFFICIENT: 0.6,         GRAVITY: 0.6,         INITIAL_JUMP_VELOCITY: 12,         INVERT_FADE_DURATION: 12000,         INVERT_DISTANCE: 700,         MAX_BLINK_COUNT: 3,         MAX_CLOUDS: 6,         MAX_OBSTACLE_LENGTH: 3,         MAX_OBSTACLE_DUPLICATION: 2,         MAX_SPEED: 13,         MIN_JUMP_HEIGHT: 35,         MOBILE_SPEED_COEFFICIENT: 1.2,         RESOURCE_TEMPLATE_ID: 'audio-resources',         SPEED: 6,         SPEED_DROP_COEFFICIENT: 3     }; 

And if you want to edit visual of the game, then you must open and edit file 100-offline-sprite.png and 200-offline-sprite.png inside assets folder with image editor.

For Audio source offline-sound-press, offline-sound-hit, offline-reached, basically we have an mp3 files button-press.mp3, hit.mp3, score-reached.mp3 converted to Base64 Encode. Thats why you have too long line on index.html if you open with notepad. You can do moore customizing T-rex Runner, this document only show a basic modifying game resource.

Source:
T-Rex Runner on Project Chromium
T-rex Runner on Github
Base64 Encode
List Virtual Keycode
Sumber https://www.blakbin.com/

Share this post