HTML5坦克大戰

原創 cuisj520 2018-09-12 04:52

       最近比較空閒,研究了HTML5.還這真是有很多強大的地方.廢話不多說,以下是我寫的一個坦克大戰的遊戲.話了我幾天時間,還是未完成版的,(未完成部分主要是敵軍坦克如何去繪畫,用<canvas>),如果有思路的可以給個回覆,

       雖然代碼不是很長,但是邏輯思路還是很強的,繪畫順序都有一定要求(主要邏輯難點就是子彈發射和擊打障礙物和坦克對障礙物的判斷):一下是代碼(坦克移動,發射子彈,障礙物判斷都已完成)

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>Insert title here</title>  
  6. <style type="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. </style>  
  27. <script type="text/javascript" src="jquery.js"></script>  
  28. </head>  
  29. <body>  
  30.       
  31.     <div style="height:600px;width:600px;background-color:#000000;border-style:solid;" id="container">  
  32.     <canvas id="canvas" width="600" height="600">  
  33.     </div>  
  34. </body>  
  35. <script type="text/javascript">  
  36.     var ctx;  
  37.     var x;  
  38.     var y;  
  39.     var screenHeight;  
  40.     var screenWidth;  
  41.     var woodImg=new Image();  
  42.     var hardImg=new Image();  
  43.     var grassImg=new Image();  
  44.     var myTankImg=new Image();  
  45.     var eagleImg=new Image();  
  46.     var TankData={speed:10,direction:"up"};  
  47.     var time=8;  
  48.       
  49.     //坦克  
  50.     var GameObject=function(){this.x=0;this.y=0;this.image=null;};  
  51.     var Tank=function(){};Tank.prototype=new GameObject();  
  52.     var myTank=new Tank();  
  53.       
  54.     //子彈  
  55.     var bulletFun=function(){  
  56.         this.x=0;  
  57.         this.y=0;  
  58.         this.direction="";  
  59.         this.speed=2;  
  60.         this.strong=1;  
  61.     }   
  62.     var bulletArr=new Array(0);  
  63.       
  64.     $(window).ready(function(){  
  65.         ctx=document.getElementById("canvas").getContext("2d");  
  66.         screenWidth=parseInt($("#canvas").attr("width"));  
  67.         screenHeight=parseInt($("#canvas").attr("height"));  
  68.           
  69.         keyDownEven();  
  70.         mouseClick();  
  71.         LoadData();  
  72.         GameStart();  
  73.     });  
  74.       
  75.     //初始化相關數據  
  76.     var LoadData=function(){  
  77.         myTank.x=200;  
  78.         myTank.y=560;  
  79.         mapArrayVal();  
  80.           
  81.     }  
  82.     //遊戲開始加載所有圖形  
  83.     var GameStart=function(){  
  84.         ctx.clearRect(0,0,screenWidth,screenHeight);  
  85.         ctx.save();  
  86.         loadImg();  
  87.         drawMap();  
  88.         drawMyTank();  
  89.         ctx.restore();  
  90.     }  
  91.       
  92.     //加載圖片  
  93.     var loadImg=function(){  
  94.         woodImg.src="images/wood.jpg";  
  95.         hardImg.src="images/hard.jpg";  
  96.         grassImg.src="images/grass.jpg";  
  97.         myTankImg.src="images/tank.png";  
  98.         eagleImg.src="images/eagle.jpg";  
  99.           
  100.         myTank.image=myTankImg;  
  101.     }  
  102.     //地圖用二維數組表示,0表示空,1表示紅磚,2表示鐵磚,3表示草皮,4未定(暫用草皮)  
  103.     var mapArray=new Array(30);  
  104.     var mapArrayVal=function(){  
  105.         for(var i=0;i<mapArray.length;i++){  
  106.             mapArray[i]=new Array(30);  
  107.             for(var j=0;j<mapArray[i].length;j++){  
  108.                 mapArray[i][j]=parseInt(10*Math.random());  
  109.             }  
  110.         }  
  111.         //地圖有些地方時不能有紅磚,草皮等東西的  
  112.         mapArray[0][0]=0;mapArray[1][0]=0;mapArray[13][0]=0;mapArray[14][0]=0;mapArray[28][0]=0;mapArray[29][0]=0;  
  113.         mapArray[0][1]=0;mapArray[1][1]=0;mapArray[13][1]=0;mapArray[14][1]=0;mapArray[28][1]=0;mapArray[29][1]=0;  
  114.         mapArray[12][27]=1;mapArray[13][27]=1;mapArray[14][27]=1;mapArray[15][27]=1;mapArray[16][27]=1;mapArray[17][27]=1;  
  115.         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;  
  116.         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;  
  117.           
  118.     }  
  119.     //繪製地圖  
  120.     var drawMap=function(){  
  121.         for(var i=0;i<mapArray.length;i++){  
  122.             for(var j=0;j<mapArray[i].length;j++){  
  123.                 x=i*20;  
  124.                 y=j*20;  
  125.                 if(mapArray[i][j]==1){  
  126.                     ctx.drawImage(woodImg,x,y);  
  127.                 }else if(mapArray[i][j]==2){  
  128.                     ctx.drawImage(hardImg,x,y);  
  129.                 }else if(mapArray[i][j]==3){  
  130.                     ctx.drawImage(grassImg,x,y);  
  131.                 }  
  132.             }  
  133.         }  
  134.         ctx.drawImage(eagleImg,280,560);  
  135.     };  
  136.     //繪製我的坦克  
  137.     var drawMyTank=function(){  
  138.         ctx.translate(myTank.x+myTank.image.width/2,myTank.y+myTank.image.height/2);  
  139.         ctx.rotate(turnToAngle(TankData.direction) * Math.PI/180);  
  140.         ctx.drawImage(myTank.image,-myTank.image.width/2,-myTank.image.height/2);  
  141.     }  
  142.     //繪製子彈  
  143.     var drawBullet=function(x,y,direction){  
  144.         ctx.fillStyle="#339900";  
  145.         ctx.beginPath();  
  146.         ctx.arc(x,y,4,0,Math.PI*2,true);  
  147.         ctx.closePath();  
  148.         ctx.fill();  
  149.     }  
  150.     /*  
  151.     *以下是相關事件  
  152.     */ 
  153.     //按鍵事件坦克移動轉向   
  154.     var keyDownEven=function(){  
  155.         $("html").keydown(function(e){  
  156.             var key=e.which;  
  157.             if(key==37)key="left";  
  158.             else if(key==38)key="up";  
  159.             else if(key==39)key="right";  
  160.             else if(key==40)key="down";  
  161.             else key="no";  
  162.             turnDirection(key,e);  
  163.         })  
  164.     }  
  165.     //坦克轉向移動以及邊界檢測  
  166.     var turnDirection=function(key,e){  
  167.         if(key!="no"){  
  168.             e.preventDefault();  
  169.             //物體邊界檢測  
  170.             if(checkObject(key)==true){  
  171.                 //邊界檢測  
  172.                 if(key=="left"){  
  173.                     myTank.x=myTank.x<=0?0:myTank.x-TankData.speed;  
  174.                 }else if(key=="up"){  
  175.                     myTank.y=myTank.y<=0?0:myTank.y-TankData.speed;  
  176.                 }else if(key=="right"){  
  177.                     myTank.x=myTank.x>=screenWidth-myTank.image.width?myTank.x:myTank.x+TankData.speed;  
  178.                 }else if(key=="down"){  
  179.                     myTank.y=myTank.y>=screenHeight-myTank.image.height?myTank.y:myTank.y+TankData.speed;  
  180.                 }  
  181.             }  
  182.             ctx.clearRect(0, 0, screenWidth, screenHeight);  
  183.             ctx.save();  
  184.             drawMap();  
  185.             TankData.direction=key;  
  186.             drawMyTank();  
  187.             ctx.restore();  
  188.         }  
  189.     }//將方向轉成角度  
  190.     var turnToAngle=function(direction){  
  191.         if(direction=="right") return 90;  
  192.         if(direction=="down")return 180;  
  193.         if(direction=="left")return 270;  
  194.         if(direction=="up")return 360;  
  195.     }  
  196.     //鼠標點擊事件(發射子彈)  
  197.     var result;  
  198.     var mouseClick=function(){  
  199.         $("html").mousedown(function(){  
  200.             clearInterval(result);  
  201.             createBullet(myTank.x+myTank.image.width/2,myTank.y+myTank.image.height/2,TankData.direction);  
  202.             result=setInterval(drawBulletLoop,time);  
  203.         })  
  204.     };  
  205.     //射擊,創建子彈  
  206.     var createBullet=function(_x,_y,_d){  
  207.         var bullet=new bulletFun();  
  208.         bullet.x=_x;  
  209.         bullet.y=_y;  
  210.         bullet.direction=_d;  
  211.         bulletArr.push(bullet);  
  212.     };  
  213.     //循環繪畫子彈  
  214.     var drawBulletLoop=function(){  
  215.         ctx.clearRect(0, 0, screenWidth, screenHeight);  
  216.         ctx.save();  
  217.         drawMap();  
  218.         var obj_x;  
  219.         var obj_y;   
  220.         for(var i=0;i<bulletArr.length;i++){  
  221.             drawBullet(bulletArr[i].x,bulletArr[i].y,bulletArr[i].direction);  
  222.             if(bulletArr[i].direction=="left"){  
  223.                 obj_x=parseInt(bulletArr[i].x/20)-1<0?0:parseInt(bulletArr[i].x/20)-1;  
  224.                 obj_y=parseInt(bulletArr[i].y/20);  
  225.                 bulletArr[i].x-=bulletArr[i].speed;  
  226.                 if(bulletArr[i].x>0){  
  227.                     if(obj_x*20+20>=bulletArr[i].x){  
  228.                         if(bulletArr[i].y%20==0){  
  229.                             if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
  230.                                 mapArray[obj_x][obj_y]=0;  
  231.                                 bulletArr.splice(i,1);  
  232.                             }  
  233.                             if(mapArray[obj_x][obj_y-1]==1||mapArray[obj_x][obj_y-1]==2){  
  234.                                 mapArray[obj_x][obj_y-1]=0;  
  235.                                 bulletArr.splice(i,1);  
  236.                             }  
  237.                         }else{  
  238.                             if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
  239.                                 mapArray[obj_x][obj_y]=0;  
  240.                                 bulletArr.splice(i,1);  
  241.                             }  
  242.                         }  
  243.                     }  
  244.                 }else if(bulletArr[i].x<=0){  
  245.                     bulletArr.splice(i,1);  
  246.                 }  
  247.             }else if(bulletArr[i].direction=="up"){  
  248.                 obj_x=parseInt(bulletArr[i].x/20);  
  249.                 obj_y=parseInt(bulletArr[i].y/20)-1<0?0:parseInt(bulletArr[i].y/20)-1;  
  250.                 bulletArr[i].y-=bulletArr[i].speed;  
  251.                 if(bulletArr[i].y>0){  
  252.                     if(obj_y*20+20>=bulletArr[i].y){  
  253.                         if(bulletArr[i].x%20==0){  
  254.                             if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
  255.                                 mapArray[obj_x][obj_y]=0;  
  256.                                 bulletArr.splice(i,1);  
  257.                             }  
  258.                             if(mapArray[obj_x-1][obj_y]==1||mapArray[obj_x-1][obj_y]==2){  
  259.                                 mapArray[obj_x-1][obj_y]=0;  
  260.                                 bulletArr.splice(i,1);  
  261.                             }  
  262.                         }else{  
  263.                             if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
  264.                                 mapArray[obj_x][obj_y]=0;  
  265.                                 bulletArr.splice(i,1);  
  266.                             }  
  267.                         }  
  268.                     }  
  269.                 }else if(bulletArr[i].y<=0){  
  270.                     bulletArr.splice(i,1);  
  271.                 }  
  272.             }else if(bulletArr[i].direction=="right"){  
  273.                 obj_x=parseInt(bulletArr[i].x/20)>29?29:parseInt(bulletArr[i].x/20);  
  274.                 obj_y=parseInt(bulletArr[i].y/20);  
  275.                 bulletArr[i].x+=bulletArr[i].speed;  
  276.                 if(bulletArr[i].x<screenWidth){  
  277.                     if(obj_x*20<=bulletArr[i].x){  
  278.                         if(bulletArr[i].y%20==0){  
  279.                             if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
  280.                                 mapArray[obj_x][obj_y]=0;  
  281.                                 bulletArr.splice(i,1);  
  282.                             }  
  283.                             if(mapArray[obj_x][obj_y-1]==1||mapArray[obj_x][obj_y-1]==2){  
  284.                                 mapArray[obj_x][obj_y-1]=0;  
  285.                                 bulletArr.splice(i,1);  
  286.                             }  
  287.                         }else{  
  288.                             if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
  289.                                 mapArray[obj_x][obj_y]=0;  
  290.                                 bulletArr.splice(i,1);  
  291.                             }  
  292.                         }  
  293.                     }  
  294.                 }else if(bulletArr[i].x>=screenWidth){  
  295.                     bulletArr.splice(i,1);  
  296.                 }  
  297.             }else if(bulletArr[i].direction=="down"){  
  298.                 obj_x=parseInt(bulletArr[i].x/20);  
  299.                 obj_y=parseInt(bulletArr[i].y/20)<0?0:parseInt(bulletArr[i].y/20);  
  300.                 bulletArr[i].y+=bulletArr[i].speed;  
  301.                 if(bulletArr[i].y<screenHeight){  
  302.                     if(obj_y*20<=bulletArr[i].y){  
  303.                         if(bulletArr[i].x%20==0){  
  304.                             if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
  305.                                 mapArray[obj_x][obj_y]=0;  
  306.                                 bulletArr.splice(i,1);  
  307.                             }  
  308.                             if(mapArray[obj_x-1][obj_y]==1||mapArray[obj_x-1][obj_y]==2){  
  309.                                 mapArray[obj_x-1][obj_y]=0;  
  310.                                 bulletArr.splice(i,1);  
  311.                             }  
  312.                         }else{  
  313.                             if(mapArray[obj_x][obj_y]==1||mapArray[obj_x][obj_y]==2){  
  314.                                 mapArray[obj_x][obj_y]=0;  
  315.                                 bulletArr.splice(i,1);  
  316.                             }  
  317.                         }  
  318.                     }  
  319.                 }else if(bulletArr[i].x>=screenHeight){  
  320.                     bulletArr.splice(i,1);  
  321.                 }  
  322.             }  
  323.         }  
  324.         drawMyTank();  
  325.         ctx.restore();  
  326.     }  
  327.     //坦克和物體邊界的檢測  
  328.     var checkObject=function(direction){  
  329.         var object_x;  
  330.         var object_y;  
  331.         var loop;  
  332.         if(direction=="left"){  
  333.             object_x=myTank.x%20==0?myTank.x-20:myTank.x-30;  
  334.             if(object_x<0)object_x=0;  
  335.             if(myTank.y%20==0){  
  336.                 object_y=myTank.y;  
  337.                 loop=2;  
  338.             }else{  
  339.                 object_y=myTank.y-myTank.y%20;  
  340.                 loop=3;  
  341.             }  
  342.             for(var i=0;i<loop;i++){  
  343.                 if((mapArray[object_x/20][object_y/20+i]==1||mapArray[object_x/20][object_y/20+i]==2)&&(object_x+20)>=myTank.x){      
  344.                     return false;  
  345.                 }  
  346.             }  
  347.         }else if(direction=="up"){  
  348.             object_y=myTank.y%20==0?myTank.y-20:myTank.y-30;  
  349.             if(myTank.x%20==0){  
  350.                 object_x=myTank.x;  
  351.                 loop=2;  
  352.             }else{  
  353.                 object_x=myTank.x-myTank.x%20;  
  354.                 loop=3;  
  355.             }  
  356.             for(var i=0;i<loop;i++){  
  357.                 if((mapArray[object_x/20+i][object_y/20]==1||mapArray[object_x/20+i][object_y/20]==2)&&(object_y+20)>=myTank.y){  
  358.                     return false;  
  359.                 }  
  360.             }  
  361.         }else if(direction=="right"){  
  362.             object_x=myTank.x%20==0?myTank.x+myTank.image.width:myTank.x+myTank.image.width+10;  
  363.             if(object_x>=600)object_x=580;  
  364.             if(myTank.y%20==0){  
  365.                 object_y=myTank.y;  
  366.                 loop=2;  
  367.             }else{  
  368.                 object_y=myTank.y-myTank.y%20;  
  369.                 loop=3;  
  370.             }  
  371.             for(var i=0;i<loop;i++){  
  372.                 if((mapArray[object_x/20][object_y/20+i]==1||mapArray[object_x/20][object_y/20+i]==2)&&object_x<=(myTank.x+myTank.image.width)){  
  373.                     return false;  
  374.                 }  
  375.             }  
  376.         }else if(direction=="down"){  
  377.             object_y=myTank.y%20==0?myTank.y+40:myTank.y+50;  
  378.             if(myTank.x%20==0){  
  379.                 object_x=myTank.x;  
  380.                 loop=2;  
  381.             }else{  
  382.                 object_x=myTank.x-myTank.x%20;  
  383.                 loop=3;  
  384.             }  
  385.             for(var i=0;i<loop;i++){  
  386.                 if((mapArray[object_x/20+i][object_y/20]==1||mapArray[object_x/20+i][object_y/20]==2)&&(object_y)<=(myTank.y+myTank.image.width)){  
  387.                     return false;  
  388.                 }  
  389.             }  
  390.         }  
  391.         return true;  
  392.     }  
  393. </script>  
  394. </html> 
 
 
 
 

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML5 如何實現拖放'N'拖放

