Skip to content

Commit 623f1ab

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

File tree

1 file changed

+46
-82
lines changed

1 file changed

+46
-82
lines changed

‎game/tk2.html‎

Lines changed: 46 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
#gameCanvas {
1414
display: block;
1515
background-color: #000;
16+
margin: 0 auto;
1617
}
1718
#miniMap {
1819
position: absolute;
@@ -29,16 +30,29 @@
2930
left: 10px;
3031
color: white;
3132
font-size: 16px;
33+
background-color: rgba(0, 0, 0, 0.7);
34+
padding: 10px;
35+
border-radius: 5px;
36+
}
37+
#gameOver {
38+
position: absolute;
39+
top: 50%;
40+
left: 50%;
41+
transform: translate(-50%, -50%);
42+
color: white;
43+
font-size: 48px;
44+
display: none;
3245
}
3346
</style>
3447
</head>
3548
<body>
3649
<canvas id="gameCanvas"></canvas>
3750
<canvas id="miniMap"></canvas>
3851
<div id="gameInfo">
39-
<div id="lives">Lives: 3</div>
40-
<div id="score">Score: 0</div>
52+
<div>生命: <span id="lives">3</span></div>
53+
<div>分数: <span id="score">0</span></div>
4154
</div>
55+
<div id="gameOver">游戏结束，请刷新页面</div>
4256

4357
<script>
4458
// 游戏主画布
@@ -55,8 +69,6 @@
5569
let gameRunning = true;
5670
let playerLives = 3;
5771
let score = 0;
58-
const livesDisplay = document.getElementById('lives');
59-
const scoreDisplay = document.getElementById('score');
6072

6173
// 玩家坦克
6274
const playerTank = {
@@ -66,14 +78,14 @@
6678
height: 30,
6779
color: 'blue',
6880
speed: 3,
69-
direction: 0,
81+
direction: 0, // 0:上, 1:右, 2:下, 3:左
7082
bullets: [],
7183
lastShot: 0,
7284
shootDelay: 500,
7385
isPlayer: true
7486
};
7587

76-
// 我方AI坦克（修复了显示问题）
88+
// 友军AI坦克
7789
const allyTank = {
7890
x: 200,
7991
y: 200,
@@ -88,11 +100,10 @@
88100
isPlayer: false,
89101
isAlly: true,
90102
aiTimer: 0,
91-
aiInterval: 2000,
92-
alive: true // 添加了alive状态
103+
aiInterval: 2000
93104
};
94105

95-
// 敌方AI坦克
106+
// 敌军AI坦克
96107
let enemyTank = {
97108
x: 600,
98109
y: 400,
@@ -108,7 +119,6 @@
108119
isAlly: false,
109120
aiTimer: 0,
110121
aiInterval: 3000,
111-
alive: true,
112122
respawnTimer: 0
113123
};
114124

@@ -159,36 +169,33 @@
159169

160170
// 我方AI行为
161171
function allyAI(tank, deltaTime) {
162-
if (!tank.alive) return;
163-
164172
tank.aiTimer += deltaTime;
165173
if (tank.aiTimer >= tank.aiInterval) {
166174
tank.aiTimer = 0;
167175
tank.direction = Math.floor(Math.random() * 4);
168-
169-
if (Math.random() < 0.7) {
176+
if (Math.random() < 0.3) {
170177
shoot(tank);
171178
}
172179
}
173-
174180
moveTank(tank);
175-
avoidObstacles(tank);
176181
}
177182

178183
// 敌方AI行为
179184
function enemyAI(tank, deltaTime) {
180185
if (!tank.alive) {
181186
tank.respawnTimer += deltaTime;
182187
if (tank.respawnTimer >= 3000) {
183-
respawnEnemy();
188+
tank.alive = true;
189+
tank.x = Math.random() > 0.5 ? 100 : 700;
190+
tank.y = Math.random() > 0.5 ? 100 : 500;
191+
tank.respawnTimer = 0;
184192
}
185193
return;
186194
}
187195

188196
tank.aiTimer += deltaTime;
189197
if (tank.aiTimer >= tank.aiInterval) {
190198
tank.aiTimer = 0;
191-
192199
const dx = playerTank.x - tank.x;
193200
const dy = playerTank.y - tank.y;
194201

@@ -202,37 +209,11 @@
202209
shoot(tank);
203210
}
204211
}
205-
206212
moveTank(tank);
207-
avoidObstacles(tank);
208-
}
209-
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-
};
230213
}
231214

232215
// 移动坦克
233216
function moveTank(tank) {
234-
if (!tank.alive) return;
235-
236217
let newX = tank.x;
237218
let newY = tank.y;
238219

@@ -243,6 +224,7 @@
243224
case 3: newX -= tank.speed; break;
244225
}
245226

227+
// 边界检测
246228
if (newX >= 0 && newX + tank.width <= canvas.width) {
247229
tank.x = newX;
248230
}
@@ -251,24 +233,6 @@
251233
}
252234
}
253235

