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