Tank
字段 x:坦克的中心点的横坐标
y:坦克的中心点的纵坐标
dir：坦克的前进的方向
spped：坦克的速度
color：坦克的颜色，用于区分种类不同的坦克
bullet：坦克的子弹 为array类型
方法：MoveUp：坦克上移
MoveDown：坦克下移
MoveRight：坦克右移
MoveLeft：坦克左移
MyTank extends Tank
EnemeyTank extends Tank
Bullet
Tank
字段：x:
y:
DIR
IsLive：判断子弹是否还存活（包括过界和击中目标）
方法 drawBullet():在canvas上画出子弹
run() 让子弹飞
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5 <script src="../JS/jquery-1.11.2.js"></script>
6 <title></title>
7 <script type="text/javascript">
8 var EnemeyTankColor = new Array("#61D2F1", "#8A4A6E");
9 var MyTankColor = new Array("green", "blue");
10 var tank = null;
11
12
13 function Tank(x,y,dir,color){
14 this.x = x;
15 this.y = y;
16 this.dir = dir; //0代表向上 1代表向右 2代表向下 3代表向左
17 this.speed = 1;
18 this.color = color;
19 this.MoveUp = function () {
20 this.y -= this.speed;
21 this.dir = 0;
22 //DrawTank(this);
23 };
24 this.MoveRight = function () {
25 this.x += this.speed;
26 this.dir = 1;
27 //DrawTank(this);
28 };
29
30 this.MoveDown = function () {
31 this.y += this.speed;
32 this.dir = 2;
33 //DrawTank(this);
34 };
35
36 this.MoveLeft = function () {
37 this.x -= this.speed;
38 this.dir = 3;
39 //DrawTank(this);
40 };
41 //alert(this.dir);
42 this.bullet = new Array(new Bullet(this.x, this.y, this.dir));
43 }
44
45 function MyTank(x, y, dir,color) {
46 this.tank = Tank;
47 this.tank(x,y,dir,color);
48 }
49
50 function EnemeyTank(x,y,dir,color)
51 {
52 this.tank = Tank;
53 this.tank(x, y, dir,color);
54 }
55
56 function Bullet(x,y,dir)
57 {
58 var bullet = new Object;
59 bullet.x = x;
60 bullet.y = y;
61 bullet.dir = dir;
62 bullet.isLive = true;
63 bullet.timer = null;
64 bullet.drawBullet = function () {
65 if (bullet.isLive == true)
66 {
67 var canvas = document.getElementById("cantank");
68 var ctx = canvas.getContext("2d");
69 ctx.fillStyle = "red";
70 //ctx.clearRect(bullet.x,bullet.y,3,3);
71 switch (bullet.dir) {
72 case 0: ctx.fillRect(bullet.x, bullet.y - 35, 3, 3); break;
73 case 1: ctx.fillRect(bullet.x + 35, bullet.y, 3, 3); break;
74 case 2: ctx.fillRect(bullet.x, bullet.y + 35, 3, 3); break;
75 case 3: ctx.fillRect(bullet.x - 35, bullet.y, 3, 3); break;
76 }
77 }
78 }
79
80 bullet.run = function () {
81 //alert("run");
82
83
84 if (bullet.x < 35 || bullet.x > 600 || bullet.y < 35 || bullet.y > 600)
85 {
86 //clearInterval(bullet.timer);
87 //bullet.x = tank.x;
88 //bullet.y = tank.y;
89 //bullet.dir = tank.dir;
90 bullet.isLive = false;
91 } else {
92 switch (bullet.dir) {
93 case 0: bullet.y=bullet.y-2; break;
94 case 1: bullet.x=bullet.x+2; break;
95 case 2: bullet.y=bullet.y+2; break;
96 case 3: bullet.x=bullet.x-2; break;
97 }
98 }
99
100 $("#span1").html("x="+bullet.x+" "+"y="+bullet.y);
101 }
102 return bullet;
103 }
104
105 //画出坦克对象
106 function DrawTank(tank) {
107 var canTank = document.getElementById("cantank");
108 var ctx = canTank.getContext("2d");
109 var dir = tank.dir;
110 switch(dir){
111 case 0:
112 case 2:
113
114 //画出坦克的左边的*
115 ctx.fillStyle = tank.color[0];
116 ctx.fillRect(tank.x-25, tank.y-25, 10, 50);
117
118 //画出坦克的中间的机箱
119 ctx.fillRect(tank.x -15, tank.y - 15, 30, 30);
120
121 //画出坦克的右边的*
122 ctx.fillRect(tank.x + 15, tank.y-25, 10, 50);
123 ctx.fillStyle = tank.color[1];
124
125 //画出坦克的盖子
126 ctx.beginPath();
127 ctx.arc(tank.x, tank.y, 15, 0, 360, false);
128 ctx.closePath();
129 ctx.fill();
130 ctx.closePath();
131
132 //画出坦克的炮筒
133 ctx.beginPath();
134 ctx.moveTo(tank.x, tank.y);
135 if (tank.dir == 0)
136 {
137 ctx.lineTo(tank.x, tank.y-30);
138 }
139 else if (tank.dir == 2)
140 {
141 ctx.lineTo(tank.x,tank.y+30);
142 }
143 ctx.closePath();
144 ctx.lineWidth = "2";
145 ctx.strokeStyle = "yellow";
146 ctx.stroke();
147 break;
148 case 1:
149 case 3:
150 //画出坦克的上边的*
151 ctx.fillStyle = tank.color[0];
152 ctx.fillRect(tank.x-25, tank.y-25, 50, 10);
153
154 //画出坦克的中间的机箱
155 ctx.fillRect(tank.x -15, tank.y - 15, 30, 30);
156
157 //画出坦克的下边的*
158 ctx.fillRect(tank.x - 25, tank.y+15, 50, 10);
159 ctx.fillStyle = tank.color[1];
160
161 //画出坦克的盖子
162 ctx.beginPath();
163 ctx.arc(tank.x, tank.y, 15, 0, 360, false);
164 ctx.closePath();
165 ctx.fill();
166 ctx.closePath();
167
168 //画出坦克的炮筒
169 ctx.beginPath();
170 ctx.moveTo(tank.x, tank.y);
171 if (tank.dir == 1) {
172 ctx.lineTo(tank.x + 30, tank.y );
173 }
174 else if (tank.dir == 3) {
175 ctx.lineTo(tank.x -30, tank.y );
176 }
177 ctx.closePath();
178 ctx.lineWidth = "2";
179 ctx.strokeStyle = "yellow";
180 ctx.stroke();
181 break;
182 }
183
184 };
185
186 //刷新坦克和子弹的位置
187 function Refresh(mytank, enemeytanks) {
188 DrawTank(mytank);
189 //if (mytank.bullet.isLive == true)
190 //{
191 // mytank.bullet.drawBullet();
192 //}
193
194 for (var i = 0; i < mytank.bullet.length; i++)
195 {
196 mytank.bullet[i].drawBullet();
197 }
198 for(var i=0;i<3;i++)
199 {
200 DrawTank(enemeytanks[i]);
201
202 //for (var i = 0; i < enemeytanks[i].bullet.length; i++) {
203 // enemeytanks[i].bullet[i].drawBullet();
204 //}
205 }
206 }
207
208 //画出静态的坦克
209 //注意要使用相对位置，即相对坦克的左上角的位置的变化，这样之后才能使坦克动起来
210 $(function () {
211
212 //先得到canvas对象和画笔对象
213 var canvas = document.getElementById("cantank");
214 var ctx = canvas.getContext("2d");
215
216 //新建自己的坦克
217 var X = 30;
218 var Y = 30;
219 tank = new MyTank(500,500,0,MyTankColor);
220 //新建敌人的坦克
221 var EnemeyTanks = new Array();
222 for (var i = 0; i < 3; i++)
223 {
224 var enemeyTank = new EnemeyTank((i + 1) * 80, 80, 2, EnemeyTankColor);
225 EnemeyTanks[i] = enemeyTank;
226 }
227 //当页面加载完成的时候先画出坦克
228 Refresh(tank, EnemeyTanks);
229
230 $("body").keydown(function (event) {
231 var key = event.keyCode;
232 switch (key) {
233 case 87: tank.MoveUp(); break;
234 case 68: tank.MoveRight(); break;
235 case 83: tank.MoveDown();break;
236 case 65: tank.MoveLeft(); break;
237 }
238
239 ctx.clearRect(0, 0, 600, 600);
240
241 Refresh(tank, EnemeyTanks);
242 });
243
244
245 //for (var i = 0; i < EnemeyTanks.length; i++)
246 //{
247 // //定时产生新的子弹
248 // setInterval(function () {
249 // EnemeyTanks[i].bullet[EnemeyTanks[i].bullet.length] = new Bullet(EnemeyTanks[i].x, EnemeyTanks[i].y, EnemeyTanks[i].dir);
250 // Refresh(tank, EnemeyTanks);
251 // }, 500);
252
253 // //定时改变子弹的位置
254 // setInterval(function () {
255 // for (var i = 0; i < EnemeyTanks[i].bullet.length; i++) {
256 // EnemeyTanks[i].bullet[i].run();
257 // ctx.clearRect(0, 0, 600, 600);
258 // Refresh(tank, EnemeyTanks);
259 // }
260 // }, 10);
261 //}
262
263
264 //定时产生新的子弹
265 setInterval(function () {
266 EnemeyTanks[0].bullet[EnemeyTanks[0].bullet.length] = new Bullet(EnemeyTanks[0].x, EnemeyTanks[0].y, EnemeyTanks[0].dir);
267 Refresh(tank, EnemeyTanks);
268 }, 500);
269
270 //定时改变子弹的位置
271 setInterval(function () {
272 for (var i = 0; i < EnemeyTanks[i].bullet.length; i++) {
273 EnemeyTanks[0].bullet[i].run();
274 ctx.clearRect(0, 0, 600, 600);
275 Refresh(tank, EnemeyTanks);
276 }
277 }, 10);
278
279
280
281
282
283 //定时产生新的子弹
284 setInterval(function () {
285 tank.bullet[tank.bullet.length] = new Bullet(tank.x, tank.y, tank.dir);
286 Refresh(tank, EnemeyTanks);
287 }, 500);
288
289 //定时改变子弹的位置
290 setInterval(function () {
291 for (var i = 0; i < tank.bullet.length; i++)
292 {
293 tank.bullet[i].run();
294 ctx.clearRect(0, 0, 600, 600);
295 Refresh(tank, EnemeyTanks);
296 }
297 }, 10);
298
299
300
301 //for (var i = 0; i < tank.bullet.length; i++)
302 //{
303 // setInterval(function () {
304 // tank.bullet[0].run();
305 // ctx.clearRect(0, 0, 600, 600);
306 // Refresh(tank, EnemeyTanks);
307 // }, 50);
308 //}
309
310
311
312 //setInterval(tank.bullet.drawBullet, 100);
313 });
314 </script>
315 </head>
316 <body>
317 <canvas id="cantank" width="600" height="600" style="background-color:black"></canvas>
318 <span id="span1"></span>
319 </body>
320 </html>