console
var ctx;
var startPos=0;
var endPos=180;
var isJumping = false;
function drawObj(height){
canvas = document.getElementById("canvas");
ctx=canvas.getContext("2d");
ctx.fillStyle="#2196f3";
ctx.fillRect(430,430-height,70,70);
}
function createSquare(){
drawObj(0)
}
function clearObj(startPos){
ctx.clearRect(430,430-startPos,70,70);
}
function jump(){
if(!isJumping){
isJumping = true;
jumpProcess = setInterval(function(){jumpUp()},10)
}
}
function jumpUp(){
if(startPos<endPos){
clearObj(startPos)
startPos+=5;
drawObj(startPos)
}
else{
clearInterval(jumpProcess)
jumpProcess = setInterval(function(){jumpDown()},10)
}
}
function jumpDown(){
if(startPos>0){
clearObj(startPos)
startPos-=5;
drawObj(startPos)
}
else{
clearInterval(jumpProcess)
isJumping = false;
}
}
function main(){
createSquare()
}
main();
addEventListener("keydown", function (e) {
jump();
}, false);
<body>
<canvas id="canvas" width="1000" height="500" style="border:1px solid #4caf50;"></canvas>
body {TEXT-ALIGN: center;}
canvas {
margin-left: auto;
margin-right: auto;
}