How to add easter eggs to your website (web app) with Javascript

An easter egg (in the programming area) is an unexpected or undocumented feature in a piece of computer software or on a DVD, included as a joke or a bonus. Everybody knows the easter eggs of Google, try writing "Do a barrel roll", "Zerg Rush" or "Google in 1998" in Google and you will see them. A lot of software developers used to hide features in software that would only be revealed if you knew a convoluted sequence of key strokes.

Go back to the old days and implement easter eggs in your apps, in this article you will learn how to add intentional easter eggs or cheats to your web application with Javascript.

A. Using egg.js

1. Download and install egg.js

And not, we are not talking about the framework to build better enterprise frameworks and apps. We are talking about egg.js, a very simple script written by Mike Flynn that will allow you to add easter eggs to your web apps, Electron applications or websites. It has no prerequisites and allows you to easily add web easter eggs by watching the user's key strokes.

To add egg.js in your project, you can download it using NPM:

npm install egg.js

Or with bower:

bower install egg.js

Or simply download the minified file from the official Github repository here. Then include egg.js with a script tag:

<!-- Add the minified script -->
<script type="text/javascript" src="node_modules/egg.js/egg.min.js"></script>

<!-- Or add it from a web CDN -->
<script type="text/javascript" src="https://cdn.rawgit.com/mikeflynn/egg.js/master/egg.min.js"></script>

Finally the Egg function will be available in the window, this script weights only 1.53KB. Visit the repository of the library for more information.

2. Usage of egg.js

Egg.js works in the following way, you need to instantiate a variable with a new class of Egg, then use the addCode method that expects the instructions (keystrokes that need to be pressed) that triggers the easter egg. You can also add a hook, as shown in the following snippet using addHook, that will run after any egg code is triggered. You could use it to fire a Google Analytics event or send out a tweet that someone finally found your easter egg. Hooks get access to the whole Egg.js object so you can pull information about the easter egg that fired via this.activeEgg:

var egg = new Egg();

var instructions = "up,up,down,down";
var easterEggName = "Random Name";

var action = function () {
    console.log("Triggered");
};

egg.addCode(instructions, action , easterEggName)
   .addHook(function () {
        console.log("Hook called for: " + this.activeEgg.keys);
        // Name of the easter egg
        console.log(this.activeEgg.metadata);
   }).listen();

If you don't need to know which easter was triggered, then you can simply add the instruction in the constructor as first parameter and as second parameter the callback. From the returned value of the constructor, execute the listen method:

var egg = new Egg("up,up,down,down,a,b,c,1", function() {
    console.log("Easter Egg triggered");
}).listen();

Inside the callback, you can do something like show a Gif that no one expects to see etc. You can see a live example of the script in this website here. Besides you can even use this library to add so to speak "cheats" for your application.

B. Using cheet.js

1. Download and install cheet.js

To add cheet.js in your project, you can download it using NPM:

npm install cheet.js

Or with bower:

bower install cheet.js

Or simply download the minified file from the official Github repository here. Then include egg.js with a script tag:

<!-- Add the minified script -->
<script type="text/javascript" src="node_modules/cheet.js/cheet.min.js"></script>

<!-- Or add it from a web CDN -->
<script src="//cdn.rawgit.com/namuol/cheet.js/master/cheet.min.js" type="text/javascript"></script>

Finally the cheet function will be available in the window, this script weights only 2.87KB. Visit the repository of the library for more information.

2. Using cheet.js

Adding a cheat

Cheet allows you to add cheats easily with the cheet method, this map a sequence of keypresses to a callback. This can be called multiple times:

cheet('i d d q d', function () {
    alert('god mode enabled');
});

It can even use special characters:

cheet('↑ ↑ ↓ ↓ ← → ← → b a', function () { 
    alert('Doing something awesome'); 
});

Note that all the instructions are separated by a space instead of a comma (if your command expects the space key, then use the keyword space).

Global cheat executed callback

You can set a global listener that is triggered when any of the cheats is executed:

var sequences = {
    cross: 'up down left right',
    circle: 'left up right down'
};

cheet(sequences.cross);
cheet(sequences.circle);

cheet.done(function (seq) {
    if (seq === sequences.cross) {
        console.log('cross!');
    } else {
        console.log('circle!');
    }
});

Cheat that only fire once

You can disable a cheat once it's executed using the cheet.disable method that expects the same instruction as argument:

cheet('o n c e', function () {
    console.log('This will only fire once.');
    cheet.disable('o n c e');
});

With cheet.js you're able to use a lot of special keys, check the reference table here. e.g enable cheats once the special key F1 is pressed:

cheet('f1', function () {
    console.log('Cheats activated');

    // This will only work if the f1 key is pressed first
    cheet('d t w', function () {
        alert('Destroying world');
    });
});

Have you ever played GTA San Andreas ? Then i'm sure that you will find an usage for those libraries.