Edit in JSRUN

console 命令行工具 X clear

                    
>
console
var backgroundAudio = document.getElementById("Background-AudioPlayer");
var jumpAudio = document.getElementById("Jump-AudioPlayer");
var gameoverAudio = document.getElementById("GameOver-AudioPlayer");
var canvas = document.getElementById("player");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#2196f3";


//X,Y是方块的中心点,初始时是在半空中,准备下落
var playerX=40;
var playerY=40;

var playSpeed=15;
var playerMoveSpeed=7;

var jumpProcess;
var moveProcess;


//跳跃过程
var vt=1500
var v0=1500
var g=4000
var s=0
var t=playSpeed/1000;
var angle=0;
var spin=8;

var vFall=0;
var sFall=0

var isJumping = false;
var isStart=false;
var isWin=false;

//////////////////初始变量///////////////

//画出障碍物
function drawObstacle(position,height){
canvasBg =  document.getElementById("background");
ctxBg=canvasBg.getContext("2d");
ctxBg.fillStyle="#9b59b6";
ctxBg.fillRect(100*position,500-height,100,height);
//位置position,竖直位置,宽度100,高度height
}
function createObstacles(){
drawObstacle(0,1)
drawObstacle(2,1)
drawObstacle(4,1)
drawObstacle(5,230)	//500,160 左侧左边,高度
drawObstacle(8,2) 

}

//////////////////上面是背景CANVAS相关////



//绘制方块的函数
function drawObj(playerY,angle){
clearPlayer()
ctx.save();
ctx.translate(playerX, 460-playerY)
ctx.rotate(angle* Math.PI/360)	
ctx.fillRect(-40,-40,80,80);
ctx.restore();
playerX+=playerMoveSpeed;

}

function drawObj1(playerY){
ctx.clearRect(0,0,1200,500); 
ctx.fillRect(0,460-playerY,80,80);
}


//清除canvas方块图形
function clearPlayer(){
ctx.clearRect(0,0,1200,500); 
	
	//失败&胜利条件
	if(playerX>=canvas.width-40){
	ctx.fillText("YOU WIN !!!", 400, 150);
	ctx.fillText("press any key to restart", 400, 200);

	if(jumpProcess!=null) clearInterval(jumpProcess)
	if(moveProcess!=null) clearInterval(moveProcess)
	
	isStart=false;
	isWin=true;
	isJumping = false;
	}

	else if(playerX>=460 && playerX<=640 && playerY<=230){
	gameoverAudio.play()
	bloom()
	reset()
	}
	else{
	
	}

}


//跳跃
function jump(){
jumpAudio.play()
isJumping = true;
if(moveProcess!=null) clearInterval(moveProcess)
jumpProcess = setInterval(jumpUp,playSpeed)
}


function jumpUp(){
		if(v0>0){
		s=v0*t-0.5*g*t*t
		v0=v0-g*t
		angle+=spin;
		drawObj(playerY,angle)
		playerY+=s
		}
		else{
		clearInterval(jumpProcess)
		jumpProcess = setInterval(jumpDown,playSpeed)
		}
}

function jumpDown(){
		if(v0<vt){
		s=v0*t+0.5*g*t*t
		v0=v0+g*t
		drawObj(playerY,angle)
		playerY-=s;
		angle+=spin
		}
		else{
		clearInterval(jumpProcess)
		isJumping = false;
		angle=0
		playerY=40
		moveProcess = setInterval(move,playSpeed)
		}
}





//移动
function move(){
clearPlayer()
ctx.fillRect(playerX-40,420,80,80);
playerX+=playerMoveSpeed;
}

function fallDown(){
playerY=150;
playerX=40
v0=0
isJumping = true;
//setTimeout(function(){},1550)
moveProcess = setInterval(fallDownProcess,playSpeed)
}

function fallDownProcess(){
	if(playerY>40){
	s=v0*t+0.5*100*t*t
	v0=v0+g*t
	playerY-=s
	drawObj1(playerY)
	}
	else{
	clearInterval(moveProcess)
	moveProcess = setInterval(move,playSpeed)
	isJumping = false;
	s=0
	v0=vt
	}
}


