cacto/cactoz.su
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Фикс клавиатуры в бою, подсказка про WASD, зелёное дуло

Browse Source 
Quintus слушает клавиатуру на самом канвасе, а не на document/window;
без autoFocus и явного focus() канвас не получал фокус (особенно после
переприкрепления к DOM на реванш) — WASD/стрелки/space никуда не долетали.
Клик по кнопке D-pad тоже уводил фокус — возвращаем его на канвас.

Дуло танка было почти того же цвета, что фон (#0a0e0c на чёрном) — не
видно. Сделал ярко-зелёным с тёмной обводкой, читается на любом корпусе.

Над блоком кнопок управления — подсказка, что WASD/стрелки тоже работают.
This commit is contained in:
cacto
2026-08-06 18:50:20 +05:00
parent 75ef39ae9b
commit 20d63f0cee
2 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/js/game/battle.js
+19 -3
View File
@@ -52,9 +52,13 @@ function setupEntities() {
ctx.strokeStyle = '#0a0e0c';
ctx.stroke();
// ствол — явно торчит вперёд по направлению взгляда (локально «вверх»)
ctx.fillStyle = '#0a0e0c';
// ствол — явно торчит вперёд по направлению взгляда (локально «вверх»).
// Ярко-зелёный с тёмной обводкой — иначе на тёмном корпусе не виден.
ctx.fillStyle = '#00ff41';
ctx.strokeStyle = '#0a0e0c';
ctx.lineWidth = 1;
ctx.fillRect(-2.5, -p.h / 2 - 12, 5, 16);
ctx.strokeRect(-2.5, -p.h / 2 - 12, 5, 16);
},
});
@@ -116,7 +120,9 @@ function ensureQuintus(cols, rows) {
Q = window.Quintus().include('Sprites, Scenes, 2D, Input').setup({
width: cols * TILE_PX,
height: rows * TILE_PX,
autoFocus: true,
});
Q.el.tabIndex = 1;
Q.input.keyboardControls({
LEFT: 'left', RIGHT: 'right', UP: 'up', DOWN: 'down',
A: 'left', D: 'right', W: 'up', S: 'down',
@@ -157,7 +163,12 @@ function bindControlButtons(root) {
};
root.querySelectorAll('[data-input]').forEach((btn) => {
const input = btn.dataset.input;
btn.addEventListener('mousedown', () => press(input, true));
// Клик по кнопке уводит фокус с канваса — а Quintus слушает клавиатуру
// именно на нём, так что после клика WASD/стрелки перестанут работать.
btn.addEventListener('mousedown', () => {
press(input, true);
Q?.el.focus();
});
btn.addEventListener('mouseup', () => press(input, false));
btn.addEventListener('mouseleave', () => press(input, false));
btn.addEventListener('touchstart', (e) => {
@@ -320,6 +331,7 @@ export function startBattle(networkInstance, payload, ownPlayerId) {
<div class="battle-layout">
<div id="battle-canvas-slot"></div>
<div class="battle-controls">
<p class="battle-controls__hint">WASD / стрелки + пробел тоже работают</p>
<div class="dpad">
<button class="dpad__up" data-input="up">&uarr;</button>
<button class="dpad__left" data-input="left">&larr;</button>
@@ -333,6 +345,10 @@ export function startBattle(networkInstance, payload, ownPlayerId) {
ensureQuintus(cols, rows);
document.getElementById('battle-canvas-slot').appendChild(Q.el);
// Клавиатурные события Quintus слушает на самом канвасе — если фокус
// не на нём (а он теряется при каждом переприкреплении к DOM на реванш),
// WASD/стрелки/space просто никуда не долетают.
Q.el.focus();
bindControlButtons(container.querySelector('.battle-controls'));
container.querySelector('#battle-result-overlay').addEventListener('click', onOverlayClick);