Skip to content

Commit c6ab509

Browse files
CommandstoneCommandstone
authored
Update tk2.html
1 parent c2b19e6 commit c6ab509

File tree

1 file changed

+84
-57
lines changed

1 file changed

+84
-57
lines changed

‎game/tk2.html‎

Lines changed: 84 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
margin: 0;
99
overflow: hidden;
1010
background-color: #333;
11+
font-family: Arial, sans-serif;
1112
}
1213
#gameCanvas {
1314
display: block;
@@ -22,20 +23,22 @@
2223
border: 2px solid white;
2324
background-color: rgba(0, 0, 0, 0.5);
2425
}
25-
#lives {
26+
#gameInfo {
2627
position: absolute;
2728
top: 170px;
2829
left: 10px;
2930
color: white;
30-
font-family: Arial;
3131
font-size: 16px;
3232
}
3333
</style>
3434
</head>
3535
<body>
3636
<canvas id="gameCanvas"></canvas>
3737
<canvas id="miniMap"></canvas>
38-
<div id="lives">Lives: 3</div>
38+
<div id="gameInfo">
39+
<div id="lives">Lives: 3</div>
40+
<div id="score">Score: 0</div>
41+
</div>
3942

4043
<script>
4144
// 游戏主画布
@@ -51,7 +54,9 @@
5154
// 游戏状态
5255
let gameRunning = true;
5356
let playerLives = 3;
57+
let score = 0;
5458
const livesDisplay = document.getElementById('lives');
59+
const scoreDisplay = document.getElementById('score');
5560

5661
// 玩家坦克
5762
const playerTank = {
@@ -61,14 +66,14 @@
6166
height: 30,
6267
color: 'blue',
6368
speed: 3,
64-
direction: 0, // 0: up, 1: right, 2: down, 3: left
69+
direction: 0,
6570
bullets: [],
6671
lastShot: 0,
6772
shootDelay: 500,
6873
isPlayer: true
6974
};
7075

71-
// 我方AI坦克
76+
// 我方AI坦克（修复了显示问题）
7277
const allyTank = {
7378
x: 200,
7479
y: 200,
@@ -83,11 +88,12 @@
8388
isPlayer: false,
8489
isAlly: true,
8590
aiTimer: 0,
86-
aiInterval: 2000
91+
aiInterval: 2000,
92+
alive: true // 添加了alive状态
8793
};
8894

8995
// 敌方AI坦克
90-
const enemyTank = {
96+
let enemyTank = {
9197
x: 600,
9298
y: 400,
9399
width: 30,
@@ -101,7 +107,9 @@
101107
isPlayer: false,
102108
isAlly: false,
103109
aiTimer: 0,
104-
aiInterval: 3000
110+
aiInterval: 3000,
111+
alive: true,
112+
respawnTimer: 0
105113
};
106114

107115
// 障碍物
@@ -151,31 +159,36 @@
151159

152160
// 我方AI行为
153161
function allyAI(tank, deltaTime) {
162+
if (!tank.alive) return;
163+
154164
tank.aiTimer += deltaTime;
155165
if (tank.aiTimer >= tank.aiInterval) {
156166
tank.aiTimer = 0;
157167
tank.direction = Math.floor(Math.random() * 4);
158168

159-
// 有概率射击
160169
if (Math.random() < 0.7) {
161170
shoot(tank);
162171
}
163172
}
164173

165-
// 简单移动
166174
moveTank(tank);
167-
168-
// 避免障碍物
169175
avoidObstacles(tank);
170176
}
171177

172178
// 敌方AI行为
173179
function enemyAI(tank, deltaTime) {
180+
if (!tank.alive) {
181+
tank.respawnTimer += deltaTime;
182+
if (tank.respawnTimer >= 3000) {
183+
respawnEnemy();
184+
}
185+
return;
186+
}
187+
174188
tank.aiTimer += deltaTime;
175189
if (tank.aiTimer >= tank.aiInterval) {
176190
tank.aiTimer = 0;
177191

178-
// 朝向玩家
179192
const dx = playerTank.x - tank.x;
180193
const dy = playerTank.y - tank.y;
181194

@@ -185,32 +198,51 @@
185198
tank.direction = dy > 0 ? 2 : 0;
186199
}
187200

188-
// 高概率射击
189201
if (Math.random() < 0.8) {
190202
shoot(tank);
191203
}
192204
}
193205

194-
// 简单移动
195206
moveTank(tank);
196-
197-
// 避免障碍物
198207
avoidObstacles(tank);
199208
}
200209

