You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
551 lines
17 KiB
551 lines
17 KiB
(() => {
|
|
"use strict";
|
|
|
|
function initGame() {
|
|
let canvas = document.querySelector("#game") || document.querySelector("canvas");
|
|
if (!canvas) {
|
|
canvas = document.createElement("canvas");
|
|
document.body.appendChild(canvas);
|
|
}
|
|
canvas.id = canvas.id || "game";
|
|
canvas.width = 800;
|
|
canvas.height = 600;
|
|
canvas.tabIndex = 0;
|
|
canvas.style.maxWidth = "100%";
|
|
canvas.style.display = "block";
|
|
canvas.style.margin = canvas.style.margin || "0 auto";
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
function ensureText(id, fallbackParent = document.body) {
|
|
let element = document.querySelector(`#${id}`);
|
|
if (!element) {
|
|
element = document.createElement("span");
|
|
element.id = id;
|
|
fallbackParent.appendChild(element);
|
|
}
|
|
return element;
|
|
}
|
|
|
|
let hud = document.querySelector("#hud");
|
|
if (!hud) {
|
|
hud = document.createElement("div");
|
|
hud.id = "hud";
|
|
hud.style.cssText =
|
|
"width:800px;max-width:100%;margin:8px auto;color:#e8eadf;font:16px/1.4 system-ui,sans-serif;display:flex;gap:18px;flex-wrap:wrap;";
|
|
hud.innerHTML =
|
|
'Score: <span id="score">0</span> Lives: <span id="lives">3</span> Enemies: <span id="enemies">0</span>';
|
|
canvas.parentNode.insertBefore(hud, canvas.nextSibling);
|
|
}
|
|
|
|
let overlay = document.querySelector("#overlay");
|
|
if (!overlay) {
|
|
overlay = document.createElement("div");
|
|
overlay.id = "overlay";
|
|
overlay.style.cssText =
|
|
"width:800px;max-width:100%;margin:8px auto;color:#e8eadf;font:18px/1.4 system-ui,sans-serif;text-align:center;";
|
|
overlay.innerHTML =
|
|
'<div id="statusLabel"></div><h2 id="statusTitle"></h2><p id="statusText"></p><button id="primaryAction" type="button">Start</button>';
|
|
hud.parentNode.insertBefore(overlay, hud.nextSibling);
|
|
}
|
|
|
|
const scoreEl = ensureText("score", hud);
|
|
const livesEl = ensureText("lives", hud);
|
|
const enemiesEl = ensureText("enemies", hud);
|
|
const statusLabel = ensureText("statusLabel", overlay);
|
|
const statusTitle = ensureText("statusTitle", overlay);
|
|
const statusText = ensureText("statusText", overlay);
|
|
const primaryAction = document.querySelector("#primaryAction") || (() => {
|
|
const button = document.createElement("button");
|
|
button.id = "primaryAction";
|
|
button.type = "button";
|
|
button.textContent = "Start";
|
|
overlay.appendChild(button);
|
|
return button;
|
|
})();
|
|
const statusChip = document.querySelector("#statusChip");
|
|
const startAction = document.querySelector("#startAction");
|
|
const pauseAction = document.querySelector("#pauseAction");
|
|
const stopAction = document.querySelector("#stopAction");
|
|
const endAction = document.querySelector("#endAction");
|
|
|
|
const WIDTH = canvas.width;
|
|
const HEIGHT = canvas.height;
|
|
const TILE = 40;
|
|
const PLAYER_SPEED = 150;
|
|
const ENEMY_SPEED = 82;
|
|
const BULLET_SPEED = 330;
|
|
const TANK_SIZE = 32;
|
|
const BULLET_SIZE = 6;
|
|
const FIRE_COOLDOWN = 0.34;
|
|
const ENEMY_FIRE_COOLDOWN = 1.35;
|
|
const BRICK_SIZE = 20;
|
|
const DIRS = {
|
|
up: { x: 0, y: -1 },
|
|
down: { x: 0, y: 1 },
|
|
left: { x: -1, y: 0 },
|
|
right: { x: 1, y: 0 },
|
|
};
|
|
|
|
const keys = new Set();
|
|
let state = "menu";
|
|
let score = 0;
|
|
let lives = 3;
|
|
let player;
|
|
let enemies = [];
|
|
let bullets = [];
|
|
let particles = [];
|
|
let lastTime = 0;
|
|
|
|
const walls = [
|
|
...brickWall(120, 80, TILE, TILE * 3),
|
|
...brickWall(240, 120, TILE * 4, TILE),
|
|
...steelWall(520, 80, TILE, TILE * 3),
|
|
...brickWall(640, 160, TILE * 2, TILE),
|
|
...brickWall(80, 320, TILE * 3, TILE),
|
|
...brickWall(280, 280, TILE, TILE * 3),
|
|
...brickWall(400, 360, TILE * 4, TILE),
|
|
...steelWall(640, 360, TILE, TILE * 3),
|
|
...brickWall(160, 480, TILE * 2, TILE),
|
|
...brickWall(480, 500, TILE * 3, TILE),
|
|
];
|
|
|
|
function rect(x, y, w, h, type = "brick") {
|
|
return { x, y, w, h, type, destructible: type === "brick" };
|
|
}
|
|
|
|
function brickWall(x, y, w, h) {
|
|
return splitWall(x, y, w, h, "brick");
|
|
}
|
|
|
|
function steelWall(x, y, w, h) {
|
|
return splitWall(x, y, w, h, "steel");
|
|
}
|
|
|
|
function splitWall(x, y, w, h, type) {
|
|
const pieces = [];
|
|
for (let py = y; py < y + h; py += BRICK_SIZE) {
|
|
for (let px = x; px < x + w; px += BRICK_SIZE) {
|
|
pieces.push(rect(px, py, Math.min(BRICK_SIZE, x + w - px), Math.min(BRICK_SIZE, y + h - py), type));
|
|
}
|
|
}
|
|
return pieces;
|
|
}
|
|
|
|
function tank(x, y, color, dir = "up", team = "enemy") {
|
|
return {
|
|
x,
|
|
y,
|
|
w: TANK_SIZE,
|
|
h: TANK_SIZE,
|
|
color,
|
|
dir,
|
|
team,
|
|
fireTimer: 0,
|
|
aiTimer: 0.4 + Math.random() * 1.2,
|
|
alive: true,
|
|
};
|
|
}
|
|
|
|
function resetGame() {
|
|
score = 0;
|
|
lives = 3;
|
|
bullets = [];
|
|
particles = [];
|
|
player = tank(384, 536, "#77b255", "up", "player");
|
|
enemies = [
|
|
tank(84, 64, "#db5a42", "down"),
|
|
tank(384, 64, "#d9923b", "down"),
|
|
tank(684, 64, "#db5a42", "down"),
|
|
tank(84, 220, "#d9923b", "right"),
|
|
tank(684, 260, "#db5a42", "left"),
|
|
];
|
|
setState("playing");
|
|
updateHud();
|
|
}
|
|
|
|
function setState(next) {
|
|
state = next;
|
|
const visible = state !== "playing";
|
|
overlay.classList.toggle("is-hidden", !visible);
|
|
overlay.style.display = visible ? "" : "none";
|
|
|
|
if (state === "menu") {
|
|
if (statusChip) statusChip.textContent = "待命";
|
|
statusLabel.textContent = "Ready";
|
|
statusTitle.textContent = "Defend the field";
|
|
statusText.textContent = "Press Enter or tap Start to roll out.";
|
|
primaryAction.textContent = "Start";
|
|
if (endAction) endAction.hidden = true;
|
|
} else if (state === "paused") {
|
|
if (statusChip) statusChip.textContent = "暂停";
|
|
statusLabel.textContent = "Paused";
|
|
statusTitle.textContent = "Hold position";
|
|
statusText.textContent = "Press P or tap Resume to continue.";
|
|
primaryAction.textContent = "Resume";
|
|
if (endAction) endAction.hidden = false;
|
|
} else if (state === "ended") {
|
|
if (statusChip) statusChip.textContent = "结束";
|
|
statusLabel.textContent = "Ended";
|
|
statusTitle.textContent = "Mission ended";
|
|
statusText.textContent = `Final score: ${score}. Press Enter to restart.`;
|
|
primaryAction.textContent = "Restart";
|
|
if (endAction) endAction.hidden = true;
|
|
} else if (state === "gameOver") {
|
|
if (statusChip) statusChip.textContent = "战损";
|
|
statusLabel.textContent = "Defeat";
|
|
statusTitle.textContent = "Armor breached";
|
|
statusText.textContent = `Final score: ${score}. Press Enter to restart.`;
|
|
primaryAction.textContent = "Restart";
|
|
if (endAction) endAction.hidden = true;
|
|
} else if (state === "win") {
|
|
if (statusChip) statusChip.textContent = "胜利";
|
|
statusLabel.textContent = "Victory";
|
|
statusTitle.textContent = "Field secured";
|
|
statusText.textContent = `All enemies destroyed. Score: ${score}.`;
|
|
primaryAction.textContent = "Play again";
|
|
if (endAction) endAction.hidden = true;
|
|
} else {
|
|
if (statusChip) statusChip.textContent = "作战中";
|
|
if (endAction) endAction.hidden = false;
|
|
}
|
|
}
|
|
|
|
function updateHud() {
|
|
scoreEl.textContent = score;
|
|
livesEl.textContent = lives;
|
|
enemiesEl.textContent = enemies.filter((enemy) => enemy.alive).length;
|
|
}
|
|
|
|
function startOrResume() {
|
|
if (state === "playing") return;
|
|
if (state === "paused") {
|
|
setState("playing");
|
|
return;
|
|
}
|
|
resetGame();
|
|
}
|
|
|
|
function togglePause() {
|
|
if (state === "playing") setState("paused");
|
|
else if (state === "paused") setState("playing");
|
|
}
|
|
|
|
function endGame() {
|
|
if (state === "playing" || state === "paused") setState("ended");
|
|
}
|
|
|
|
function fire(source) {
|
|
if (source.fireTimer > 0 || !source.alive) return;
|
|
const dir = DIRS[source.dir];
|
|
bullets.push({
|
|
x: source.x + source.w / 2 - BULLET_SIZE / 2 + dir.x * 20,
|
|
y: source.y + source.h / 2 - BULLET_SIZE / 2 + dir.y * 20,
|
|
w: BULLET_SIZE,
|
|
h: BULLET_SIZE,
|
|
vx: dir.x * BULLET_SPEED,
|
|
vy: dir.y * BULLET_SPEED,
|
|
owner: source.team,
|
|
});
|
|
source.fireTimer = source.team === "player" ? FIRE_COOLDOWN : ENEMY_FIRE_COOLDOWN;
|
|
}
|
|
|
|
function update(dt) {
|
|
if (state !== "playing") return;
|
|
player.fireTimer = Math.max(0, player.fireTimer - dt);
|
|
movePlayer(dt);
|
|
updateEnemies(dt);
|
|
updateBullets(dt);
|
|
updateParticles(dt);
|
|
if (enemies.every((enemy) => !enemy.alive)) setState("win");
|
|
updateHud();
|
|
}
|
|
|
|
function movePlayer(dt) {
|
|
let move = null;
|
|
if (keys.has("arrowup") || keys.has("w")) move = "up";
|
|
else if (keys.has("arrowdown") || keys.has("s")) move = "down";
|
|
else if (keys.has("arrowleft") || keys.has("a")) move = "left";
|
|
else if (keys.has("arrowright") || keys.has("d")) move = "right";
|
|
if (!move) return;
|
|
player.dir = move;
|
|
moveTank(player, DIRS[move].x * PLAYER_SPEED * dt, DIRS[move].y * PLAYER_SPEED * dt);
|
|
}
|
|
|
|
function updateEnemies(dt) {
|
|
const livingEnemies = enemies.filter((enemy) => enemy.alive);
|
|
for (const enemy of livingEnemies) {
|
|
enemy.fireTimer = Math.max(0, enemy.fireTimer - dt);
|
|
enemy.aiTimer -= dt;
|
|
|
|
if (enemy.aiTimer <= 0) {
|
|
enemy.dir = chooseEnemyDirection(enemy);
|
|
enemy.aiTimer = 0.45 + Math.random() * 1.25;
|
|
}
|
|
|
|
const dir = DIRS[enemy.dir];
|
|
const moved = moveTank(enemy, dir.x * ENEMY_SPEED * dt, dir.y * ENEMY_SPEED * dt, livingEnemies);
|
|
if (!moved) {
|
|
enemy.dir = randomDirection();
|
|
enemy.aiTimer = 0.25;
|
|
}
|
|
|
|
if (canSeePlayer(enemy) || Math.random() < dt * 0.18) {
|
|
facePlayer(enemy);
|
|
fire(enemy);
|
|
}
|
|
}
|
|
}
|
|
|
|
function chooseEnemyDirection(enemy) {
|
|
if (Math.random() < 0.65) {
|
|
const dx = player.x - enemy.x;
|
|
const dy = player.y - enemy.y;
|
|
if (Math.abs(dx) > Math.abs(dy)) return dx > 0 ? "right" : "left";
|
|
return dy > 0 ? "down" : "up";
|
|
}
|
|
return randomDirection();
|
|
}
|
|
|
|
function randomDirection() {
|
|
const names = Object.keys(DIRS);
|
|
return names[Math.floor(Math.random() * names.length)];
|
|
}
|
|
|
|
function facePlayer(enemy) {
|
|
const dx = player.x - enemy.x;
|
|
const dy = player.y - enemy.y;
|
|
enemy.dir = Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? "right" : "left") : dy > 0 ? "down" : "up";
|
|
}
|
|
|
|
function canSeePlayer(enemy) {
|
|
const sameColumn = Math.abs(enemy.x - player.x) < TILE * 0.7;
|
|
const sameRow = Math.abs(enemy.y - player.y) < TILE * 0.7;
|
|
if (!sameColumn && !sameRow) return false;
|
|
const beam = sameColumn
|
|
? rect(enemy.x + enemy.w / 2 - 3, Math.min(enemy.y, player.y), 6, Math.abs(enemy.y - player.y))
|
|
: rect(Math.min(enemy.x, player.x), enemy.y + enemy.h / 2 - 3, Math.abs(enemy.x - player.x), 6);
|
|
return !walls.some((wall) => intersects(beam, wall));
|
|
}
|
|
|
|
function moveTank(entity, dx, dy, peerEnemies = enemies) {
|
|
const originalX = entity.x;
|
|
const originalY = entity.y;
|
|
entity.x += dx;
|
|
if (isBlocked(entity, peerEnemies)) entity.x = originalX;
|
|
entity.y += dy;
|
|
if (isBlocked(entity, peerEnemies)) entity.y = originalY;
|
|
return entity.x !== originalX || entity.y !== originalY;
|
|
}
|
|
|
|
function isBlocked(entity, peerEnemies) {
|
|
if (entity.x < 0 || entity.y < 0 || entity.x + entity.w > WIDTH || entity.y + entity.h > HEIGHT) return true;
|
|
if (walls.some((wall) => intersects(entity, wall))) return true;
|
|
if (entity.team === "player") {
|
|
return enemies.some((enemy) => enemy.alive && intersects(entity, enemy));
|
|
}
|
|
if (intersects(entity, player)) return true;
|
|
return peerEnemies.some((enemy) => enemy !== entity && enemy.alive && intersects(entity, enemy));
|
|
}
|
|
|
|
function updateBullets(dt) {
|
|
for (const bullet of bullets) {
|
|
bullet.x += bullet.vx * dt;
|
|
bullet.y += bullet.vy * dt;
|
|
}
|
|
|
|
const remaining = [];
|
|
for (const bullet of bullets) {
|
|
const out =
|
|
bullet.x < -20 || bullet.y < -20 || bullet.x > WIDTH + 20 || bullet.y > HEIGHT + 20;
|
|
if (out) continue;
|
|
const wallIndex = walls.findIndex((wall) => intersects(bullet, wall));
|
|
if (wallIndex !== -1) {
|
|
const wall = walls[wallIndex];
|
|
spark(bullet.x, bullet.y, wall.destructible ? "#b86d3d" : "#c4c8bd");
|
|
if (wall.destructible) walls.splice(wallIndex, 1);
|
|
continue;
|
|
}
|
|
if (bullet.owner === "player") {
|
|
const hit = enemies.find((enemy) => enemy.alive && intersects(bullet, enemy));
|
|
if (hit) {
|
|
hit.alive = false;
|
|
score += 100;
|
|
spark(hit.x + hit.w / 2, hit.y + hit.h / 2, hit.color);
|
|
continue;
|
|
}
|
|
} else if (intersects(bullet, player)) {
|
|
lives -= 1;
|
|
spark(player.x + player.w / 2, player.y + player.h / 2, "#77b255");
|
|
if (lives <= 0) {
|
|
player.alive = false;
|
|
setState("gameOver");
|
|
} else {
|
|
player.x = 384;
|
|
player.y = 536;
|
|
player.dir = "up";
|
|
}
|
|
continue;
|
|
}
|
|
remaining.push(bullet);
|
|
}
|
|
bullets = remaining;
|
|
}
|
|
|
|
function updateParticles(dt) {
|
|
particles = particles
|
|
.map((particle) => ({
|
|
...particle,
|
|
life: particle.life - dt,
|
|
x: particle.x + particle.vx * dt,
|
|
y: particle.y + particle.vy * dt,
|
|
}))
|
|
.filter((particle) => particle.life > 0);
|
|
}
|
|
|
|
function spark(x, y, color) {
|
|
for (let i = 0; i < 10; i += 1) {
|
|
const angle = Math.random() * Math.PI * 2;
|
|
const speed = 35 + Math.random() * 95;
|
|
particles.push({
|
|
x,
|
|
y,
|
|
vx: Math.cos(angle) * speed,
|
|
vy: Math.sin(angle) * speed,
|
|
life: 0.22 + Math.random() * 0.24,
|
|
color,
|
|
});
|
|
}
|
|
}
|
|
|
|
function intersects(a, b) {
|
|
return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
|
|
}
|
|
|
|
function draw() {
|
|
ctx.clearRect(0, 0, WIDTH, HEIGHT);
|
|
drawGrid();
|
|
walls.forEach(drawWall);
|
|
enemies.filter((enemy) => enemy.alive).forEach(drawTank);
|
|
if (player?.alive !== false) drawTank(player);
|
|
bullets.forEach(drawBullet);
|
|
particles.forEach(drawParticle);
|
|
}
|
|
|
|
function drawGrid() {
|
|
ctx.fillStyle = "#1a1f16";
|
|
ctx.fillRect(0, 0, WIDTH, HEIGHT);
|
|
ctx.strokeStyle = "rgba(120, 129, 95, 0.15)";
|
|
ctx.lineWidth = 1;
|
|
for (let x = 0; x <= WIDTH; x += TILE) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, 0);
|
|
ctx.lineTo(x, HEIGHT);
|
|
ctx.stroke();
|
|
}
|
|
for (let y = 0; y <= HEIGHT; y += TILE) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, y);
|
|
ctx.lineTo(WIDTH, y);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
function drawWall(wall) {
|
|
if (wall.type === "steel") {
|
|
ctx.fillStyle = "#6f7770";
|
|
ctx.fillRect(wall.x, wall.y, wall.w, wall.h);
|
|
ctx.fillStyle = "rgba(255,255,255,0.22)";
|
|
ctx.fillRect(wall.x + 3, wall.y + 3, wall.w - 6, 3);
|
|
ctx.fillStyle = "rgba(0,0,0,0.24)";
|
|
ctx.fillRect(wall.x + 3, wall.y + wall.h - 6, wall.w - 6, 3);
|
|
return;
|
|
}
|
|
ctx.fillStyle = "#8e5a3d";
|
|
ctx.fillRect(wall.x, wall.y, wall.w, wall.h);
|
|
ctx.strokeStyle = "rgba(40,24,16,0.58)";
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeRect(wall.x + 0.5, wall.y + 0.5, wall.w - 1, wall.h - 1);
|
|
ctx.fillStyle = "rgba(255,220,150,0.1)";
|
|
ctx.fillRect(wall.x + 3, wall.y + 3, wall.w - 6, 3);
|
|
}
|
|
|
|
function drawTank(entity) {
|
|
const cx = entity.x + entity.w / 2;
|
|
const cy = entity.y + entity.h / 2;
|
|
ctx.save();
|
|
ctx.translate(cx, cy);
|
|
ctx.rotate(directionAngle(entity.dir));
|
|
ctx.fillStyle = "#10140f";
|
|
ctx.fillRect(-17, -17, 34, 34);
|
|
ctx.fillStyle = entity.color;
|
|
ctx.fillRect(-13, -13, 26, 26);
|
|
ctx.fillStyle = "rgba(255,255,255,0.18)";
|
|
ctx.fillRect(-7, -8, 14, 16);
|
|
ctx.fillStyle = "#15160f";
|
|
ctx.fillRect(-4, -25, 8, 19);
|
|
ctx.restore();
|
|
}
|
|
|
|
function directionAngle(dir) {
|
|
if (dir === "right") return Math.PI / 2;
|
|
if (dir === "down") return Math.PI;
|
|
if (dir === "left") return -Math.PI / 2;
|
|
return 0;
|
|
}
|
|
|
|
function drawBullet(bullet) {
|
|
ctx.fillStyle = bullet.owner === "player" ? "#f0c451" : "#f07a5a";
|
|
ctx.fillRect(bullet.x, bullet.y, bullet.w, bullet.h);
|
|
}
|
|
|
|
function drawParticle(particle) {
|
|
ctx.globalAlpha = Math.max(0, particle.life * 3);
|
|
ctx.fillStyle = particle.color;
|
|
ctx.fillRect(particle.x, particle.y, 4, 4);
|
|
ctx.globalAlpha = 1;
|
|
}
|
|
|
|
function loop(time) {
|
|
const dt = Math.min(0.033, (time - lastTime) / 1000 || 0);
|
|
lastTime = time;
|
|
update(dt);
|
|
draw();
|
|
requestAnimationFrame(loop);
|
|
}
|
|
|
|
window.addEventListener("keydown", (event) => {
|
|
const key = event.key.toLowerCase();
|
|
if (["arrowup", "arrowdown", "arrowleft", "arrowright", " ", "spacebar"].includes(key)) {
|
|
event.preventDefault();
|
|
}
|
|
if (key === "enter") startOrResume();
|
|
else if (key === "p") togglePause();
|
|
else if (key === "escape") endGame();
|
|
else if ((key === " " || key === "spacebar") && state === "playing") fire(player);
|
|
keys.add(key);
|
|
});
|
|
|
|
window.addEventListener("keyup", (event) => {
|
|
keys.delete(event.key.toLowerCase());
|
|
});
|
|
|
|
primaryAction.addEventListener("click", startOrResume);
|
|
if (startAction) startAction.addEventListener("click", startOrResume);
|
|
if (pauseAction) pauseAction.addEventListener("click", togglePause);
|
|
if (stopAction) stopAction.addEventListener("click", endGame);
|
|
if (endAction) endAction.addEventListener("click", endGame);
|
|
|
|
player = tank(384, 536, "#77b255", "up", "player");
|
|
updateHud();
|
|
setState("menu");
|
|
requestAnimationFrame(loop);
|
|
}
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", initGame, { once: true });
|
|
} else {
|
|
initGame();
|
|
}
|
|
})();
|