-
./battlecity
diff --git a/frontend/index.html b/frontend/index.html
index f9b4488..9c41efe 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -20,8 +20,8 @@
diff --git a/frontend/js/game/audio.js b/frontend/js/game/audio.js
new file mode 100644
index 0000000..e0da203
--- /dev/null
+++ b/frontend/js/game/audio.js
@@ -0,0 +1,76 @@
+// Простой синтез звука через Web Audio API — без внешних аудиофайлов.
+let ctx = null;
+
+function ensureCtx() {
+ if (!ctx) {
+ const AudioCtx = window.AudioContext || window.webkitAudioContext;
+ ctx = new AudioCtx();
+ }
+ if (ctx.state === 'suspended') {
+ ctx.resume();
+ }
+ return ctx;
+}
+
+// Вызывать из обработчика реального пользовательского клика/нажатия —
+// браузеры блокируют автозапуск звука без явного жеста.
+export function unlockAudio() {
+ ensureCtx();
+}
+
+function beep({ freq, duration = 0.08, type = 'square', gain = 0.1, freqEnd = null }) {
+ const c = ensureCtx();
+ const osc = c.createOscillator();
+ const g = c.createGain();
+ osc.type = type;
+ osc.frequency.setValueAtTime(freq, c.currentTime);
+ if (freqEnd !== null) {
+ osc.frequency.linearRampToValueAtTime(freqEnd, c.currentTime + duration);
+ }
+ g.gain.setValueAtTime(gain, c.currentTime);
+ g.gain.exponentialRampToValueAtTime(0.0001, c.currentTime + duration);
+ osc.connect(g).connect(c.destination);
+ osc.start();
+ osc.stop(c.currentTime + duration);
+}
+
+function noiseBurst({ duration = 0.2, gain = 0.18 } = {}) {
+ const c = ensureCtx();
+ const size = Math.max(1, Math.floor(c.sampleRate * duration));
+ const buffer = c.createBuffer(1, size, c.sampleRate);
+ const data = buffer.getChannelData(0);
+ for (let i = 0; i < size; i++) {
+ data[i] = (Math.random() * 2 - 1) * (1 - i / size);
+ }
+ const source = c.createBufferSource();
+ source.buffer = buffer;
+ const g = c.createGain();
+ g.gain.setValueAtTime(gain, c.currentTime);
+ source.connect(g).connect(c.destination);
+ source.start();
+}
+
+export function playShot() {
+ beep({ freq: 660, freqEnd: 220, duration: 0.06, type: 'square', gain: 0.08 });
+}
+
+export function playWallHit() {
+ noiseBurst({ duration: 0.08, gain: 0.1 });
+}
+
+export function playExplosion() {
+ noiseBurst({ duration: 0.25, gain: 0.18 });
+ beep({ freq: 120, freqEnd: 40, duration: 0.25, type: 'sawtooth', gain: 0.1 });
+}
+
+export function playWin() {
+ [523, 659, 784, 1047].forEach((freq, i) =>
+ setTimeout(() => beep({ freq, duration: 0.15, type: 'square', gain: 0.1 }), i * 110)
+ );
+}
+
+export function playLose() {
+ [392, 330, 262, 196].forEach((freq, i) =>
+ setTimeout(() => beep({ freq, duration: 0.2, type: 'sawtooth', gain: 0.1 }), i * 130)
+ );
+}
diff --git a/frontend/js/game/battle.js b/frontend/js/game/battle.js
index 21af651..cb01449 100644
--- a/frontend/js/game/battle.js
+++ b/frontend/js/game/battle.js
@@ -1,4 +1,6 @@
import { ClientMessage, ServerMessage } from './protocol.js';
+import { returnToLobbyContainer, leaveRoomAndReturn } from './lobby.js';
+import { playShot, playWallHit, playExplosion, playWin, playLose } from './audio.js';
const TILE_PX = 32;
// Quintus транслирует и вращает контекст сам (Sprite.render -> matrix.setContextTransform)
@@ -12,21 +14,47 @@ let myPlayerId = null;
let stage = null;
let tankSprites = new Map();
let bulletSprites = new Map();
+let wallSprites = new Map(); // "x,y" (тайл) -> спрайт, для синка разрушенных стен
+let baseSprite = null;
let lastSentInput = null;
let seq = 0;
let polling = false;
+function tankColor(p) {
+ if (p.isAi) return '#0a8f2c';
+ return p.isMe ? '#00ff41' : '#9fa3a0';
+}
+
function setupEntities() {
Q.Sprite.extend('Tank', {
init(p) {
- this._super(p, { w: 26, h: 26, renderAlways: true });
+ this._super(p, { w: 24, h: 24, renderAlways: true });
},
draw(ctx) {
const p = this.p;
- ctx.fillStyle = p.isMe ? '#00ff41' : '#9fa3a0';
+ const color = tankColor(p);
+
+ // корпус
+ ctx.fillStyle = color;
ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+
+ // гусеницы по бокам
ctx.fillStyle = '#0a0e0c';
- ctx.fillRect(-3, -p.h / 2 - 8, 6, 12);
+ ctx.fillRect(-p.w / 2, -p.h / 2, 3, p.h);
+ ctx.fillRect(p.w / 2 - 3, -p.h / 2, 3, p.h);
+
+ // башня
+ ctx.beginPath();
+ ctx.arc(0, 0, p.w / 2 - 5, 0, Math.PI * 2);
+ ctx.fillStyle = color;
+ ctx.fill();
+ ctx.lineWidth = 1.5;
+ ctx.strokeStyle = '#0a0e0c';
+ ctx.stroke();
+
+ // ствол — явно торчит вперёд по направлению взгляда (локально «вверх»)
+ ctx.fillStyle = '#0a0e0c';
+ ctx.fillRect(-2.5, -p.h / 2 - 12, 5, 16);
},
});
@@ -59,6 +87,26 @@ function setupEntities() {
}
},
});
+
+ Q.Sprite.extend('Base', {
+ init(p) {
+ this._super(p, { w: TILE_PX * 0.85, h: TILE_PX * 0.85, renderAlways: true });
+ },
+ draw(ctx) {
+ const p = this.p;
+ ctx.fillStyle = p.alive ? '#9fa3a0' : '#2a2d2b';
+ 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);
+ ctx.fillStyle = p.alive ? '#00ff41' : '#0a0e0c';
+ ctx.beginPath();
+ ctx.moveTo(0, -p.h / 2);
+ ctx.lineTo(-p.w / 4, 0);
+ ctx.lineTo(p.w / 4, 0);
+ ctx.closePath();
+ ctx.fill();
+ },
+ });
}
function ensureQuintus(cols, rows) {
@@ -78,8 +126,6 @@ function ensureQuintus(cols, rows) {
Q.scene('battle', (stageRef) => {
stage = stageRef;
});
-
- document.getElementById('battlecity-canvas-container').appendChild(Q.el);
}
function buildMap(map) {
@@ -89,17 +135,42 @@ function buildMap(map) {
if (tile === 0) {
continue;
}
- stage.insert(
- new Q.Wall({
- x: x * TILE_PX + TILE_PX / 2,
- y: y * TILE_PX + TILE_PX / 2,
- tile,
- })
- );
+ const sprite = new Q.Wall({
+ x: x * TILE_PX + TILE_PX / 2,
+ y: y * TILE_PX + TILE_PX / 2,
+ tile,
+ });
+ stage.insert(sprite);
+ if (tile === 1) {
+ // только кирпич может быть разрушен — только его отслеживаем
+ wallSprites.set(`${x},${y}`, sprite);
+ }
}
}
}
+function bindControlButtons(root) {
+ const press = (input, active) => {
+ if (Q) {
+ Q.inputs[input] = active;
+ }
+ };
+ root.querySelectorAll('[data-input]').forEach((btn) => {
+ const input = btn.dataset.input;
+ btn.addEventListener('mousedown', () => press(input, true));
+ btn.addEventListener('mouseup', () => press(input, false));
+ btn.addEventListener('mouseleave', () => press(input, false));
+ btn.addEventListener('touchstart', (e) => {
+ e.preventDefault();
+ press(input, true);
+ });
+ btn.addEventListener('touchend', (e) => {
+ e.preventDefault();
+ press(input, false);
+ });
+ });
+}
+
function pollInput() {
if (!polling) {
return;
@@ -121,18 +192,33 @@ function pollInput() {
}
function onState(payload) {
+ const seenTanks = new Set();
for (const t of payload.tanks) {
+ seenTanks.add(t.id);
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 });
+ sprite = new Q.Tank({
+ x: t.x * TILE_PX,
+ y: t.y * TILE_PX,
+ isMe: t.id === myPlayerId,
+ isAi: !!t.is_ai,
+ });
stage.insert(sprite);
tankSprites.set(t.id, sprite);
+ } else if (!sprite.p.hidden && !t.alive) {
+ playExplosion();
}
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;
}
+ for (const [id, sprite] of tankSprites) {
+ if (!seenTanks.has(id)) {
+ sprite.destroy();
+ tankSprites.delete(id);
+ }
+ }
const seenBullets = new Set();
for (const b of payload.bullets) {
@@ -142,6 +228,7 @@ function onState(payload) {
sprite = new Q.Bullet({ x: b.x * TILE_PX, y: b.y * TILE_PX });
stage.insert(sprite);
bulletSprites.set(b.id, sprite);
+ playShot();
}
sprite.p.x = b.x * TILE_PX;
sprite.p.y = b.y * TILE_PX;
@@ -152,14 +239,71 @@ function onState(payload) {
bulletSprites.delete(id);
}
}
+
+ if (payload.destroyed_tiles) {
+ for (const [tx, ty] of payload.destroyed_tiles) {
+ const key = `${tx},${ty}`;
+ const sprite = wallSprites.get(key);
+ if (sprite) {
+ sprite.destroy();
+ wallSprites.delete(key);
+ }
+ }
+ if (payload.destroyed_tiles.length > 0) {
+ playWallHit();
+ }
+ }
+
+ if (payload.base) {
+ if (!baseSprite) {
+ baseSprite = new Q.Base({
+ x: payload.base.x * TILE_PX,
+ y: payload.base.y * TILE_PX,
+ alive: payload.base.alive,
+ });
+ stage.insert(baseSprite);
+ } else {
+ if (baseSprite.p.alive && !payload.base.alive) {
+ playExplosion();
+ }
+ baseSprite.p.alive = payload.base.alive;
+ }
+ }
}
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';
+ if (payload.result === 'win') {
+ playWin();
+ } else {
+ playLose();
+ }
+ const titles = { win: 'ПОБЕДА', lose: 'ПОРАЖЕНИЕ', draw: 'НИЧЬЯ' };
+ const title = titles[payload.result] || payload.result.toUpperCase();
+ const overlay = document.getElementById('battle-result-overlay');
+ overlay.innerHTML = `
+
+
${title}
+
${payload.reason}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
coop ещё не реализован (этап 5)
';
+ const full = currentRoom.players.length >= 2;
+ let statusLine = '';
+ let readyBtn = '';
+ if (currentRoom.mode === 'pvp' && !full) {
+ statusLine = 'жду второго игрока (1/2) — открой комнату во второй вкладке/другим человеком
';
+ readyBtn = '';
+ } else if (currentRoom.mode === 'coop' && !full) {
+ statusLine = 'можно начать соло, второй игрок сможет подключиться позже
';
+ }
container.innerHTML = `
${errorBanner()}
@@ -62,6 +68,7 @@ function renderRoomView() {
${currentRoom.players.map((p) => `- ${p.nickname}${p.ready ? ' — готов' : ''}
`).join('')}
+ ${statusLine}
${readyBtn}