<canvas width="500" height="500" id="game"></canvas>
<script>
var canvas=document.getElementById('game')
var ctx=canvas.getContext('2d')
var movingRight=false;
var movingLeft=false;
var startTime="null"
var tough=0;
var jumping=false;
you = {
        x: 240,
        y: 480,
        width: 20,
        height: 20,
        maxSpeed: 8,
        speed:7,
        gravity:7,
        velX: 0,
        velY: 0,
        health: 100,
        jumping: false,
        doubleJump: true,
        canDoubleJump:false,
        invulnerable: false,
        invulnerableTimer:50,
        image: new Image(),
        imageReverse: new Image()
    };
you.image.src = "https://demogorgon22.files.wordpress.com/2015/06/little-guy-move-left-transflipped.gif";
setInterval(function(){
tough++
//ctx.clearRect(0, 0, canvas.width, canvas.height);
if(movingRight){
you.x+=you.speed
}
if(movingLeft){
you.x-=you.speed
}
if(jumping){
if(startTime=="null"){
startTime=tough
}
if(startTime+20!=tough){
you.y-=10
} else {
jumping=false;
startTime="null"
}
}
you.y+=you.gravity
if(you.x>480){
you.x=480
}
if(you.x<0){
you.x=0
}
if(you.y>480){
you.y=480
}
if(you.y<0){
you.y=0
}
render()
},17);




window.onload=function(){
render()
}

window.onkeyup = function (e){
var code = e.keyCode ? e.keyCode : e.which;
//alert(unicode + "up")

    if (code === 65) { //a key
        movingLeft=false;
    } else if (code === 68) { //d key
    movingRight=false;
    }
}


window.onkeydown = function (e) {
     code = e.keyCode ? e.keyCode : e.which;
    if (code === 87) { //w key
    if(you.y==480){
        jumping=true
    }
    } else if (code === 65) { //a key
        movingLeft=true;
    } else if (code === 68) { //d key
    movingRight=true;
    } else if(code === 27){//esc key
    clearInterval(main)
    }
}
function render(){

ctx.fillStyle="grey"
//ctx.fillRect(0,0,canvas.width, canvas.height)
ctx.drawImage(you.image, you.x, you.y);
}
</script>