var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");

var player = {
    x: 50,
    y: 50,
    width: 50,
    height: 50,
    speed: 5,
    jumping: false,
    velocity: 0,
    gravity: 0.5
};

function update() {
    if (player.jumping) {
        player.velocity += player.gravity;
        player.y += player.velocity;
        if (player.y > canvas.height - player.height) {
            player.y = canvas.height - player.height;
            player.jumping = false;
        }
    }
}

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillRect(player.x, player.y, player.width, player.height);
}

function keyHandler(event) {
    switch(event.code) {
        case "ArrowLeft":
            player.x -= player.speed;
            break;
        case "ArrowRight":
            player.x += player.speed;
            break;
        case "ArrowUp":
            if (!player.jumping) {
                player.jumping = true;
                player.velocity = -10;
            }
            break;
    }
}

setInterval(function() {
    update();
    draw();
}, 1000/30);

window.addEventListener("keydown", keyHandler, false);