zoukankan html css js c++ java

HTML5之坦克大战游戏开发

1.在使用arc方法进行画圆时,在IE9+，FF，Safari，Chrome等已经支持HTML5标准的浏览器中进行渲染时，采用逆时针方向画时，也就是说

arc(x, y, radius, startAngle, endAngle, counterclockwise) 中 counterclockwise值为true时，渲染存在问题。

解决方法：采用顺时针，即counterclockwise值为false

补充说明：在360安全浏览器中两种方法都可以。

2.移动坦克

 1 <!Doctype html>
 2 <html>
 3 <head>
 4    <meta charset='utf-8'/>
 5 </head>
 6 <body onkeydown="moveTank()">
 7     <canvas id='canvas' width='500px' height='500px' style='background-color:black'></canvas>
 8     <script type="text/javascript">
 9         
10         //获取画布
11         var canvas_1 = document.getElementById("canvas");
12 
13        //获取上下文
14        var cxt = canvas_1.getContext("2d");
15 
16        //坦克构造函数  
17        function Tank(x,y,direct)
18        {
19            this.x = x;
20            this.y = y;
21            this.speed = 1;
22            this.direct = direct;
23            this.moveUp = function()
24            {
25                this.y-= this.speed;
26            }
27 
28            this.moveRight = function()
29            {
30                this.x+= this.speed;
31            }
32 
33            this.moveDown = function()
34            {
35                this.y+= this.speed;
36            }
37 
38            this.moveLeft = function()
39            {
40                this.x-= this.speed;
41            }
42        }
43 
44        var tank = new Tank(10,10,0);
45 
46        drawTank(tank);
47 
48        //画坦克
49        function drawTank(tank)
50        {
51             //设置画笔颜色
52            cxt.fillStyle="#DED284";
53 
54            //画坦克左边轮子
55            cxt.fillRect(tank.x,tank.y,5,30);
56 
57            //画坦克右边的轮子
58            cxt.fillRect(tank.x+15,tank.y,5,30);
59 
60            //画坦克主体
61            cxt.fillRect(tank.x+6,tank.y+5,8,20);
62 
63            //画坦克盖子
64            cxt.fillStyle="#FFD972";
65            cxt.arc(tank.x+10,tank.y+15,4,0,360,false);
66            cxt.fill();
67            
68            //画坦克炮筒
69            cxt.strokeStyle="#FFD972";
70            cxt.lineWidth = 2;
71            cxt.beginPath();
72            cxt.moveTo(tank.x+10,tank.y+15);
73            cxt.lineTo(tank.x+10,tank.y);
74            cxt.closePath();
75            cxt.stroke();
76        }
77       
78       //移动坦克
79       function moveTank()
80       {
81           var code = event.keyCode;
82 
83           switch(code)
84           {
85               case 87: tank.moveUp();break;
86               case 68: tank.moveRight();break;
87               case 83: tank.moveDown();break;
88               case 65: tank.moveLeft();break;
89           }
90 
91           //清除画布内容
92           cxt.clearRect(0,0,500,500);
93 
94           drawTank(tank);
95       }
96     </script>
97 </body>
98 </html>

3.根据按键的方向来画坦克(运用OOP思想)

注：先插播一段上、下、左、右按键的js代码

 1             //获取canvas dom对象
 2             var can = document.getElementById("move");
 3 
 4             //获取画笔对象
 5             var cxt = can.getContext("2d");
 6 
 7             var ballX = 30;
 8             var ballY = 30;
 9 
10             drawBall();
11 
12             //画圆
13             function drawBall()
14             {
15                 cxt.beginPath();
16                 cxt.fillStyle = "red";
17                 cxt.arc(ballX,ballY,10,0,360,false);
18                 cxt.closePath();
19 
20                 cxt.fill();
21             }
22 
23             function moveBall()
24             {
25                 var code = event.keyCode;
26                 switch(code)
27                 {
28                     case 87: ballY--;break;
29                     case 83: ballY++;break;
30                     case 65: ballX--;break;
31                     case 68: ballX++;break;
32                 }
33 
34                 //每次重画之前要清除画布
35                 cxt.clearRect(0,0,400,300);
36 
37                 drawBall();
38             }

在drawTank方法中通过语法switch case 来根据按键方向画tank.关键是要找准参考点

 1  function drawTank(tank)
 2  {
 3      switch(tank.direct)
 4     {
 5            //向上 
 6             case 0:
 7            //向下 
 8             case 2:
 9                //添加画tank代码
10                //cxt
11             break;
12             
13            //向右
14             case 1:
15            //向左
16             case 3:
17             break;
18     }
19 }

第一阶段学习汇报，哈哈，my tank moves freely

 1 <!Doctype html>
 2 <html>
 3 <head>
 4    <meta charset='utf-8'/>
 5    <script type="text/javascript" src="tank.js"></script>
 6    <script type="text/javascript" src="move.js"></script>
 7 </head>
 8 <body onkeydown="moveTank()" onload="initTank()">
 9     <canvas id='canvas' width='500px' height='500px' style='background-color:black'></canvas>
