jQuery Keyer 2.0 - Demo

This demo shows the use of jQuery Keyer 2.0

by Terry Young

HTML

<!--
<img id="plane" src='http://img13.imageshack.us/img13/3334/planer.png' border='0'/>
-->
<!--
http://mryunis.blogspot.hk/2009/08/airplane-game.html
http://cdnjs.cloudflare.com/ajax/libs/firebug-lite/1.4.0/firebug-lite.js
-->
<div id="plane" class="still" />

CSS

html, body {
    margin:0;
    border:0;
    padding:0;
    width:100%;
    height:100%;
    line-height: 1.8em;
    font-family: Arial;
    font-size: 10pt;
    background-color: #777;
}
div.demo {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 15px 15px 35px 15px;
}
div.demo input {
    width: 80%;
}

.demo-title {
    font-weight: bold;
}


#plane {
    width: 80px;
    height: 80px;
    margin: 0px;
    border: 0px;
    padding: 0px;
    
    background-image: url('http://1.bp.blogspot.com/_6_68Px79PIg/SotL9MHnAQI/AAAAAAAAA1o/AujZiegYj_k/s1600/sprite-shinden-banking.png');
    background-repeat: no-repeat;
    z-index: 2;

    position:absolute;
    top:40%;
    left:40%;
}

#plane.still,
#plane.up,
#plane.down
{
    background-position: -158px center;
}

#plane.left {
    background-position: 0px center;
}

#plane.right {
    background-position: -313px center;
}

JavaScript

/**
 * Define the KeyEvent object if it does not exist
 * For an exhaustive list, refer to http://mzl.la/Hw2KjT
 */

if (typeof KeyEvent == "undefined") {
    var KeyEvent = {
        
        // Direction: Arrow keys
        DOM_VK_LEFT: 37,
        DOM_VK_UP: 38,
        DOM_VK_RIGHT: 39,
        DOM_VK_DOWN: 40,
        
        // Direction: WASD keys
		DOM_VK_A: 65,
		DOM_VK_D: 68,
		DOM_VK_S: 83,
		DOM_VK_W: 87,
        
        // Acceleration
        DOM_VK_F: 70
    };
}


$(document).ready(function () {
    
    // jQuery Keyer 2.0
    $.widget("ui.keyer", {
        
        // default options
        options: {
            interval: 50,
            initialDelay: 0,
            keydown: $.noop,
            keyup: $.noop,
            fireKeydownOnMultipleHits: true
        },
        
        // the constructor
        _create: function () {
            // add a class for theming
            this.element.addClass("ui-keyer");

            this.state = {
                event: null,
                pressed: [],
                timer: null,
                elapsed: 0
            };

            this._initializeTimer();            

            var THIS = this;
            
            // Setup event handlers
            this.element
                .on('keydown', function (event) {
                    THIS._keydown.apply(THIS, [event]);
                })
                .on('keyup', function (event) {
                    THIS._keyup.apply(THIS, [event]);
                });

            // Also intially setup .one('keydown',...)
            this._keydownOnce();
        },

        _initializeTimer: function () {
            var THIS = this;

            if (this.state.timer) {
                clearInterval(this.state.timer);
                this.state.timer = null;
            }
            
            this.state.timer = setInterval(function () {
                THIS._keydownProxy.apply(THIS, [THIS.state.event]);
            }, this.options.interval);
  ...