HTML5实现坦克大战（一）
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>
HTML5实现坦克大战（一）的更多相关文章
- 《HTML5经典坦克大战》游戏（代码）
前几天粗略地学了HTML5,然后就用它写了一个<经典坦克大战>游戏. 现在想分享一下我写的代码,写得不好请大家多多指教. 给大家推荐一个网站,这个网站是为大学生而做,为方便学习编程的同学而 ...
- html5制作坦克大战
全部html5都采用绘图技术完成.坦克是画出来的.(坦克,子弹,墙,水,草坪) 首先我们画出坦克. 坦克是两边两个矩形,中间一个大矩形,矩形了有一个圆,还有一根线. 画出坦克的思路是以坦克的左上角为参 ...
- HTML5初学---坦克大战基础
让小球动起来,根据键盘的W(上),D(右),S(下),A(左):键的点击移动小球 <!DOCTYPE html> <html> <head> <meta ch ...
- HTML5之坦克大战游戏开发
1.在使用arc方法进行画圆时,在IE9+,FF,Safari,Chrome等已经支持HTML5标准的浏览器中进行渲染时,采用逆时针方向画时,也就是说 arc(x, y, radius, startA ...
- 小强的HTML5移动开发之路（7）——坦克大战游戏1
来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...
- 基于HTML5坦克大战游戏简化版
之前我们有分享过不少经典的HTML5游戏,有些还是很有意思的,比如HTML5版切水果游戏和HTML5中国象棋游戏.今天要分享的是一款简化版的HTML5坦克大战游戏,方向键控制坦克的行进方向,空格键发射 ...
- HTML5坦克大战（韩顺平版本）
HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...
- HTML5坦克大战1
在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...
- HTML5坦克大战
在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...
随机推荐
- 匿名方法和Lambda表达式
匿名方法本质上是一传递给委托的代码块,是使用委托的另一种方法. 规则: 1.匿名方法中不能使用跳转语句跳至次匿名方法的外部,反之亦然:匿名方法外部的跳转语句也不能跳转到匿名方法的内部: 2.在匿名方法 ...
- 浅谈JNDI的使用
原文:http://www.weicoop.com/web/article/52.html 关于什么是JNDI的概念这里不做解释,本文作为初学者根据所了解到内容做些总结,主要内容如下: 1.JNDI使 ...
- Parallelogram Counting（平行四边形个数，思维转化）
1058 - Parallelogram Counting PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit ...
- Qt之再谈窗体阴影
前面就窗口阴影已经写过一篇博客,使用九宫格的思路实现的,在我看来,凡是用程序能实现的尽量不要使用图片代替(在保证效率的前提下),今天再次分享关于我的一些小见解! 先看效果: 窗口阴 ...
- paip.oracle query export to insert sql
paip.oracle query export to insert sql 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:/ ...
- 《think in python》学习-10
think in python 10 列表 和字符串相似,列表是值得序列.在列表中,它可以是任何类型,列表中的值成为元素,有时也称为列表项 s = [10,20,30,40] print s #列表也 ...
- zookeeper_00：zookeeper注意事项
需要将应用数据和协同数据独立开. 比如:网络邮箱服务的用户对自己邮箱中的内容感兴趣,但是并不关心由哪台服务器来处理特定邮箱的请求.在这个例子中,邮箱内容就是应用数据,而从邮箱到某一台邮箱服务器之间的映 ...
- <转>泛型的内部原理：类型擦除以及类型擦除带来的问题
参考:java核心技术 一.Java泛型的实现方法:类型擦除 前面已经说了,Java的泛型是伪泛型.为什么说Java的泛型是伪泛型呢?因为,在编译期间,所有的泛型信息都会被擦除掉.正确理解泛型概念的首 ...
- canvas 绘制五角星
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Android_自定义进度条
转载:http://blog.csdn.net/lmj623565791/article/details/43371299 ,本文出自:[张鸿洋的博客] 1.概述 最近需要用进度条,秉着不重复造轮子的 ...