10 </body>
11 </html>

 1 //坦克构造函数  
 2 function Tank(x,y,direct)
 3 {
 4     this.x = x;
 5     this.y = y;
 6     this.speed = 1;
 7     this.direct = direct;
 8     this.moveUp = function()
 9     {
10         this.y-= this.speed;
11         this.direct = 0;
12     }
13 
14     this.moveRight = function()
15     {
16         this.x+= this.speed;
17         this.direct = 1;
18     }
19 
20     this.moveDown = function()
21     {
22         this.y+= this.speed;
23         this.direct = 2;
24     }
25 
26     this.moveLeft = function()
27     {
28         this.x-= this.speed;
29         this.direct = 3;
30     }
31 }

  1   var tank;
  2   var canvas_1; 
  3   var cxt;
  4   
  5  function initTank()
  6  {
  7      //获取画布
  8      canvas_1 = document.getElementById("canvas");
  9 
 10      //获取上下文
 11      cxt = canvas_1.getContext("2d");
 12 
 13      tank = new Tank(10,10,0);
 14 
 15      drawTank(tank);
 16  }
 17  
 18  //画坦克
 19 function drawTank(tank)
 20 {
 21     switch(tank.direct)
 22     {
 23         //向上和向下
 24         case 0:
 25         case 2:
 26             //设置画笔颜色
 27             cxt.fillStyle="#DED284";
 28 
 29             //画坦克左边轮子
 30             cxt.fillRect(tank.x,tank.y,5,30);
 31 
 32             //画坦克右边的轮子
 33             cxt.fillRect(tank.x+15,tank.y,5,30);
 34 
 35             //画坦克主体
 36             cxt.fillRect(tank.x+6,tank.y+5,8,20);
 37 
 38             //画坦克盖子
 39             cxt.fillStyle="#FFD972";
 40             cxt.arc(tank.x+10,tank.y+15,4,0,360,false);
 41             cxt.fill();
 42                    
 43             //画坦克炮筒
 44             cxt.strokeStyle="#FFD972";
 45             cxt.lineWidth = 2;
 46             cxt.beginPath();
 47             cxt.moveTo(tank.x+10,tank.y+15);
 48                    
 49             //上和下主要就是tank的炮筒的方向的改变
 50             if(0 == tank.direct)
 51             {
 52                 cxt.lineTo(tank.x+10,tank.y);
 53             }
 54             else if(2 == tank.direct)
 55             {
 56                 cxt.lineTo(tank.x+10,tank.y+30);
 57             }
 58             cxt.closePath();
 59             cxt.stroke();
 60             break;
 61                    
 62             //向左和向右
 63             case 1:
 64             case 3:
 65                 cxt.fillStyle="#DED284";
 66                 cxt.fillRect(tank.x,tank.y,30,5);
 67                 cxt.fillRect(tank.x,tank.y+15,30,5);
 68                 cxt.fillRect(tank.x+5,tank.y+6,20,8);
 69 
 70                 cxt.fillStyle="#FFD972";
 71                 cxt.arc(tank.x+15,tank.y+10,4,0,360,false);
 72                 cxt.fill();
 73                    
 74                 cxt.strokeStyle="#FFD972";
 75                 cxt.lineWidth = 2;
 76                 cxt.beginPath();
 77                 cxt.moveTo(tank.x+15,tank.y+10);
 78                    
 79                 if(1 == tank.direct)
 80                 {
 81                    cxt.lineTo(tank.x+30,tank.y+10);
 82                 }
 83                 else if(3 == tank.direct)
 84                 {
 85                    cxt.lineTo(tank.x,tank.y+10);
 86                 }
 87                 cxt.closePath();
 88                 cxt.stroke();
 89                 break;
 90            }
 91            
 92        }
 93       
 94 //移动坦克
 95 function moveTank()
 96 {
 97     var code = event.keyCode;
 98 
 99     switch(code)
100     {
101         case 87: tank.moveUp();break;
102         case 68: tank.moveRight();break;
103         case 83: tank.moveDown();break;
104         case 65: tank.moveLeft();break;
105     }
106 
107     //清除画布内容
108     cxt.clearRect(0,0,500,500);
109 
110     drawTank(tank);
111 }

查看全文

相关阅读:
大数据分析谨慎对待
 大数据时代下，市场研究何去何从
 大数据时代下，市场研究何去何从
 浅谈数据挖掘与数据分析？
浅谈数据挖掘与数据分析？
大数据的七种商业化模式
 大数据的七种商业化模式
 栈的应用---编译器左右符号的语法匹配
 Python 对Twitter tweet的元素 (Word, Screen Name, Hash Tag)的频率分析
 东华软件笔试

原文地址：https://www.cnblogs.com/yiliweichinasoft/p/3506337.html