document.onkeydown = checkKey;
var canvas;
var ctx;

var up;
var down;
var left;
var right;

var bobX = 200;
var bobY = 200;
var bobWidth = 30;
var bobHeight = 30;

window.onload = function() {
canvas = document.getElementById("gameCanvas");
ctx = canvas.getContext("2d");


var fps = 200; // frames per second
setInterval(function() {
    updateAll();
    drawAll();
    }, 1000/fps)

};

var drawAll = function() {
    // draw background
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // draw bob
    ctx.fillStyle = "red";
    ctx.fillRect(bobX, bobY, bobWidth, bobHeight);
};

var updateAll = function() {

if (up == true) {

    up = false;

}
if (down == true) {
    bobY += 1;
    down = false;
}
if (left == true) {
    bobX -= 1;
    left = false;
}
if (right == true) {
    bobX += 1;
    right = false;
}


};



function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
         up = true;
    }
    else if (e.keyCode == '40') {
        down = true;
    }
    else if (e.keyCode == '37') {
        left = true;
    }
    else if (e.keyCode == '39') {
        right = true;
    }

}