jQuery Key handling

by rajeshpillai

HTML

<body>
    
    <div id = "arrows">waiting..</div>
    <div id = "angle">waiting..</div>
    <div id = "btns"></div>
    <div id = "info"><b>Press arrow keys to control the ship</b></div>
    
    <div id = "ship-container">
        <div id = "ship"></div>
    </div>
    
</body>

CSS

body {background:#a9a9a9;}
#arrows{position:absolute;}
#angle{position:absolute;top:24px;}
#btns{position:absolute;top:48px;}
#info{position:absolute;top:72px;}
#ship-container {position: absolute;top:200px; left:200px;border:5px solid red;z-index:100;border-radius:3px;}
#ship { display:block; position: absolute; top: -64px; left:-43px; width: 86px; height: 128px; background: url("http://www.mobilejquery.net/space-ship-sprite.gif") no-repeat;z-index:1; }

JavaScript

var arrows = [false,false,false,false];
var keymap = [37,40,39,38];
keymap[0] = 37; // Left
keymap[1] = 40; // Down
keymap[2] = 39; // Right
keymap[3] = 38; // Up
var UNIT = 1.0;
var FORCE = 0.01;
var velocity = [UNIT, UNIT, UNIT, UNIT];
var ROTATION_GRAVITY = 0.1;

// ship vars
var ANGLE = 0.0;
var ANGLEX = 0;
var ANGLEY = 0;
var ANGLE_VELOCITY = 0;
var DIR_VELOCITY = 0.05;
var DIRECTION = 1;
var ROTATION_SPEED = 5.00;

function moveShipForward()
{
    var pos = $("#ship-container").offset();
    $("#btns").text(pos.left);
    
    $("#ship-container").css(
        { left: "+=" + parseInt(ANGLEX) + "px",
           top: "+=" + parseInt(ANGLEY) + "px" });
}

// Run on each frame:
function processShipControls() {
    if (arrows[0])
    {
        ANGLE -= ROTATION_SPEED; 
        ANGLEX = Math.sin(ANGLE*(Math.PI/180))*5.0;
        ANGLEY = -Math.cos(ANGLE*(Math.PI/180))*5.0;
        $("#angle").text("x:"+ANGLEX.toFixed(8)+",y:"+ANGLEY.toFixed(8));
    }   
    if (arrows[2])
    {
        ANGLE += ROTATION_SPEED;
        ANGLEX = Math.sin(ANGLE*(Math.PI/180))*5.0;
        ANGLEY = -Math.cos(ANGLE*(Math.PI/180))*5.0;
        $("#angle").text("x:"+ANGLEX.toFixed(8)+",y:"+ANGLEY.toFixed(8));
    }   
    
    if (arrows[1])
    {
        
    }
    
    if (arrows[3])
    {
        moveShipForward();
    }
}



function processShipPosition() {
    
    //DIR_VELOCITY += velocity[3] - UNIT;
    
    
    
    //DIR_VELOCITY -= 0.20;
    
    //if (DIR_VELOCITY < 0.0)
     //   DIR_VELOCITY = 0;
    
    rotateDiv("#ship", parseInt(ANGLE));
    
}

// Create rotation style and apply it to a DIV
function rotateDiv(id, deg)
{
    
    $(id).css({transform: "rotate(" + deg + "deg)"});

}

$(document).ready(function() {
    
    $("#arrows").text(keymap.length);
    
        $(document).keydown(function(event) {
            
            
            for (var i = 0; i < keymap.length; i++) {
                if (event.keyCode == keymap[i]) {
                    arrows[i] =...