//重置
function reset(){
if(jumpProcess!=null) clearInterval(jumpProcess)
if(moveProcess!=null) clearInterval(moveProcess)
setTimeout(function(){ctx.clearRect(0,0,1200,500); },1)

//如果不用延时清除画布,无论如何都无法将死后滞留的方块图像清除。
//ctx.clearRect(0,0,1200,500)
//比如这样直接写,毫无作用

//setTimeout(fallDown,1)
//如果用这个,在即将平移到柱体时跳跃,会出现严重BUG,方块会乱飞。

fallDown()
isStart=true;
}


function start(){
fallDown()
ctx.clearRect(0,0,1200,500); 
}




//入口
function main(){
ctx.font = "40px Georgia";
ctx.fillText("Press ANY KEY to play, restart and jump", 250, 150);
createObstacles()

addEventListener("keydown", function(e) {
	if(!isStart&&!isWin){
	start()
	isStart=true;
	}
	else if(!isStart&&isWin){
	reset();
	}
	else if(!isJumping){
	if(moveProcess!=null) clearInterval(moveProcess)
	jump();
	}
	else{}
}, false);

backgroundAudio.play()
backgroundAudio.volume="0.5"
}



canvas6=document.getElementById("canvas");
canvas1=document.getElementById("canvas1");
canvas2=document.getElementById("canvas2");
canvas3=document.getElementById("canvas3");
canvas4=document.getElementById("canvas4");
canvas5=document.getElementById("canvas5");


var ctx6=canvas6.getContext("2d");
var ctx1=canvas1.getContext("2d");
var ctx2=canvas2.getContext("2d");
var ctx3=canvas3.getContext("2d");
var ctx4=canvas4.getContext("2d");
var ctx5=canvas5.getContext("2d");


var startPostion=0
var startPostion1=0
var startPostion2=0
var startPostion3=0
var startPostion4=0
var startPostion5=0
var time=0
var expProcess;
var rgb_r="21"
var rgb_g="96"
var rgb_b="f3"
var isGoing=false;

	function drawExplosive(initialVelocity,initialVelocity1,initialVelocity2,initialVelocity3,initialVelocity4,initialVelocity5){
	if(time<30){
	ctx6.clearRect(startPostion-1,-1,1000,500); 
	ctx1.clearRect(startPostion1-1,-1,1000,500); 
	ctx2.clearRect(startPostion2-1,-1,1000,500); 
	ctx3.clearRect(startPostion3-1,-1,1000,500); 
	ctx4.clearRect(startPostion4-1,-1,1000,500); 
	ctx5.clearRect(startPostion5-1,-1,1000,500); 
	
	
	ctx6.fillStyle="#"+rgb_r+rgb_g+rgb_b;
	ctx1.fillStyle="#"+rgb_r+rgb_g+rgb_b;
	ctx2.fillStyle="#"+rgb_r+rgb_g+rgb_b;
	ctx3.fillStyle="#"+rgb_r+rgb_g+rgb_b;
	ctx4.fillStyle="#"+rgb_r+rgb_g+rgb_b;
	ctx5.fillStyle="#"+rgb_r+rgb_g+rgb_b;
	
	
	ctx6.fillRect(startPostion+initialVelocity,0,20,20);
	ctx1.fillRect(startPostion1+initialVelocity1,0,20,20);
	ctx2.fillRect(startPostion2+initialVelocity2,0,20,20);
	ctx3.fillRect(startPostion3+initialVelocity3,0,20,20);
	ctx4.fillRect(startPostion4+initialVelocity4,0,20,20);
	ctx5.fillRect(startPostion5+initialVelocity5,0,20,20);
	
	startPostion+=initialVelocity
	startPostion1+=initialVelocity1
	startPostion2+=initialVelocity2
	startPostion3+=initialVelocity3
	startPostion4+=initialVelocity4
	startPostion5+=initialVelocity5
	
	time++
	
	rgb_r=parseInt(rgb_r,16)
	rgb_g=parseInt(rgb_g,16)
	rgb_b=parseInt(rgb_b,16)
	if(rgb_r<251){
	rgb_r+=8
	}
	if(rgb_b<251){
	rgb_b+=8
	}
	if(rgb_g<251){
	rgb_g+=8
	}
	rgb_r=rgb_r.toString(16)
	rgb_g=rgb_g.toString(16)
	rgb_b=rgb_b.toString(16)
	
	}
	else{
	clearInterval(expProcess)
	startPostion=0;
	startPostion1=0
	startPostion2=0
	startPostion3=0
	startPostion4=0
	startPostion5=0
	time=0;
	rgb_r="21"
	rgb_g="96"
	rgb_b="f3"

	ctx6.restore();
	ctx1.restore();
	ctx2.restore();
	ctx3.restore();
	ctx4.restore();
	ctx5.restore();
	
	ctx6.clearRect(0,0,1000,500); 
	ctx1.clearRect(0,0,1000,500); 
	ctx2.clearRect(0,0,1000,500); 
	ctx3.clearRect(0,0,1000,500); 
	ctx4.clearRect(0,0,1000,500); 
	ctx5.clearRect(0,0,1000,500); 
	
	isGoing=false;
	}
	}

