基于html5的单机游戏.docx

亲，该文档总共34页，到这儿已超出免费预览范围，如果喜欢就下载吧！

Main.js

window.addEventListener（"load",canvasApp,false）;

//是否支持canvas

functioncanvasSupport（）{

returnModernizr.canvas;

}

functioncanvasApp（）{

//是否支持canvas

if（!

canvasSupport（））{

return;

}

vartheCanvas=document.getElementById（"canvasOne"）;

varcontext=theCanvas.getContext（"2d"）;

vartank=newImage（）;

tank.addEventListener（'load',start,false）;

tank.src="tanks_sheet.png"

//Background

context.fillStyle="#CCCCCC";

context.fillRect（0,0,theCanvas.width,theCanvas.height）;

//Box

context.lineWidth=16;

context.strokeStyle="#000000";

context.strokeRect（8,8,theCanvas.width-16,theCanvas.height-16）;

//画我方tank和我方炮弹

functiondrawtank（）{

if（gameover）{

context.save（）;

context.fillStyle="#000000";

context.font="normalbold50pxnormal";

context.fillText（"游戏结束",150,150）;

context.restore（）;

context.save（）;

context.fillStyle="#000000";

context.font="normalbold25pxnormal";

context.fillText（"按空格键重新开始游戏",125,200）;

context.restore（）;

update（）;

return;

}

update（）;

drawScene（）;

render（）;

//画场景

functiondrawScene（）{

for（vari=0;i<=10;i++）{

for（varj=0;j<=14;j++）{

colCtr=j*32+16;

rowCtr=i*32+16;

context.save（）;

sourceX=Math.floor（scene[i][j]%8）*32;

sourceY=Math.floor（scene[i][j]/8）*32;

context.drawImage（tank,sourceX,sourceY,32,32,colCtr,rowCtr,32,32）;

context.restore（）;

}

}

}

//坦克更新数据

functionupdate（）{

tankmove.x=tankmove.nextx;

tankmove.y=tankmove.nexty;

//左

if（keyPressList[37]==true）{

//playermove.play（）;

//playermove.stop（）;

if（gameover）{

return;

}

space（）;

tankmove.tankAngle=270;

tankmove.nextx-=tankmove.tankspeed;

tankmove.tankshape=tankmove.tanknextshape;

if（scene[Math.floor（（tankmove.nexty-12）/32）][Math.floor（（tankmove.nextx-12）/32）]!

=0||scene[Math.ceil（（tankmove.nexty-20）/32）][Math.floor（（tankmove.nextx-12）/32）]!

=0）{

tankmove.nextx=tankmove.x;

tankmove.nexty=tankmove.y;

return;

}

tankmove.tanknextshape+=1;

if（tankmove.tanknextshape>8）{

tankmove.tanknextshape=1;

}

return;

}

//右

if（keyPressList[39]==true）{

if（gameover）{

return;

}

space（）;

tankmove.tankAngle=90;

tankmove.nextx+=tankmove.tankspeed;

tankmove.tankshape=tankmove.tanknextshape;

if（scene[Math.ceil（（tankmove.nexty-20）/32）][Math.ceil（（tankmove.nextx-20）/32）]!

=0||scene[Math.floor（（tankmove.nexty-12）/32）][Math.ceil（（tankmove.nextx-20）/32）]!

=0）{

tankmove.nextx=tankmove.x;

tankmove.nexty=tankmove.y;

return;

}

tankmove.tanknextshape+=1;

if（tankmove.tanknextshape>8）{

tankmove.tanknextshape=1;

}

return;

}

//上

if（keyPressList[38]==true）{

if（gameover）{

return;

}

space（）;

tankmove.tankAngle=0;

tankmove.nexty-=tankmove.tankspeed;

tankmove.tankshape=tankmove.tanknextshape;

if（scene[Math.floor（（tankmove.nexty-12）/32）][Math.floor（（tankmove.nextx-12）/32）]!

=0||scene[Math.floor（（tankmove.nexty-12）/32）][Math.ceil（（tankmove.nextx-20）/32）]!

=0）{

tankmove.nextx=tankmove.x;

tankmove.nexty=tankmove.y;

return;

}

tankmove.tanknextshape+=1;

if（tankmove.tanknextshape>8）{

tankmove.tanknextshape=1;

}

return;

}

//下

if（keyPressList[40]==true）{

if（gameover）{

return;

}

space（）;

tankmove.tankAngle=180;

tankmove.nexty+=tankmove.tankspeed;

tankmove.tankshape=tankmove.tanknextshape;

if（scene[Math.ceil（（tankmove.nexty-20）/32）][Math.ceil（（tankmove.nextx-20）/32）]!

=0||scene[Math.ceil（（tankmove.nexty-20）/32）][Math.floor（（tankmove.nextx-12）/32）]!

=0）{

tankmove.nextx=tankmove.x;

tankmove.nexty=tankmove.y;

return;

}

tankmove.tanknextshape+=1;

if（tankmove.tanknextshape>8）{

tankmove.tanknextshape=1;

}

return;

}

space（）

//空格，发射炮弹

functionspace（）{

if（keyPressList[32]==true）{

if（gameover）{

location.reload（）;

}

if（shell.shellflage）{

return;

}

if（tankmove.nextx<0）{

return;

}

else{

shootSound.play（）;

shell.shellflage=true;

shell.nextx=tankmove.nextx;

shell.nexty=tankmove.nexty;

shell.shellAngle=tankmove.tankAngle;

if（shellInterval）{

clearInterval（shellInterval）;

shellInterval=null;

}

shellInterval=setInterval（drawshell,33）;

}

}

}

}

//坦克实施

functionrender（）{

context.save（）;

context.setTransform（1,0,0,1,0,0）

varangleInRadians=tankmove.tankAngle*Math.PI/180;

context.translate（tankmove.x+16,tankmove.y+16）

context.rotate（angleInRadians）;

vartankshapeX=Math.floor（tankmove.tankshape%8）*32;

vartankshapeY=Math.floor（tankmove.tankshape/8）*32;

context.drawImage（tank,tankshapeX,tankshapeY,32,32,-16,-16,32,32）;

context.restore（）;

context.clearRect（496,16,138,352）;

context.fillStyle="#3cb371";

context.fillRect（496,16,138,352）;

context.save（）;

context.fillStyle="#000000";

context.font="italicbold23pxserif";

context.fillText（"关卡:

"+level+"",500,80）;

context.fillText（"敌人:

"+surplus+"",500,110）;

context.fillText（"生命:

"+life+"",500,140）;

context.fillText（"得分:

"+score+"",500,170）;

context.fillText（"最高分:

"+record+"",500,200）;

context.restore（）;

context.save（）;

context.fillStyle="#000000";

context.font="normalbold15pxnormal";

context.fillText（"游戏说明:

玩家",500,270）;

context.fillText（"操控坦克进行战",500,290）;

context.fillText（"斗，击毁敌方得",500,310）;

context.fillText（"分，被击毁或相",500,330）;

context.fillText（"相撞减分。

",500,350）;

context.restore（）;

}

//画炮弹

functiondrawshell（）{

if（gameover）{

return;

}

shellupdate（）

shellrender（）

//炮弹发射数据更新

functionshellupdate（）{

if（shell.shellAngle==0）{

shell.nexty-=shell.shellspeed;

vari=scene[Math.floor（（shell.nexty-12）/32）][Math.floor（（shell.nextx）/32）];

scene[Math.floor（（shell.nexty-12）/32）][Math.floor（（shell.nextx）/32）]=hitwall（i）;

}

if（shell.shellAngle==90）{

shell.nextx+=shell.shellspeed;

vari=scene[Math.floor（（shell.nexty）/32）][Math.floor（（shell.nextx+12）/32）];

scene[Math.floor（（shell.nexty）/32）][Math.floor（（shell.nextx+12）/32）]=hitwall（i）;

}

if（shell.shellAngle==180）{

shell.nexty+=shell.shellspeed;

vari=scene[Math.floor（（shell.nexty+12）/32）][Math.floor（（shell.nextx）/32）];

scene[Math.floor（（shell.nexty+12）/32）][Math.floor（（shell.nextx）/32）]=hitwall（i）;

}

if（shell.shellAngle==270）{

shell.nextx-=shell.shellspeed;

vari=scene[Math.floor（（shell.nexty）/32）][Math.floor（（shell.nextx-12）/32）];

scene[Math.floor（（shell.nexty）/32）][Math.floor（（shell.nextx-12）/32）]=hitwall（i）;

}

//检测炮弹是否撞墙

functionhitwall（i）{

switch（i）{

case26:

if（shellInterval）{

clearInterval（shellInterval）;

shellInterval=null;

}

setTimeout（function（）{shell.shellflage=false},300）;

shell.nextx=-500;

shell.nexty=-500;

return0;

break

case31:

if（shellInterval）{

clearInterval（shellInterval）;

shellInterval=null;

}

setTimeout（function（）{shell.shellflage=false},300）;

shell.nextx=-500;

shell.nexty=-500;

returni;

break

case30:

if（shellInterval）{

clearInterval（shellInterval）;

shellInterval=null;

}

setTimeout（function（）{shell.shellflage=false},300）;

shell.nextx=-500;

shell.nexty=-500;

returni;

break

default:

return0;

}

}

}

//炮弹发射实施

functionshellrender（）{

shell.x=shell.nextx;

shell.y=shell.nexty;

context.save（）;

context.setTransform（1,0,0,1,0,0）

varshellangleInRadians=shell.shellAngle*Math.PI/180;

context.translate（shell.x+16,shell.y+16）

context.rotate（shellangleInRadians）;

varshellshapeX=Math.floor（shell.shellshape%8）*32;

varshellshapeY=Math.floor（shell.shellshape/8）*32;

context.drawImage（tank,shellshapeX,shellshapeY,32,32,-16,-16,32,32）;

context.restore（）;

}

}

}

//画敌军坦克

functiondrawenemy（）{

if（gameover）{

return;

}

for（varenemytanknum=0;enemytanknum<=2;enemytanknum++）{

varenemytank=enemy[enemytanknum];

//enemyrmove.play（）;

enemyupdate（）;

enemyrender（）;

}

functionenemyupdate（）{

enemytank.shapenum=（0.1+enemytank.shapenum）%8+9;//减慢滚带的速度

enemytank.enemytankshape=Math.floor（enemytank.shapenum）;

//下

if（enemytank.enemytankAngle==180）{

swerve（）

enemytank.nexty+=enemytank.enemytankspeed;

if（scene[Math.ceil（（enemytank.nexty-20）/32）][Math.ceil（（enemytank.nextx-20）/32）]!

=0||scene[Math.ceil（（enemytank.nexty-20）/32）][Math.floor（（enemytank.nextx-12）/32）]!

=0）{

enemyhitwall（）

}

}

//左

if（enemytank.enemytankAngle==270）{

swerve（）

enemytank.nextx-=enemytank.enemytankspeed;

if（scene[Math.floor（（enemytank.nexty-12）/32）][Math.floor（（enemytank.nextx-12）/32）]!

=0||scene[Math.ceil（（enemytank.nexty-20）/32）][Math.floor（（enemytank.nextx-12）/32）]!

=0）{

enemyhitwall（）

相关搜索

资源标签

当前位置：首页 > IT计算机 > 电脑基础知识