jQuery Konami Code

Be sure to check out the latest release of the plugin!

One of the things that I love about working on side projects is that they can be just as complex or simple, or as fun or mundane as you want them to be.

Case in point: A couple of years ago when 8BIT was first getting started, we had a really simple landing page, but we had the idea to incorporate something fun.

Considering we all group up during the 8-bit era of video games, we opted to incorporate the Konami code into our site. So I wrote a small jQuery plugin that makes it really easy to include the cheat code into your site or web application.

Simply put, it’s the jQuery Konami Code.

jQuery Konami Code

Grab the JavaScript-based cheat code on GitHub

This morning, I spent a little bit of time refactoring the code and bringing it up to JSLint standards, as well as migrating the README and the CHANGELOG to markdown to make for a bit easier reading on the GitHub landing page.

Additionally, I moved the license – that is, the MIT License – to the README itself and removed the redundant file from the repository.

Using The jQuery Konami Code

It’s really simple – even if you’re not familiar with JavaScript or jQuery, you should be able to get up and going relatively quickly.

1. Include jQuery

If your project doesn’t already include jQuery, make sure that you include it in the head element of your page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>[/html</pre>
<h3>2. Include the Konami Code plugin</h3>
<pre>
Next, include the Konami Code plugin just under the jQuery library: <script type="text/javascript" src="jquery.konami.min.js"></script>

3. Write Your Custom Behavior

At this point, you’re ready to write what happens when users enter your cheat. Simply put, you just need to apply the konami function to the window object, then define a function that makes something, y’know, happen when the cheat code is entered.

For example:

 $( window ).konami({
        cheat: function() {
            alert( 'Cheat code activated!' );
        }
});

In the code above, a simple alert dialog will appear whenever the cheat code is entered.

The repository even includes a simple demo showing exactly how to get started. You can download an archive of the entire script and the demo here.

Anyway, simple, but fun, right? Enjoy.

Category:
Projects
Tags:

Join the conversation! 19 Comments

  1. This is great….!!!!!! I liked it…
    but you should also keep a downloadable script show we can just download it and install it to our site…..more explanation required.

  2. Guests receive care, compassion and love from both staff members and volunteers.
    3% (Ranking 15) Failed to Graduate High School: 17. This hotel has 135 guestrooms on two floors, and all rooms continue in the free Internet standard.

  3. After I originally commented I seem to have clicked on the -Notify me when
    new comments are added- checkbox and now every time a comment
    is added I receive 4 emails with the exact same comment.
    Is there a way you are able to remove me from that service?
    Cheers!

    • This depends on what option you selected when subscribing to comments. At one point, I was using JetPack to manage comment subscriptions. If that’s the case, you can find documentation on unsubscribing on this page.

      Otherwise, you must’ve used the comment form that exists on the site as it is today, and if that’s the case then it is storing your information (and you should see the checkbox checked). Simply uncheck it, leave me a comment that you’ve done it so I can delete it, and you should be good to go.

  4. Thank you to the author, for applying my suggestions. This Code Is Great. But I had a question..what to do if I want to change the cheat code…I cant find a way… PLEASE HELP.
    THANKYOU.

  5. Thank you so much for this post! I would really love to put this awesome feature onto my tumblr blog, but I’m not sure if this would work in HTML. I’ve been trying with multiple codes I’ve found online, including yours, but so far, it’s not working for me. I’m sure they all work just fine- it’s just the implementation of it (or the fact that html from tumblr doesn’t support it?) that is going awry. I have tried playing around with my html coding (you can see my tumblr blog, elegant-serendipity.tumblr.com, for reference), but it still doesn’t seem to work. Even if it IS implementable in html, I’m not sure where to put your three different sets of code. I’m still very new to coding (java, html), but I do hope to improve in the future. I put the first set between the and tag, but the other two (“$( window ).konami();” and callback), I’m not sure. There is also a custom css box on tumblr’s customize page, though I’m not sure what would go in there (vs the regular html page). If you have any questions that could help you answer mine, please do ask! Anyway, any help at all would be just wonderful! I can also provide my html code through postbin, if that would help. I appreciate any time you spend pondering this. Thank you!!

    • I don’t do a lot of Tumblr customization, but the best advice that I can give is the following:

      Above the closing tag, add the code between two script tags like this:

      <script type="text/javascript">
      // Konami code here.
      </script>
      
  6. Thank you for your answer! I finally got it to work! I was wondering if you know how to do two different konami-style codes on the same website? I understand how to change the code entered (e.g., h = 72, i = 73, = 13, etc.), but what would I have to change in the html code to differentiate the two codes? For example, let’s say I want the Konami code to produce the popup picture of a panda (I already know how to do this- you can see on my secondary tumblog, stilexo.tumblr.com) and then enter the characters “cat” to produce another picture, of a cat. I would let the first code (the konami/panda one) remain the same:
    $(document).ready(function() {
    var keys = [];
    var code = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 13];
    $(“#panda-dontbotherme”).hide();
    For the second easter egg code, should I change “keys” into something like “keys2” and “code” to “code2” everywhere they are listed? And then, of course, I would need to rename the second image to something like “cats”. This is what I have tried, though it’s not working yet. Is there anything I am missing? Should I change other parts of the code (I’ll just copy everything for the second cat code but just change specific parts)?

    • Hey Rachel,

      This is getting to be a little more beyond the support of what’s offered for a free plugin, but I’ll do what I can to offer help here :)..

      • you’re right in that each key code corresponds to a number.
      • to add additional cheat cods to your site, you’d need a new version of a plugin so rather than adding multiple codes or key codes, it’d be easier to create separate files and follow the model of the `konami` file, just rename it and the function names while replacing the key codes with what you’d want to use.

      Hope this helps!

  7. Great article. I have been tweaking some of the code, and I can get it to successfully load a website, but was wondering if anyone had any suggestions on how to get it to load the target website as a popup window…
    My simple code is:

    var easter_egg = new Konami ('http://www.tesdhq.com/player/popup.html');

  8. I’m wondering, would this work for WordPress? Would I be able to do the classic code with the arrows? Would I be able to make it forward to a separate page on the site?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.