JSFiddle - React, Tailwind, and code Playground

by Terry Young

HTML

<img id="plane" src='http://img13.imageshack.us/img13/3334/planer.png' border='0'/>

CSS

body{
background:#444;
}
#plane {
    height: 50px;
    position:absolute;
    top:40%;
    left:40%;
}

JavaScript

setInterval(movePlane, 20);
var keys = {}

$(document).keydown(function(e) {
    keys[e.keyCode] = true;
});

$(document).keyup(function(e) {
    delete keys[e.keyCode];
});


function movePlane() {
    for (var direction in keys) {
        if (!keys.hasOwnProperty(direction)) continue;
        if (direction == 37) {
            $("#plane").animate({left: "-=5"}, 0);                
        }
        if (direction == 38) {
            $("#plane").animate({top: "-=5"}, 0);  
        }
        if (direction == 39) {
            $("#plane").animate({left: "+=5"}, 0);  
        }
        if (direction == 40) {
            $("#plane").animate({top: "+=5"}, 0);  
        }
    }
}