SOURCE

console 命令行工具 X clear

                    
>
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;
}