210+
// 重生敌方坦克
211+
function respawnEnemy() {
212+
enemyTank = {
213+
x: Math.random() > 0.5 ? 100 : 700,
214+
y: Math.random() > 0.5 ? 100 : 500,
215+
width: 30,
216+
height: 30,
217+
color: 'red',
218+
speed: 2,
219+
direction: Math.floor(Math.random() * 4),
220+
bullets: [],
221+
lastShot: 0,
222+
shootDelay: 1500,
223+
isPlayer: false,
224+
isAlly: false,
225+
aiTimer: 0,
226+
aiInterval: 3000,
227+
alive: true,
228+
respawnTimer: 0
229+
};
230+
}
231+
201232
// 移动坦克
202233
function moveTank(tank) {
234+
if (!tank.alive) return;
235+
203236
let newX = tank.x;
204237
let newY = tank.y;
205238

206239
switch(tank.direction) {
207-
case 0: newY -= tank.speed; break; // up
208-
case 1: newX += tank.speed; break; // right
209-
case 2: newY += tank.speed; break; // down
210-
case 3: newX -= tank.speed; break; // left
240+
case 0: newY -= tank.speed; break;
241+
case 1: newX += tank.speed; break;
242+
case 2: newY += tank.speed; break;
243+
case 3: newX -= tank.speed; break;
211244
}
212245

213-
// 边界检查
214246
if (newX >= 0 && newX + tank.width <= canvas.width) {
215247
tank.x = newX;
216248
}
@@ -221,9 +253,10 @@
221253

222254
// 避免障碍物
223255
function avoidObstacles(tank) {
256+
if (!tank.alive) return;
257+
224258
for (const obstacle of obstacles) {
225259
if (checkCollision(tank, obstacle)) {
226-
// 后退并改变方向
227260
switch(tank.direction) {
228261
case 0: tank.y += tank.speed; break;
229262
case 1: tank.x -= tank.speed; break;
@@ -249,30 +282,26 @@
249282
for (let i = tank.bullets.length - 1; i >= 0; i--) {
250283
const bullet = tank.bullets[i];
251284

252-
// 移动子弹
253285
switch(bullet.direction) {
254286
case 0: bullet.y -= bullet.speed; break;
255287
case 1: bullet.x += bullet.speed; break;
256288
case 2: bullet.y += bullet.speed; break;
257289
case 3: bullet.x -= bullet.speed; break;
258290
}
259291

260-
// 边界检查
261292
if (bullet.x < 0 || bullet.x > canvas.width ||
262293
bullet.y < 0 || bullet.y > canvas.height) {
263294
tank.bullets.splice(i, 1);
264295
continue;
265296
}
266297

267-
// 障碍物碰撞
268298
for (const obstacle of obstacles) {
269299
if (checkCollision(bullet, obstacle)) {
270300
tank.bullets.splice(i, 1);
271301
break;
272302
}
273303
}
274304

275-
// 坦克碰撞
276305
if (bullet.owner !== playerTank && checkCollision(bullet, playerTank)) {
277306
tank.bullets.splice(i, 1);
278307
playerHit();
@@ -281,13 +310,12 @@
281310

282311
if (bullet.owner !== allyTank && bullet.owner !== playerTank && checkCollision(bullet, allyTank)) {
283312
tank.bullets.splice(i, 1);
284-
// 盟友被击中逻辑可以在这里添加
285313
continue;
286314
}
287315

288-
if (bullet.owner !== enemyTank && bullet.owner !== playerTank && checkCollision(bullet, enemyTank)) {
316+
if (bullet.owner !== enemyTank && checkCollision(bullet, enemyTank) && enemyTank.alive) {
289317
tank.bullets.splice(i, 1);
290-
// 敌人被击中逻辑可以在这里添加
318+
enemyHit();
291319
continue;
292320
}
293321
}
@@ -296,17 +324,24 @@
296324
// 玩家被击中
297325
function playerHit() {
298326
playerLives--;
299-
livesDisplay.textContent = `等级 ${playerLives}`;
327+
livesDisplay.textContent = `Lives: ${playerLives}`;
300328

301329
if (playerLives <= 0) {
302330
gameOver();
303331
} else {
304-
// 重置玩家位置
305332
playerTank.x = 400;
306333
playerTank.y = 300;
307334
}
308335
}
309336

337+
// 敌人被击中
338+
function enemyHit() {
339+
enemyTank.alive = false;
340+
enemyTank.respawnTimer = 0;
341+
score += 100;
342+
scoreDisplay.textContent = `Score: ${score}`;
343+
}
344+
310345
// 游戏结束
311346
function gameOver() {
312347
gameRunning = false;
@@ -316,8 +351,10 @@
316351
ctx.fillText('GAME OVER', canvas.width/2, canvas.height/2);
317352
}
318353

319-
// 绘制坦克
354+
// 绘制坦克（修复了显示问题）
320355
function drawTank(tank) {
356+
if (!tank.alive) return;
357+
321358
ctx.fillStyle = tank.color;
322359
ctx.fillRect(tank.x, tank.y, tank.width, tank.height);
323360

@@ -328,18 +365,10 @@
328365
let barrelLength = 15;
329366

330367
switch(tank.direction) {
331-
case 0: // up
332-
ctx.fillRect(barrelX - 2.5, barrelY - barrelLength, 5, barrelLength);
333-
break;
334-
case 1: // right
335-
ctx.fillRect(barrelX, barrelY - 2.5, barrelLength, 5);
336-
break;
337-
case 2: // down
338-
ctx.fillRect(barrelX - 2.5, barrelY, 5, barrelLength);
339-
break;
340-
case 3: // left
341-
ctx.fillRect(barrelX - barrelLength, barrelY - 2.5, barrelLength, 5);
342-
break;
368+
case 0: ctx.fillRect(barrelX - 2.5, barrelY - barrelLength, 5, barrelLength); break;
369+
case 1: ctx.fillRect(barrelX, barrelY - 2.5, barrelLength, 5); break;
370+
case 2: ctx.fillRect(barrelX - 2.5, barrelY, 5, barrelLength); break;
371+
case 3: ctx.fillRect(barrelX - barrelLength, barrelY - 2.5, barrelLength, 5); break;
343372
}
344373
}
345374

@@ -363,11 +392,9 @@
363392
function updateMiniMap() {
364393
miniMapCtx.clearRect(0, 0, miniMapCanvas.width, miniMapCanvas.height);
365394

366-
// 计算缩放比例
367395
const scaleX = miniMapCanvas.width / canvas.width;
368396
const scaleY = miniMapCanvas.height / canvas.height;
369397

370-
// 绘制障碍物
371398
miniMapCtx.fillStyle = 'gray';
372399
for (const obstacle of obstacles) {
373400
miniMapCtx.fillRect(
@@ -378,7 +405,6 @@
378405
);
379406
}
380407

381-
// 绘制坦克
382408
miniMapCtx.fillStyle = playerTank.color;
383409
miniMapCtx.fillRect(
384410
playerTank.x * scaleX,
@@ -395,13 +421,15 @@
395421
allyTank.height * scaleY
396422
);
397423

398-
miniMapCtx.fillStyle = enemyTank.color;
399-
miniMapCtx.fillRect(
400-
enemyTank.x * scaleX,
401-
enemyTank.y * scaleY,
402-
enemyTank.width * scaleX,
403-
enemyTank.height * scaleY
404-
);
424+
if (enemyTank.alive) {
425+
miniMapCtx.fillStyle = enemyTank.color;
426+
miniMapCtx.fillRect(
427+
enemyTank.x * scaleX,
428+
enemyTank.y * scaleY,
429+
enemyTank.width * scaleX,
430+
enemyTank.height * scaleY
431+
);
432+
}
405433
}
406434

407435
// 游戏主循环
@@ -412,7 +440,6 @@
412440
const deltaTime = timestamp - lastTime;
413441
lastTime = timestamp;
414442

415-
// 清空画布
416443
ctx.clearRect(0, 0, canvas.width, canvas.height);
417444

418445
// 玩家控制
@@ -449,7 +476,7 @@
449476
// 绘制游戏元素
450477
drawObstacles();
451478
drawTank(playerTank);
452-
drawTank(allyTank);
479+
drawTank(allyTank); // 确保调用绘制我方坦克
453480
drawTank(enemyTank);
454481
drawBullets(playerTank);
455482
drawBullets(allyTank);

0 commit comments

Comments
 (0)