FORK ME

console 命令行工具 X clear

                    
>
console
var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var jumpHeight=180;
var nowHight=0;
var isJumping = false;


//画出障碍物
function drawObj(nowHight,upward){
ctx.fillStyle="#2196f3";
ctx.save();
if(upward){
ctx.translate(500, 460-nowHight)
}
else{
ctx.translate(500, 280+nowHight)
}
ctx.rotate(nowHight * Math.PI/180)	
ctx.fillRect(-40,-40,80,80);
ctx.restore();
}

//创建主主
function createSquare(){
drawObj(0,true)
}

function clearObj(nowHight){
//ctx.clearRect(-40,-40,80,80); 
ctx.clearRect(0,0,1000,500); 
}


function jump(){
if(!isJumping){
isJumping = true;
jumpProcess = setInterval(function(){jumpUp()},10)
}
}

function jumpUp(){
if(nowHight<jumpHeight){
clearObj(nowHight)
nowHight+=5;
drawObj(nowHight,true)
}
else{
clearInterval(jumpProcess)
jumpProcess = setInterval(function(){jumpDown()},10)
nowHight=0;
}
}

function jumpDown(){
if(nowHight<jumpHeight){
clearObj(nowHight)
nowHight+=5;
drawObj(nowHight,false)
}
else{
clearInterval(jumpProcess)
isJumping = false;
nowHight=0;
}
}





//入口
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;
}