//////////////////爆炸类//////////////////////////

		function explosive() {
		var initialVelocity = Math.floor(10*Math.random()+1);
		var initialVelocity1 = Math.floor(10*Math.random()+1);
		var initialVelocity2 = Math.floor(10*Math.random()+1);
		var initialVelocity3 = Math.floor(10*Math.random()+1);
		var initialVelocity4 = Math.floor(10*Math.random()+1);
		var initialVelocity5 = Math.floor(10*Math.random()+1);
		
		var initialAngle = Math.floor(360*Math.random());
		var initialAngle1 = Math.floor(360*Math.random());
		var initialAngle2 = Math.floor(360*Math.random());
		var initialAngle3 = Math.floor(360*Math.random());
		var initialAngle4 = Math.floor(360*Math.random());
		var initialAngle5 = Math.floor(360*Math.random());
		
		ctx6.save();
		ctx1.save();
		ctx2.save();
		ctx3.save();
		ctx4.save();
		ctx5.save();
		
		
		expProcess = setInterval(function(){drawExplosive(initialVelocity,initialVelocity1,initialVelocity2,initialVelocity3,initialVelocity4,initialVelocity5)},16.7)
		
		ctx6.translate(playerX+40, 460-playerY)
		ctx1.translate(playerX+40, 460-playerY)
		ctx2.translate(playerX+40, 460-playerY)
		ctx3.translate(playerX+40, 460-playerY)
		ctx4.translate(playerX+40, 460-playerY)
		ctx5.translate(playerX+40, 460-playerY)
		
		
		ctx6.rotate(initialAngle * Math.PI/180)	
		ctx1.rotate(initialAngle1 * Math.PI/180)	
		ctx2.rotate(initialAngle2 * Math.PI/180)	
		ctx3.rotate(initialAngle3 * Math.PI/180)
		ctx4.rotate(initialAngle4 * Math.PI/180)	
		ctx5.rotate(initialAngle5 * Math.PI/180)	
	}

		



//////////////////爆炸类//////////////////////////
function bloom(){
explosive()
isGoing=true;
}

function load (){
 
    document.addEventListener('touchstart',touch,false);
    document.addEventListener('touchmove',touch,false);
    document.addEventListener('touchend',touch,false);
     
    function touch (event){
        var event = event || window.event;
         
        var oInp = document.getElementById("inp");
 
        switch(event.type){
            case "touchstart":
				jump()
                break;
            case "touchend":
               
                break;
            case "touchmove":
                event.preventDefault();
                
                break;
        }
         
    }
}
window.addEventListener('load',load,false);

//初始化
main();
<canvas id="player" width="1200" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
<canvas id="background" width="1200" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:331;"></canvas>


<canvas id="canvas" width="1200" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
<canvas id="canvas1" width="1200" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
<canvas id="canvas2" width="1200" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
<canvas id="canvas3" width="1200" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
<canvas id="canvas4" width="1200" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>
<canvas id="canvas5" width="1200" height="500" style="left:100px;position:absolute;border:1px solid #4caf50;z-index:421;"></canvas>



<audio loop="loop" id="Background-AudioPlayer" preload="auto">
	<source src="http://www.lessmilk.com/game/box-jump/sounds/music.wav" type="audio/mp3"/ >
	</audio>
	<audio id="GameOver-AudioPlayer" preload="auto">
	<source src="http://www.lessmilk.com/game/box-jump/sounds/hit.wav" type="audio/mp3">
	</audio>
	<audio id="Jump-AudioPlayer" preload="auto">
	<source src="http://www.lessmilk.com/game/box-jump/sounds/jump.wav" type="audio/mp3"/>
	</audio>
body {TEXT-ALIGN: center;margin:0;padding:0}
canvas {
margin-left: auto;
margin-right: auto;
}