最近比较空闲,研究了HTML5.还这真是有很多强大的地方.废话不多说,以下是我写的一个坦克大战的游戏.话了我几天时间,还是未完成版的,(未完成部分主要是敌军坦克如何去绘画,用<canvas>),如果有思路的可以给个回复,
虽然代码不是很长,但是逻辑思路还是很强的,绘画顺序都有一定要求(主要逻辑难点就是×××发射和击打障碍物和坦克对障碍物的判断):一下是代码(坦克移动,发射×××,障碍物判断都已完成)
计算
安全
数据库
网络和加速
企业服务
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> #container{ position:absolute; top:10px; left:300px; } #canvas{ position:absolute; top:0px; left:px; } #d{ height:20px; width:20px; background-color:#F7FCF7; border-style:groove; border-width:15px; border-color:#667560; } </style> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div style="height:600px;width:600px;background-color:#000000;border-style:solid;" id="container"> <canvas id="canvas" width="600" height="600"> </div> </body> <script type="text/javascript"> var ctx; var x; var y; var screenHeight; var screenWidth; var woodImg=new Image(); var hardImg=new Image(); var grassImg=new Image(); var myTankImg=new Image(); var eagleImg=new Image(); var TankData={speed:10,direction:"up"}; var time=8; //坦克 var GameObject=function(){this.x=0;this.y=0;this.p_w_picpath=null;}; var Tank=function(){};Tank.prototype=new GameObject(); var myTank=new Tank(); //××× var bulletFun=function(){ this.x=0; this.y=0; this.direction=""; this.speed=2; this.strong=1; } var bulletArr=new Array(0); $(window).ready(function(){ ctx=document.getElementById("canvas").getContext("2d"); screenWidth=parseInt($("#canvas").attr("width")); screenHeight=parseInt($("#canvas").attr("height")); keyDownEven(); mouseClick(); LoadData(); GameStart(); }); //初始化相关数据 var LoadData=function(){ myTank.x=200; myTank.y=560; mapArrayVal(); } //游戏开始加载所有图形 var GameStart=function(){ ctx.clearRect(0,0,screenWidth,screenHeight); ctx.save(); loadImg(); drawMap(); drawMyTank(); ctx.restore(); } //加载图片 var loadImg=function(){ woodImg.src="p_w_picpaths/wood.jpg"; hardImg.src="p_w_picpaths/hard.jpg"; grassImg.src="p_w_picpaths/grass.jpg"; myTankImg.src="p_w_picpaths/tank.png"; eagleImg.src="p_w_picpaths/eagle.jpg"; myTank.p_w_picpath=myTankImg; } //地图用二维数组表示,0表示空,1表示红砖,2表示铁砖,3表示草皮,4未定(暂用草皮) var mapArray=new Array(30); var mapArrayVal=function(){ for(var i=0;i<mapArray.length;i++){ mapArray[i]=new Array(30); for(var j=0;j<mapArray[i].length;j++){ mapArray[i][j]=parseInt(10*Math.random()); } } //地图有些地方时不能有红砖,草皮等东西的 mapArray[0][0]=0;mapArray[1][0]=0;mapArray[13][0]=0;mapArray[14][0]=0;mapArray[28][0]=0;mapArray[29][0]=0; mapArray[0][1]=0;mapArray[1][1]=0;mapArray[13][1]=0;mapArray[14][1]=0;mapArray[28][1]=0;mapArray[29][1]=0; mapArray[12][27]=1;mapArray[13][27]=1;mapArray[14][27]=1;mapArray[15][27]=1;mapArray[16][27]=1;mapArray[17][27]=1; mapArray[10][28]=0;mapArray[11][28]=0;mapArray[12][28]=1;mapArray[13][28]=1;mapArray[14][28]=0;mapArray[15][28]=0;mapArray[16][28]=1;mapArray[17][28]=1;mapArray[18][28]=0;mapArray[19][27]=0; mapArray[10][29]=0;mapArray[11][29]=0;mapArray[12][29]=1;mapArray[13][29]=1;mapArray[14][29]=0;mapArray[15][29]=0;mapArray[16][29]=1;mapArray[17][29]=1;mapArray[18][29]=0;mapArray[19][29]=0; } //绘制地图 var drawMap=function(){ for(var i=0;i<mapArray.length;i++){ for(var j=0;j<mapArray[i].length;j++){ x=i*20; y=j*20; if(mapArray[i][j]==1){ ctx.drawImage(woodImg,x,y); }else if(mapArray[i][j]==2){ ctx.drawImage(hardImg,x,y); }else if(mapArray[i][j]==3){ ctx.drawImage(grassImg,x,y); } } } ctx.drawImage(eagleImg,280,560); }; //绘制我的坦克 var drawMyTank=function(){ ctx.translate(myTank.x+myTank.p_w_picpath.width/2,myTank.y+myTank.p_w_picpath.height/2); ctx.rotate(turnToAngle(TankData.direction) * Math.PI/180); ctx.drawImage(myTank.p_w_picpath,-myTank.p_w_picpath.width/2,-myTank.p_w_picpath.height/2); } //绘制××× var drawBullet=function(x,y,direction){ ctx.fillStyle="#339900"; ctx.beginPath(); ctx.arc(x,y,4,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); } /* *以下是相关事件 */ //按键事件坦克移动转向 var keyDownEven=function(){ $("html").keydown(function(e){ var key=e.which; if(key==37)key="left"; else if(key==38)key="up"; else if(key==39)key="right"; else if(key==40)key="down"; else key="no"; turnDirection(key,e); }) } //坦克转向移动以及边界检测 var turnDirection=function(key,e){ if(key!="no"){ e.preventDefault(); //物体边界检测 if(checkObject(key)==true){ //边界检测 if(key=="left"){ myTank.x=myTank.x<=0?0:myTank.x-TankData.speed; }else if(key=="up"){ myTank.y=myTank.y<=0?0:myTank.y-TankData.speed; }else if(key=="right"){ myTank.x=myTank.x>=screenWidth-myTank.p_w_picpath.width?myTank.x:myTank.x+TankData.speed; }else if(key=="down"){ myTank.y=myTank.y>=screenHeight-myTank.p_w_picpath.height?myTank.y:myTank.y+TankData.speed; } } ctx.clearRect(0, 0, screenWidth, screenHeight); ctx.save(); drawMap(); TankData.direction=key; drawMyTank(); ctx.restore(); } }//将方向转成角度 var turnToAngle=function(direction){ if(direction=="right") return 90; if(direction=="down")return 180; if(direction=="left")return 270; if(direction=="up")return 360; } //鼠标点击事件(发射×××) var result; var mouseClick=function(){ $("html").mousedown(function(){ clearInterval(result); createBullet(myTank.x+myTank.p_w_picpath.width/2,myTank.y+myTank.p_w_picpath.height/2,TankData.direction); result=setInterval(drawBulletLoop,time); }) }; //射击,创建××× var createBullet=function(_x,_y,_d){ var bullet=new bulletFun(); bullet.x=_x; bullet.y=_y; bullet.direction=_d; bulletArr.push(bullet); }; //循环绘画××× var drawBulletLoop=function(){ ctx.clearRect(0, 0, screenWidth, screenHeight); ctx.save(); drawMap(); var obj_x; var obj_y; for(var i=0;i<bulletArr.length;i++){ drawBullet(bulletArr[i].x,bulletArr[i].y,bulletArr[i].direction); if(bulletArr[i].direction=="left"){ obj_x=parseInt(bulletArr[i].x/20)-1<0?0:parseInt(bulletArr[i].x/20)-1; obj_y=parseInt(bulletArr[i].y/20); bulletArr[i].x-=bulletArr[i].speed; if(bulletArr[i].x>0){ if(obj_x*20+20>=bulletArr[i].x){ if(bulletArr[i].y%20==0){ if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){ mapArray[obj_x][obj_y]=0; bulletArr.splice(i,1); } if(mapArray[obj_x][obj_y-1]==1||mapArray[obj_x][obj_y-1]==2){ mapArray[obj_x][obj_y-1]=0; bulletArr.splice(i,1); } }else{ if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){ mapArray[obj_x][obj_y]=0; bulletArr.splice(i,1); } } } }else if(bulletArr[i].x<=0){ bulletArr.splice(i,1); } }else if(bulletArr[i].direction=="up"){ obj_x=parseInt(bulletArr[i].x/20); obj_y=parseInt(bulletArr[i].y/20)-1<0?0:parseInt(bulletArr[i].y/20)-1; bulletArr[i].y-=bulletArr[i].speed; if(bulletArr[i].y>0){ if(obj_y*20+20>=bulletArr[i].y){ if(bulletArr[i].x%20==0){ if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){ mapArray[obj_x][obj_y]=0; bulletArr.splice(i,1); } if(mapArray[obj_x-1][obj_y]==1||mapArray[obj_x-1][obj_y]==2){ mapArray[obj_x-1][obj_y]=0; bulletArr.splice(i,1); } }else{ if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){ mapArray[obj_x][obj_y]=0; bulletArr.splice(i,1); } } } }else if(bulletArr[i].y<=0){ bulletArr.splice(i,1); } }else if(bulletArr[i].direction=="right"){ obj_x=parseInt(bulletArr[i].x/20)>29?29:parseInt(bulletArr[i].x/20); obj_y=parseInt(bulletArr[i].y/20); bulletArr[i].x+=bulletArr[i].speed; if(bulletArr[i].x<screenWidth){ if(obj_x*20<=bulletArr[i].x){ if(bulletArr[i].y%20==0){ if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){ mapArray[obj_x][obj_y]=0; bulletArr.splice(i,1); } if(mapArray[obj_x][obj_y-1]==1||mapArray[obj_x][obj_y-1]==2){ mapArray[obj_x][obj_y-1]=0; bulletArr.splice(i,1); } }else{ if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){ mapArray[obj_x][obj_y]=0; bulletArr.splice(i,1); } } } }else if(bulletArr[i].x>=screenWidth){ bulletArr.splice(i,1); } }else if(bulletArr[i].direction=="down"){ obj_x=parseInt(bulletArr[i].x/20); obj_y=parseInt(bulletArr[i].y/20)<0?0:parseInt(bulletArr[i].y/20); bulletArr[i].y+=bulletArr[i].speed; if(bulletArr[i].y<screenHeight){ if(obj_y*20<=bulletArr[i].y){ if(bulletArr[i].x%20==0){ if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){ mapArray[obj_x][obj_y]=0; bulletArr.splice(i,1); } if(mapArray[obj_x-1][obj_y]==1||mapArray[obj_x-1][obj_y]==2){ mapArray[obj_x-1][obj_y]=0; bulletArr.splice(i,1); } }else{ if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){ mapArray[obj_x][obj_y]=0; bulletArr.splice(i,1); } } } }else if(bulletArr[i].x>=screenHeight){ bulletArr.splice(i,1); } } } drawMyTank(); ctx.restore(); } //坦克和物体边界的检测 var checkObject=function(direction){ var object_x; var object_y; var loop; if(direction=="left"){ object_x=myTank.x%20==0?myTank.x-20:myTank.x-30; if(object_x<0)object_x=0; if(myTank.y%20==0){ object_y=myTank.y; loop=2; }else{ object_y=myTank.y-myTank.y%20; loop=3; } for(var i=0;i<loop;i++){ if((mapArray[object_x/20][object_y/20+i]==1||mapArray[object_x/20][object_y/20+i]==2)&&(object_x+20)>=myTank.x){ return false; } } }else if(direction=="up"){ object_y=myTank.y%20==0?myTank.y-20:myTank.y-30; if(myTank.x%20==0){ object_x=myTank.x; loop=2; }else{ object_x=myTank.x-myTank.x%20; loop=3; } for(var i=0;i<loop;i++){ if((mapArray[object_x/20+i][object_y/20]==1||mapArray[object_x/20+i][object_y/20]==2)&&(object_y+20)>=myTank.y){ return false; } } }else if(direction=="right"){ object_x=myTank.x%20==0?myTank.x+myTank.p_w_picpath.width:myTank.x+myTank.p_w_picpath.width+10; if(object_x>=600)object_x=580; if(myTank.y%20==0){ object_y=myTank.y; loop=2; }else{ object_y=myTank.y-myTank.y%20; loop=3; } for(var i=0;i<loop;i++){ if((mapArray[object_x/20][object_y/20+i]==1||mapArray[object_x/20][object_y/20+i]==2)&&object_x<=(myTank.x+myTank.p_w_picpath.width)){ return false; } } }else if(direction=="down"){ object_y=myTank.y%20==0?myTank.y+40:myTank.y+50; if(myTank.x%20==0){ object_x=myTank.x; loop=2; }else{ object_x=myTank.x-myTank.x%20; loop=3; } for(var i=0;i<loop;i++){ if((mapArray[object_x/20+i][object_y/20]==1||mapArray[object_x/20+i][object_y/20]==2)&&(object_y)<=(myTank.y+myTank.p_w_picpath.width)){ return false; } } } return true; } </script> </html> 亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
