HTML5坦克大战
admin
2023-06-11 20:21:53
0次

       最近比较空闲,研究了HTML5.还这真是有很多强大的地方.废话不多说,以下是我写的一个坦克大战的游戏.话了我几天时间,还是未完成版的,(未完成部分主要是敌军坦克如何去绘画,用),如果有思路的可以给个回复,

       虽然代码不是很长,但是逻辑思路还是很强的,绘画顺序都有一定要求(主要逻辑难点就是×××发射和击打障碍物和坦克对障碍物的判断):一下是代码(坦克移动,发射×××,障碍物判断都已完成)

 

  1. "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2.   
  3.   
  4. "Content-Type" content="text/html; charset=UTF-8">  
  5. Insert title here  
  6. "text/css">  
  7.       
  8.     #container{  
  9.         position:absolute;  
  10.         top:10px;  
  11.         left:300px;  
  12.     }  
  13.     #canvas{  
  14.         position:absolute;  
  15.         top:0px;  
  16.         left:px;  
  17.     }  
  18.     #d{  
  19.         height:20px;  
  20.         width:20px;  
  21.         background-color:#F7FCF7;  
  22.         border-style:groove;  
  23.         border-width:15px;  
  24.         border-color:#667560;  
  25.     }  
  26.   
  27. "text/javascript" src="jquery.js">  
  28.   
  29.   
  30.       
  31.     "height:600px;width:600px;background-color:#000000;border-style:solid;" id="container">  
  32.     "canvas" width="600" height="600">  
  33.     
 
  •  
  • "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[i]=new Array(30);  
  •             for(var j=0;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
  •             for(var j=0;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
  •             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
  •                     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
  •                     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
  •                 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
  •                 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
  •                 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
  •                 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;  
  •     }  
  •  
  •  
    •  
     
     
     

     

    上一篇：HTML那些事

    下一篇：12款非常精致的免费 HTML5 & CSS3 网站模板

    相关内容

    热门资讯

    华为公布半导体领域重大突破 5月25日，2026国际电路与系统研讨会在上海举行，华为公司董事、半导体业务部总裁何庭波在题为《半导...
    全焦段4K实况照片+8000m... 一、前言：全能无短板！荣耀600 Pro闪亮登场 现如今的中高端手机市场，可以说是卷得五花八门。大家...
    强烈信号，家长们现在要连夜排队... 北京家长凌晨3点排队，只为孩子能上个中职学校。5月10日这天，是北京昌平职业技术学校自主招生面试日：...
    自主选课+实战赋能，北京地铁公... 5月25日，据北京地铁公司消息，为精准破解员工岗位实训短板、满足个性化成长需求，近期北京地铁公司优化...
    荣耀600 Pro测评：“销量... 荣耀的数字系列是一款典型的“销量大于网上声量”的产品。 在过去这些年，荣耀的数字系列一直都是3000...
    美团、腾讯参投！机器人公司天机... 图片来源：广东天机智能系统有限官网 5月25日，天机机器人公众号发布消息称，广东天机智能系统有限公司...
    伊朗外交部：中国在推动停火谈判... 伊朗外交部发言人巴加埃25日在伊朗首都德黑兰召开的记者会上谈及地区局势时表示，中国在推动地区停火与谈...
    谷歌对“AI投毒”重拳出击 文 | 字母AI 当你某天一觉醒来，发现自己被困在布满屏幕的房间里，每个屏幕中播放的不是你感兴趣的...
    斥资约5亿元！中国前首富钟睒睒... 快科技5月25日消息，当固态电池被视为动力电池的“终极路线”，中国前首富悄悄入局。 近日，农夫山泉创...
    浑南智造闪耀“东北超”开幕式 ... 近日，备受瞩目的“东北超”开幕式震撼启幕。来自浑南区的新松机器人自动化股份有限公司携工业机器人SR2...