Coop с AI/базой (соло-старт), реванш, чистые URL, доработки клиента
Сервер (Game.hpp/cpp): - coop-режим: AI-противники (волна 8, до 3 одновременно), простое преследование базы с рандомизацией, база с укрытием из кирпича. - Комната стартует соло (1 игрок), второй может подключиться позже. - Fix: хитбокс пули по базе брал радиус танка вместо пули. - Fix: AI при столкновении со стеной теперь сразу перерешает направление, а не долбит в одну точку до 3с — без этого база падала за секунды. Клиент: - Танк: гусеницы, башня, заметный ствол (было — незаметный нубик). - Рендер базы (укрытие/флаг), AI-танки — отдельным оттенком зелёного. - Экран победы/поражения — крупный glitch-текст на весь оверлей вместо строки текста; кнопки "играть ещё" (без reload) и "в лобби". - Блок кнопок управления (D-pad + огонь) справа от игрового поля. - Лобби: coop стартует по кнопке "готов" в одиночку. nginx: try_files с fallback на .html — чистые URL (/projects, /game) без расширения, старые /projects.html и т.п. продолжают работать.
This commit is contained in:
+114
-9
@@ -90,32 +90,137 @@
|
||||
}
|
||||
|
||||
#battlecity-canvas-container {
|
||||
max-width: 640px;
|
||||
position: relative;
|
||||
max-width: 900px;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
#battlecity-canvas-container canvas {
|
||||
.battle-layout {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#battle-canvas-slot 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-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
#battle-back {
|
||||
.dpad {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 44px);
|
||||
grid-template-rows: repeat(2, 44px);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.dpad button {
|
||||
background: var(--color-bg-raised);
|
||||
border: 1px solid var(--color-accent-dim);
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.dpad button:active {
|
||||
background: var(--color-accent-dim);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.dpad__up { grid-column: 2; grid-row: 1; }
|
||||
.dpad__left { grid-column: 1; grid-row: 2; }
|
||||
.dpad__right { grid-column: 3; grid-row: 2; }
|
||||
.dpad__down { grid-column: 2; grid-row: 2; }
|
||||
|
||||
.fire-btn {
|
||||
background: var(--color-bg-raised);
|
||||
border: 1px solid var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 0.75rem 1.5rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.fire-btn:active {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
/* --- экран победы/поражения --- */
|
||||
#battle-result-overlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(10, 14, 12, 0.9);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.battle-result {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
border: var(--border);
|
||||
background: var(--color-bg-raised);
|
||||
}
|
||||
|
||||
.battle-result h2 {
|
||||
font-size: 3rem;
|
||||
margin: 0 0 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.battle-result--win h2 {
|
||||
color: var(--color-accent);
|
||||
text-shadow: 0 0 16px var(--color-accent-dim);
|
||||
}
|
||||
|
||||
.battle-result--lose h2 {
|
||||
color: var(--color-silver);
|
||||
}
|
||||
|
||||
.battle-result--draw h2 {
|
||||
color: var(--color-silver);
|
||||
}
|
||||
|
||||
.battle-result p {
|
||||
color: var(--color-fg);
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.battle-result__actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.battle-result__actions button {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-accent-dim);
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
padding: 0.35rem 0.75rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#battle-back:hover {
|
||||
.battle-result__actions button:hover {
|
||||
border-color: var(--color-accent);
|
||||
box-shadow: 0 0 6px var(--color-accent-dim);
|
||||
}
|
||||
|
||||
+2
-3
@@ -19,13 +19,12 @@
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/">whoami</a></li>
|
||||
<li><a href="/projects.html">ls projects/</a></li>
|
||||
<li><a href="/game.html" aria-current="page">./battlecity</a></li>
|
||||
<li><a href="/projects">ls projects/</a></li>
|
||||
<li><a href="/game" aria-current="page">./battlecity</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<main id="game-root">
|
||||
<!-- TODO: coop-режим с AI и защитой базы — этап 5 -->
|
||||
<h2 class="prompt">./battlecity</h2>
|
||||
<div id="lobby"></div>
|
||||
<div id="battlecity-canvas-container" style="display: none"></div>
|
||||
|
||||
+2
-2
@@ -20,8 +20,8 @@
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/" aria-current="page">whoami</a></li>
|
||||
<li><a href="/projects.html">ls projects/</a></li>
|
||||
<li><a href="/game.html">./battlecity</a></li>
|
||||
<li><a href="/projects">ls projects/</a></li>
|
||||
<li><a href="/game">./battlecity</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
|
||||
+143
-15
@@ -1,4 +1,5 @@
|
||||
import { ClientMessage, ServerMessage } from './protocol.js';
|
||||
import { returnToLobbyContainer, leaveRoomAndReturn } from './lobby.js';
|
||||
|
||||
const TILE_PX = 32;
|
||||
// Quintus транслирует и вращает контекст сам (Sprite.render -> matrix.setContextTransform)
|
||||
@@ -12,21 +13,46 @@ let myPlayerId = null;
|
||||
let stage = null;
|
||||
let tankSprites = new Map();
|
||||
let bulletSprites = new Map();
|
||||
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 +85,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 +124,6 @@ function ensureQuintus(cols, rows) {
|
||||
Q.scene('battle', (stageRef) => {
|
||||
stage = stageRef;
|
||||
});
|
||||
|
||||
document.getElementById('battlecity-canvas-container').appendChild(Q.el);
|
||||
}
|
||||
|
||||
function buildMap(map) {
|
||||
@@ -100,6 +144,28 @@ function buildMap(map) {
|
||||
}
|
||||
}
|
||||
|
||||
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,10 +187,17 @@ 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);
|
||||
}
|
||||
@@ -133,6 +206,12 @@ function onState(payload) {
|
||||
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) {
|
||||
@@ -152,14 +231,49 @@ function onState(payload) {
|
||||
bulletSprites.delete(id);
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
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';
|
||||
const titles = { win: 'ПОБЕДА', lose: 'ПОРАЖЕНИЕ', draw: 'НИЧЬЯ' };
|
||||
const title = titles[payload.result] || payload.result.toUpperCase();
|
||||
const overlay = document.getElementById('battle-result-overlay');
|
||||
overlay.innerHTML = `
|
||||
<div class="battle-result battle-result--${payload.result}">
|
||||
<h2 class="glitch" data-text="${title}">${title}</h2>
|
||||
<p>${payload.reason}</p>
|
||||
<div class="battle-result__actions">
|
||||
<button data-action="rematch">играть ещё</button>
|
||||
<button data-action="to-lobby">в лобби</button>
|
||||
</div>
|
||||
</div>`;
|
||||
overlay.style.display = 'flex';
|
||||
}
|
||||
|
||||
function onOverlayClick(e) {
|
||||
const btn = e.target.closest('[data-action]');
|
||||
if (!btn) return;
|
||||
const overlay = document.getElementById('battle-result-overlay');
|
||||
overlay.style.display = 'none';
|
||||
overlay.innerHTML = '';
|
||||
if (btn.dataset.action === 'rematch') {
|
||||
returnToLobbyContainer();
|
||||
} else {
|
||||
leaveRoomAndReturn();
|
||||
}
|
||||
}
|
||||
|
||||
export function startBattle(networkInstance, payload, ownPlayerId) {
|
||||
@@ -172,12 +286,30 @@ export function startBattle(networkInstance, payload, ownPlayerId) {
|
||||
document.getElementById('lobby').style.display = 'none';
|
||||
const container = document.getElementById('battlecity-canvas-container');
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = '<p id="battle-result"></p><button id="battle-back" style="display:none">выйти в лобби</button>';
|
||||
container.innerHTML = `
|
||||
<div class="battle-layout">
|
||||
<div id="battle-canvas-slot"></div>
|
||||
<div class="battle-controls">
|
||||
<div class="dpad">
|
||||
<button class="dpad__up" data-input="up">↑</button>
|
||||
<button class="dpad__left" data-input="left">←</button>
|
||||
<button class="dpad__right" data-input="right">→</button>
|
||||
<button class="dpad__down" data-input="down">↓</button>
|
||||
</div>
|
||||
<button class="fire-btn" data-input="fire">огонь</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="battle-result-overlay"></div>`;
|
||||
|
||||
ensureQuintus(cols, rows);
|
||||
document.getElementById('battle-canvas-slot').appendChild(Q.el);
|
||||
bindControlButtons(container.querySelector('.battle-controls'));
|
||||
container.querySelector('#battle-result-overlay').addEventListener('click', onOverlayClick);
|
||||
|
||||
Q.stageScene('battle', 0);
|
||||
tankSprites = new Map();
|
||||
bulletSprites = new Map();
|
||||
baseSprite = null;
|
||||
|
||||
buildMap(payload.map);
|
||||
|
||||
@@ -188,8 +320,4 @@ export function startBattle(networkInstance, payload, ownPlayerId) {
|
||||
seq = 0;
|
||||
polling = true;
|
||||
requestAnimationFrame(pollInput);
|
||||
|
||||
document.getElementById('battle-back').addEventListener('click', () => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -52,14 +52,12 @@ function renderLobbyView() {
|
||||
function renderRoomView() {
|
||||
const full = currentRoom.players.length >= 2;
|
||||
let statusLine = '';
|
||||
let readyBtn = '';
|
||||
if (currentRoom.mode !== 'pvp') {
|
||||
statusLine = '<p class="lobby-error">coop ещё не реализован (этап 5)</p>';
|
||||
} else if (!full) {
|
||||
let readyBtn = '<button data-action="ready">готов</button>';
|
||||
if (currentRoom.mode === 'pvp' && !full) {
|
||||
statusLine = '<p class="lobby-error">жду второго игрока (1/2) — открой комнату во второй вкладке/другим человеком</p>';
|
||||
readyBtn = '<button data-action="ready" disabled>готов</button>';
|
||||
} else {
|
||||
readyBtn = '<button data-action="ready">готов</button>';
|
||||
} else if (currentRoom.mode === 'coop' && !full) {
|
||||
statusLine = '<p class="lobby-error">можно начать соло, второй игрок сможет подключиться позже</p>';
|
||||
}
|
||||
container.innerHTML = `
|
||||
<div class="lobby-panel">
|
||||
@@ -83,6 +81,19 @@ function render() {
|
||||
}
|
||||
}
|
||||
|
||||
// Вызывается из battle.js по кнопкам экрана победы/поражения.
|
||||
export function returnToLobbyContainer() {
|
||||
document.getElementById('battlecity-canvas-container').style.display = 'none';
|
||||
container.style.display = '';
|
||||
render();
|
||||
}
|
||||
|
||||
export function leaveRoomAndReturn() {
|
||||
currentRoom = null;
|
||||
net.leaveRoom();
|
||||
returnToLobbyContainer();
|
||||
}
|
||||
|
||||
container?.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('[data-action]');
|
||||
if (!btn) return;
|
||||
|
||||
@@ -20,8 +20,8 @@
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/">whoami</a></li>
|
||||
<li><a href="/projects.html" aria-current="page">ls projects/</a></li>
|
||||
<li><a href="/game.html">./battlecity</a></li>
|
||||
<li><a href="/projects" aria-current="page">ls projects/</a></li>
|
||||
<li><a href="/game">./battlecity</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user