當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

html5 实现坦克大战,HTML5实现坦克大战（一）

發布時間：2024/9/15 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 html5 实现坦克大战,HTML5实现坦克大战（一）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

方法：MoveUp：坦克上移

MoveDown：坦克下移

MoveRight：坦克右移

MoveLeft：坦克左移

MyTank extends Tank

EnemeyTank extends Tank

Bullet

Tank

字段：x:

DIR

IsLive：判斷子彈是否還存活(包括過界和擊中目標)

方法??? drawBullet():在canvas上畫出子彈

run() 讓子彈飛

8 var EnemeyTankColor = new Array("#61D2F1", "#8A4A6E");

9 var MyTankColor = new Array("green", "blue");

10 var tank = null;

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 };

30 this.MoveDown = function () {

31 this.y += this.speed;

32 this.dir = 2;

33 //DrawTank(this);

34 };

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 }

45 function MyTank(x, y, dir,color) {

46 this.tank = Tank;

47 this.tank(x,y,dir,color);

48 }

50 function EnemeyTank(x,y,dir,color)

51 {

52 this.tank = Tank;

53 this.tank(x, y, dir,color);

54 }

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 }

80 bullet.run = function () {

81 //alert("run");

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 }

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

315

316

317

318

319

320

總結

以上是生活随笔為你收集整理的html5 实现坦克大战,HTML5实现坦克大战（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：大工13秋《专业英语(计算机英语)》在线
下一篇： html+单选+回显,VUE+eleme