Игровая логика PvP: сервер (C++) + клиент (Quintus.js)
Сервер: Game — authoritative-тик 20 Гц через uSockets timer, движение/коллизии танков и пуль, разрушаемые кирпичные стены, respawn, победа/поражение/ничья, технический проигрыш при дисконнекте. game.ready запускает матч, когда оба игрока в pvp-комнате готовы. Клиент: заведён Quintus.js (MIT, vendored) — Tank/Bullet/Wall спрайты, рендер по снапшотам game.state, keyboard-инпут (WASD/стрелки/space), экран результата матча. Найден и исправлен use-after-free: колбэк onFinished_ синхронно удалял Game изнутри его же метода — перенесено на uWS::Loop::defer.
This commit is contained in:
@@ -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 = '<p id="battle-result"></p><button id="battle-back" style="display:none">выйти в лобби</button>';
|
||||
|
||||
ensureQuintus(cols, rows);
|
||||
Q.stageScene('battle', 0);
|
||||
tankSprites = new Map();
|
||||
bulletSprites = new Map();
|
||||
|
||||
buildMap(payload.map);
|
||||
|
||||
net.on(ServerMessage.GAME_STATE, onState);
|
||||
net.on(ServerMessage.GAME_OVER, onOver);
|
||||
|
||||
lastSentInput = null;
|
||||
seq = 0;
|
||||
polling = true;
|
||||
requestAnimationFrame(pollInput);
|
||||
|
||||
document.getElementById('battle-back').addEventListener('click', () => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
@@ -1,8 +1,11 @@
|
||||
import { Network, ServerMessage } from './network.js';
|
||||
import { ClientMessage } from './protocol.js';
|
||||
import { startBattle } from './battle.js';
|
||||
|
||||
const container = document.getElementById('lobby');
|
||||
|
||||
let net;
|
||||
let myPlayerId = null;
|
||||
let rooms = [];
|
||||
let currentRoom = null;
|
||||
let errorMessage = '';
|
||||
@@ -47,14 +50,19 @@ function renderLobbyView() {
|
||||
}
|
||||
|
||||
function renderRoomView() {
|
||||
const readyBtn =
|
||||
currentRoom.mode === 'pvp'
|
||||
? '<button data-action="ready">готов</button>'
|
||||
: '<p class="lobby-error">coop ещё не реализован (этап 5)</p>';
|
||||
container.innerHTML = `
|
||||
<div class="lobby-panel">
|
||||
${errorBanner()}
|
||||
<h3 class="prompt">room ${currentRoom.name}</h3>
|
||||
<p>режим: <span class="tag">${currentRoom.mode}</span></p>
|
||||
<ul class="room-players">
|
||||
${currentRoom.players.map((p) => `<li>${p.nickname}</li>`).join('')}
|
||||
${currentRoom.players.map((p) => `<li>${p.nickname}${p.ready ? ' — готов' : ''}</li>`).join('')}
|
||||
</ul>
|
||||
${readyBtn}
|
||||
<button data-action="leave">выйти в лобби</button>
|
||||
</div>`;
|
||||
}
|
||||
@@ -78,6 +86,9 @@ container?.addEventListener('click', (e) => {
|
||||
case 'join':
|
||||
net.joinRoom(btn.dataset.roomId);
|
||||
break;
|
||||
case 'ready':
|
||||
net.send(ClientMessage.GAME_READY);
|
||||
break;
|
||||
case 'leave':
|
||||
currentRoom = null;
|
||||
net.leaveRoom();
|
||||
@@ -99,8 +110,9 @@ export function initLobby() {
|
||||
net = new Network();
|
||||
|
||||
net.on('_open', () => net.hello(nickname));
|
||||
net.on(ServerMessage.HELLO_ACK, () => {
|
||||
net.on(ServerMessage.HELLO_ACK, (payload) => {
|
||||
connected = true;
|
||||
myPlayerId = payload.player_id;
|
||||
net.listRooms();
|
||||
});
|
||||
net.on('_close', () => {
|
||||
@@ -125,6 +137,10 @@ export function initLobby() {
|
||||
}
|
||||
});
|
||||
|
||||
net.on(ServerMessage.GAME_START, (payload) => {
|
||||
startBattle(net, payload, myPlayerId);
|
||||
});
|
||||
|
||||
net.on(ServerMessage.ERROR, (payload) => {
|
||||
console.error('[gameserver] error:', payload);
|
||||
errorMessage = payload.message;
|
||||
|
||||
Reference in New Issue
Block a user