diff --git a/frontend/css/game.css b/frontend/css/game.css
index b58023e..a11c1d8 100644
--- a/frontend/css/game.css
+++ b/frontend/css/game.css
@@ -88,3 +88,34 @@
content: '- ';
color: var(--color-accent-dim);
}
+
+#battlecity-canvas-container {
+ max-width: 640px;
+ margin: 1.5rem 0;
+}
+
+#battlecity-canvas-container canvas {
+ border: var(--border);
+ background: var(--color-bg);
+ display: block;
+}
+
+#battle-result {
+ color: var(--color-accent);
+ font-size: 1.1rem;
+ margin: 0.75rem 0;
+}
+
+#battle-back {
+ background: transparent;
+ border: 1px solid var(--color-accent-dim);
+ color: var(--color-accent);
+ font-family: var(--font-mono);
+ padding: 0.35rem 0.75rem;
+ cursor: pointer;
+}
+
+#battle-back:hover {
+ border-color: var(--color-accent);
+ box-shadow: 0 0 6px var(--color-accent-dim);
+}
diff --git a/frontend/game.html b/frontend/game.html
index 5c55e48..5bef8ce 100644
--- a/frontend/game.html
+++ b/frontend/game.html
@@ -25,13 +25,18 @@
-
+
./battlecity
-
+
+
+
+
+
+
diff --git a/frontend/js/game/battle.js b/frontend/js/game/battle.js
new file mode 100644
index 0000000..21af651
--- /dev/null
+++ b/frontend/js/game/battle.js
@@ -0,0 +1,195 @@
+import { ClientMessage, ServerMessage } from './protocol.js';
+
+const TILE_PX = 32;
+// Quintus транслирует и вращает контекст сам (Sprite.render -> matrix.setContextTransform)
+// на основе p.x/p.y/p.angle — draw() получает уже трансформированный контекст
+// и должен рисовать спрайт центрированным в (0,0), без своих translate/rotate.
+const DIR_DEGREES = { up: 0, right: 90, down: 180, left: 270 };
+
+let Q = null;
+let net = null;
+let myPlayerId = null;
+let stage = null;
+let tankSprites = new Map();
+let bulletSprites = new Map();
+let lastSentInput = null;
+let seq = 0;
+let polling = false;
+
+function setupEntities() {
+ Q.Sprite.extend('Tank', {
+ init(p) {
+ this._super(p, { w: 26, h: 26, renderAlways: true });
+ },
+ draw(ctx) {
+ const p = this.p;
+ ctx.fillStyle = p.isMe ? '#00ff41' : '#9fa3a0';
+ ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+ ctx.fillStyle = '#0a0e0c';
+ ctx.fillRect(-3, -p.h / 2 - 8, 6, 12);
+ },
+ });
+
+ Q.Sprite.extend('Bullet', {
+ init(p) {
+ this._super(p, { w: 8, h: 8, renderAlways: true });
+ },
+ draw(ctx) {
+ ctx.fillStyle = '#c7c7c7';
+ ctx.beginPath();
+ ctx.arc(0, 0, this.p.w / 2, 0, Math.PI * 2);
+ ctx.fill();
+ },
+ });
+
+ Q.Sprite.extend('Wall', {
+ init(p) {
+ this._super(p, { w: TILE_PX, h: TILE_PX });
+ },
+ draw(ctx) {
+ const p = this.p;
+ if (p.tile === 2) {
+ ctx.fillStyle = '#9fa3a0';
+ ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+ } else {
+ ctx.fillStyle = '#0a8f2c';
+ ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+ ctx.strokeStyle = '#0a0e0c';
+ ctx.strokeRect(-p.w / 2 + 1, -p.h / 2 + 1, p.w - 2, p.h - 2);
+ }
+ },
+ });
+}
+
+function ensureQuintus(cols, rows) {
+ if (Q) {
+ return;
+ }
+ Q = window.Quintus().include('Sprites, Scenes, 2D, Input').setup({
+ width: cols * TILE_PX,
+ height: rows * TILE_PX,
+ });
+ Q.input.keyboardControls({
+ LEFT: 'left', RIGHT: 'right', UP: 'up', DOWN: 'down',
+ A: 'left', D: 'right', W: 'up', S: 'down',
+ SPACE: 'fire',
+ });
+ setupEntities();
+ Q.scene('battle', (stageRef) => {
+ stage = stageRef;
+ });
+
+ document.getElementById('battlecity-canvas-container').appendChild(Q.el);
+}
+
+function buildMap(map) {
+ for (let y = 0; y < map.length; y++) {
+ for (let x = 0; x < map[y].length; x++) {
+ const tile = map[y][x];
+ if (tile === 0) {
+ continue;
+ }
+ stage.insert(
+ new Q.Wall({
+ x: x * TILE_PX + TILE_PX / 2,
+ y: y * TILE_PX + TILE_PX / 2,
+ tile,
+ })
+ );
+ }
+ }
+}
+
+function pollInput() {
+ if (!polling) {
+ return;
+ }
+ const input = {
+ seq: seq++,
+ up: !!Q.inputs.up,
+ down: !!Q.inputs.down,
+ left: !!Q.inputs.left,
+ right: !!Q.inputs.right,
+ fire: !!Q.inputs.fire,
+ };
+ const key = `${input.up}${input.down}${input.left}${input.right}${input.fire}`;
+ if (key !== lastSentInput) {
+ lastSentInput = key;
+ net.send(ClientMessage.GAME_INPUT, input);
+ }
+ requestAnimationFrame(pollInput);
+}
+
+function onState(payload) {
+ for (const t of payload.tanks) {
+ let sprite = tankSprites.get(t.id);
+ if (!sprite) {
+ sprite = new Q.Tank({ x: t.x * TILE_PX, y: t.y * TILE_PX, isMe: t.id === myPlayerId });
+ stage.insert(sprite);
+ tankSprites.set(t.id, sprite);
+ }
+ sprite.p.x = t.x * TILE_PX;
+ sprite.p.y = t.y * TILE_PX;
+ sprite.p.angle = DIR_DEGREES[t.direction] || 0;
+ sprite.p.hidden = !t.alive;
+ }
+
+ const seenBullets = new Set();
+ for (const b of payload.bullets) {
+ seenBullets.add(b.id);
+ let sprite = bulletSprites.get(b.id);
+ if (!sprite) {
+ sprite = new Q.Bullet({ x: b.x * TILE_PX, y: b.y * TILE_PX });
+ stage.insert(sprite);
+ bulletSprites.set(b.id, sprite);
+ }
+ sprite.p.x = b.x * TILE_PX;
+ sprite.p.y = b.y * TILE_PX;
+ }
+ for (const [id, sprite] of bulletSprites) {
+ if (!seenBullets.has(id)) {
+ sprite.destroy();
+ bulletSprites.delete(id);
+ }
+ }
+}
+
+function onOver(payload) {
+ polling = false;
+ const resultText = { win: 'Победа', lose: 'Поражение', draw: 'Ничья' }[payload.result] || payload.result;
+ const resultEl = document.getElementById('battle-result');
+ resultEl.textContent = `${resultText} — ${payload.reason}`;
+ document.getElementById('battle-back').style.display = 'inline-block';
+}
+
+export function startBattle(networkInstance, payload, ownPlayerId) {
+ net = networkInstance;
+ myPlayerId = ownPlayerId;
+
+ const rows = payload.map.length;
+ const cols = payload.map[0].length;
+
+ document.getElementById('lobby').style.display = 'none';
+ const container = document.getElementById('battlecity-canvas-container');
+ container.style.display = 'block';
+ container.innerHTML = '