Nate Eagle's entry to FED Challenge #1

Konami Code Super Challenge

by nate

HTML

<h1>Konami Code Super Challenge</h1>

<p>The <a href="http://en.wikipedia.org/wiki/Konami_Code">Konami Code</a> is one of the most famous cheat codes in history.</p>

<p>&uarr; &uarr; &darr; &darr; &larr; &rarr; &larr; &rarr; B A</p>

<p>Your challenge: implement it in JS without consulting any other examples. The page should react in some way to input of the Konami code by the user. jQuery is allowed, but not required.</p>

<p>Submit your entry as a JS Fiddle. Begin by clicking &ldquo;fork&rdquo; in the menu bar above.</p>

<p>Please submit your entry by email to <a href="mailto:[email protected]">[email protected]</a> by <abbr title="Close of Business">COB</abbr> <em>Monday, August 8</em>. The winner will be determined by popular vote.</p>

CSS

body {
    background-color: hsl( 0, 0%, 20% );
    color: hsl( 0, 0%, 80% );
    font-family: monospace;
    font-size: 18px;
}

h1 {
    font-size: 36px;
    margin-bottom: 18px;
    text-shadow: 2px 2px 0 hsl( 0, 0%, 0% );
}

p {
    margin-bottom: 18px;
    text-shadow: 1px 1px 0 hsla( 0, 0%, 0%, 0.5 );
}

p:nth-of-type( 2 ) {
    font-size: 36px;
}

a {
    color: hsl( 0, 0%, 70% );
}

em {
    color: hsl( 0, 50%, 50% );
}

abbr {
    border-bottom: 1px dotted hsla( 0, 0%, 70%, 0.5 );
}

JavaScript

(function($) {
    
        // resetProgress will be a reference to the
        // setTimeout that enforces speediness
    var resetProgress,
        // Cache a reference to the jQuery-wrapped document,
        // since we'll use it repeatedly
        $doc = $( document ),
        // Gotta start the cheat code at the beginning
        cheatProgress = 0,
        // An array of the keycodes for the code
        code = [
            // up up down down left right left right b a
            38, 38, 40, 40, 37, 39, 37, 39, 66, 65
        ],
        // How much time to allow between keypresses
        time = 500;
    
    $doc.bind( 'keydown.konami', function( event ) {
        
        if ( event.keyCode === code[ cheatProgress ] ) {
            clearTimeout( resetProgress );
            
            if ( cheatProgress === code.length - 1 ) {
                
                $doc.trigger( 'cheat.konami' );
                
                cheatProgress = 0;
                
            } else {
                
                // Gotta be quick
                resetProgress = setTimeout( function() {
                    // Reset progress
                    cheatProgress = 0;
                }, time );
                
                cheatProgress += 1;
            }
        }
    });
    
    // Bind anything you want to the cheat.konami custom event
    $doc.bind( 'cheat.konami', function() {
     
        $( 'body' ).css({
            'background-color': 'hsl( 0, 50%, 50% )'
        })
            .children( 'h1' )
            .text( '30 LIVES' );
        
    });
    
})( jQuery );