3487690675 2019-02-23 00:40:06

HTML 5的10個頂級資源

曹洪偉 2019-02-23 00:26:49

HTML5容易被遺忘的點

yufenghang 2019-02-23 00:05:20

音頻和視頻

juliaym 2019-02-23 00:01:20

表單元素

juliaym 2019-02-23 00:01:19

HTML5 Web app開發工具Kendo UI Web教程：如何配置Kendo UI Calendar

mikez1026 2019-02-22 23:49:26

HTML <!DOCTYPE> 標籤

ilovefeifei999 2019-02-22 23:45:42

JavaScript強化教程——JavaScript 運算符

zhanyingwang 2019-02-22 23:39:05

推薦六款炫酷的HTML5效果插件

tower1229 2019-02-22 23:38:41

HTML5 如何實現拖放'N'拖放

Whitezz 2019-02-22 23:36:48

編寫第一個HTML5文件

大咖M 2019-02-22 23:19:16

pdf.js實現在HTML下直接瀏覽pdf文檔，無需插件即可實現

rob_rookie 2019-02-22 23:16:01

HTML5 History對象，Javascript修改地址欄而不刷新頁面

志強1224 2019-02-22 23:08:01

貪吃蛇遊戲

wq2010feng 2019-02-22 22:26:46

HTML5: element.classList API實例：簡易樣式控切換按鈕

wsd183 2019-02-22 22:04:52