Solid snake movement-I

by stackmanoz

HTML

<img id="plane" src='http://images.wikia.com/metalgear/images/1/1a/SolidSnake.png' border=0'/>

CSS

body{
    background:#444;
}
#plane {
    height: 150px;
width:80px;
    position:absolute;
    top:40px;left:40px;
}

JavaScript

var leftKey,upKey,rightKey,downKey;
    var box = $("#plane"),
        left = 37,
        up = 38,
        right = 39,
        down = 40;

    

function key(e) {
    console.log(e.keyCode);
    var $key = e.keyCode;

    $(document).keydown(function(e) {
        if (e.keyCode == left) 
        leftKey = true;
    

    if (e.keyCode == up) 
        upKey = true;
    
    if (e.keyCode == right) 
        rightKey = true;
    
    if (e.keyCode == down) 
        downKey = true;
    
    }).keyup(function(e) {
       if (e.keyCode == left) 
        leftKey = false;
    

    if (e.keyCode == up) 
        upKey = false;
    
    if (e.keyCode == right) 
       rightKey = false;
    
    if (e.keyCode == down) 
        downKey = false;
    
    });

    

}

$("body").keydown(function(){
   key(event); 
});




setInterval(function() {
    

    if (upKey) {
        box.css("top", "-=10");
    }
    if (rightKey) {
        box.css("left", "+=10");
    }
    if (downKey) {
        box.css("top", "+=10");
    }
    if (leftKey) {
        box.css("left", "-=10");
    }


},20);