254-
// 避免障碍物
255-
function avoidObstacles(tank) {
256-
if (!tank.alive) return;
257-
258-
for (const obstacle of obstacles) {
259-
if (checkCollision(tank, obstacle)) {
260-
switch(tank.direction) {
261-
case 0: tank.y += tank.speed; break;
262-
case 1: tank.x -= tank.speed; break;
263-
case 2: tank.y -= tank.speed; break;
264-
case 3: tank.x += tank.speed; break;
265-
}
266-
tank.direction = Math.floor(Math.random() * 4);
267-
break;
268-
}
269-
}
270-
}
271-
272236
// 碰撞检测
273237
function checkCollision(obj1, obj2) {
274238
return obj1.x < obj2.x + obj2.width &&
@@ -289,31 +253,30 @@
289253
case 3: bullet.x -= bullet.speed; break;
290254
}
291255

256+
// 边界检测
292257
if (bullet.x < 0 || bullet.x > canvas.width ||
293258
bullet.y < 0 || bullet.y > canvas.height) {
294259
tank.bullets.splice(i, 1);
295260
continue;
296261
}
297262

263+
// 障碍物碰撞
298264
for (const obstacle of obstacles) {
299265
if (checkCollision(bullet, obstacle)) {
300266
tank.bullets.splice(i, 1);
301267
break;
302268
}
303269
}
304270

305-
if (bullet.owner !== playerTank && checkCollision(bullet, playerTank)) {
271+
// 敌方子弹击中玩家
272+
if (bullet.owner === enemyTank && checkCollision(bullet, playerTank)) {
306273
tank.bullets.splice(i, 1);
307274
playerHit();
308275
continue;
309276
}
310277

311-
if (bullet.owner !== allyTank && bullet.owner !== playerTank && checkCollision(bullet, allyTank)) {
312-
tank.bullets.splice(i, 1);
313-
continue;
314-
}
315-
316-
if (bullet.owner !== enemyTank && checkCollision(bullet, enemyTank) && enemyTank.alive) {
278+
// 玩家子弹击中敌方
279+
if (bullet.owner === playerTank && checkCollision(bullet, enemyTank) && enemyTank.alive) {
317280
tank.bullets.splice(i, 1);
318281
enemyHit();
319282
continue;
@@ -324,13 +287,15 @@
324287
// 玩家被击中
325288
function playerHit() {
326289
playerLives--;
327-
livesDisplay.textContent = `Lives: ${playerLives}`;
290+
document.getElementById('lives').textContent = playerLives;
328291

329292
if (playerLives <= 0) {
330293
gameOver();
331294
} else {
295+
// 重置玩家位置
332296
playerTank.x = 400;
333297
playerTank.y = 300;
298+
playerTank.direction = 0;
334299
}
335300
}
336301

@@ -339,22 +304,17 @@
339304
enemyTank.alive = false;
340305
enemyTank.respawnTimer = 0;
341306
score += 100;
342-
scoreDisplay.textContent = `Score: ${score}`;
307+
document.getElementById('score').textContent = score;
343308
}
344309

345310
// 游戏结束
346311
function gameOver() {
347312
gameRunning = false;
348-
ctx.fillStyle = 'white';
349-
ctx.font = '48px Arial';
350-
ctx.textAlign = 'center';
351-
ctx.fillText('GAME OVER', canvas.width/2, canvas.height/2);
313+
document.getElementById('gameOver').style.display = 'block';
352314
}
353315

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

@@ -374,7 +334,7 @@
374334

375335
// 绘制子弹
376336
function drawBullets(tank) {
377-
ctx.fillStyle = tank.bullets[0]?.color || 'yellow';
337+
ctx.fillStyle = 'yellow';
378338
for (const bullet of tank.bullets) {
379339
ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
380340
}
@@ -395,6 +355,7 @@
395355
const scaleX = miniMapCanvas.width / canvas.width;
396356
const scaleY = miniMapCanvas.height / canvas.height;
397357

358+
// 绘制障碍物
398359
miniMapCtx.fillStyle = 'gray';
399360
for (const obstacle of obstacles) {
400361
miniMapCtx.fillRect(
@@ -405,6 +366,7 @@
405366
);
406367
}
407368

369+
// 绘制玩家坦克
408370
miniMapCtx.fillStyle = playerTank.color;
409371
miniMapCtx.fillRect(
410372
playerTank.x * scaleX,
@@ -413,6 +375,7 @@
413375
playerTank.height * scaleY
414376
);
415377

378+
// 绘制友军坦克
416379
miniMapCtx.fillStyle = allyTank.color;
417380
miniMapCtx.fillRect(
418381
allyTank.x * scaleX,
@@ -421,6 +384,7 @@
421384
allyTank.height * scaleY
422385
);
423386

387+
// 绘制敌军坦克
424388
if (enemyTank.alive) {
425389
miniMapCtx.fillStyle = enemyTank.color;
426390
miniMapCtx.fillRect(
@@ -476,8 +440,8 @@
476440
// 绘制游戏元素
477441
drawObstacles();
478442
drawTank(playerTank);
479-
drawTank(allyTank); // 确保调用绘制我方坦克
480-
drawTank(enemyTank);
443+
drawTank(allyTank);
444+
if (enemyTank.alive) drawTank(enemyTank);
481445
drawBullets(playerTank);
482446
drawBullets(allyTank);
483447
drawBullets(enemyTank);
@@ -488,7 +452,7 @@
488452
requestAnimationFrame(gameLoop);
489453
}
490454

491-
// 启动游戏
455+
// 初始化游戏
492456
requestAnimationFrame(gameLoop);
493457
</script>
494458
</body>

0 commit comments

Comments
 (0)