Real life gameboy emulator

gameboy_irl_emulator.js

function init(){
    var emulator = document.querySelector('#emulator_target')
    emulator.style.top = "71px";
    emulator.style.left = "166px";
    emulator.style.width = "240px";
    emulator.style.height = "160px";
    emulator.style.opacity = "0.3";
    emulator.style.zIndex = "200";

    var gameboy = new Image()
    document.body.appendChild(gameboy)
    gameboy.src = "http://orig09.deviantart.net/5de6/f/2012/022/3/3/game_boy_advance_by_dbodine-d4nc2vw.jpg";
    gameboy.style.width = "573px";
    gameboy.style.position = "fixed";
    gameboy.style.top = "0px";
    gameboy.style.left = "0px";
    gameboy.style.zIndex = "100";


    var righthand = new Image()
    document.body.appendChild(righthand)
    // TODO: change this to righthange
    righthand.id = "hand";
    righthand.src = "https://mehulharry.files.wordpress.com/2012/08/custompen.png";  
    righthand.style.position = "fixed";
    righthand.style.top = "155px";
    righthand.style.left = "502px"; 
    righthand.style.zIndex = "300";
    righthand.style.webkitTransition = "top 0.1s linear, left 0.1s linear";
    righthand.style.MozTransition = "top 0.1s linear, left 0.1s linear";
}

var keycodes = {
    up: 38, down: 40, left: 37, right: 39
}

var finger = {
    neutral: {top: "155px", left: "502px"},
    b: {val: 90 /* z */, top: "139px", left: "462px", down: false},
    a: {val: 88 /* x */, top: "121px", left: "511px", down: false},
    up: {val: keycodes.up, top: "95px", left: "65px", down: false},
    down: {val: keycodes.down, top: "157px", left: "63px", down: false},
    left: {val: keycodes.left, top: "126px", left: "34px", down: false},
    right: {val: keycodes.right, top: "126px", left: "93px", down: false},
    getHand: function(){
        return document.querySelector('#hand')
    },
    setNeutral: function(){
        var hand = this.getHand();
        hand.style.top = this.neutral.top;
        hand.style.left = this.neutral.left;
    },
    setA: function(){
        var hand = this.getHand();
        hand.style.top = this.a.top;
        hand.style.left = this.a.left;
    },
    setB: function(){
        var hand = this.getHand();
        hand.style.top = this.b.top;
        hand.style.left = this.b.left;
    },
    setUp: function(){
        var hand = this.getHand();
        hand.style.top = this.up.top;
        hand.style.left = this.up.left;
    },
    setDown: function(){
        var hand = this.getHand();
        hand.style.top = this.down.top;
        hand.style.left = this.down.left;
    },
    setLeft: function(){
        var hand = this.getHand();
        hand.style.top = this.left.top;
        hand.style.left = this.left.left;
    },
    setRight: function(){
        var hand = this.getHand();
        hand.style.top = this.right.top;
        hand.style.left = this.right.left;
    }
}
function onKeyDown(event){
    var hand = document.querySelector('#hand')

    switch(event.keyCode){
    case finger.b.val:
        finger.b.down = true;
        finger.setB();
        break;
    case finger.a.val:
        finger.a.down = true;
        finger.setA();
        break;
    case finger.up.val:
        finger.up.down = true;
        finger.setUp()
        break;
    case finger.down.val:
        finger.down.down = true;
        finger.setDown()
        break;
    case finger.left.val:
        finger.left.down = true;
        finger.setLeft()
        break;
    case finger.right.val:
        finger.right.down = true;
        finger.setRight()
        break;
    }
}
function onKeyUp(event){
    var hand = document.querySelector('#hand')

    switch(event.keyCode){
    case finger.b.val:
          finger.b.down = false;
          if(finger.a.down) finger.setA();
          else finger.setNeutral();
          break;
    case finger.a.val:
          finger.a.down = false;
          if(finger.b.down) finger.setB();
          else finger.setNeutral();
          break;
    case finger.up.val:
        finger.up.down = false;
        if(finger.a.down) finger.setA();
        else if(finger.b.down) finger.setB();
        else finger.setNeutral();
        break;
    case finger.down.val:
        finger.down.down = false;
        if(finger.a.down) finger.setA();
        else if(finger.b.down) finger.setB();
        else finger.setNeutral();
        break;
    case finger.left.val:
        finger.left.down = false;
        if(finger.a.down) finger.setA();
        else if(finger.b.down) finger.setB();
        else finger.setNeutral();
        break;
    case finger.right.val:
        finger.right.down = false;
        if(finger.a.down) finger.setA();
        else if(finger.b.down) finger.setB();
        else finger.setNeutral();
        break;
    }
}

init()
document.addEventListener('keyup', onKeyUp, false)
document.addEventListener('keydown', onKeyDown, false)