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