Crie uma entrada clara para jogar
Use um botão real ou outro controle que pode receber foco para iniciar o jogo e, em seguida, mova o foco para a superfície do jogo somente quando a ação for deliberada. Se o canvas precisar de entrada de teclado, dê ao seu contêiner um comportamento de foco sensato e um indicador visível. Evite capturar teclas globalmente antes do jogador entrar em jogo; isso pode impedir a navegação e digitação normais da página.
Quando um painel de configurações ou menu de pausa for aberto, mova o foco para dentro e mantenha a navegação até fechar. Ao fechar, retorne o foco para o abridor, se ele ainda existir. MDN documenta HTMLElement.focus e sua função no direcionamento de eventos de teclado.
Testar transições de foco
Navegue da página para o jogo usando apenas Tab e Enter, abra um menu, percorra seus controles, feche-o e confirme o retorno do foco. Certifique-se de que o estilo de foco visível não esteja oculto pelos efeitos visuais do jogo. Se o jogo usar atalhos de teclado, certifique-se de que eles não sejam acionados enquanto o foco estiver em uma entrada de texto onde o jogador possa digitar.
Navegue pelo jogo usando Tab e Enter, abra e feche um menu e confirme o retorno do foco. Verifique o estilo de foco visível e evite que atalhos de jogo sejam acionados em entradas de texto. Limpa o estado da tecla retida quando o foco sai para que o movimento não permaneça ativo.
Perguntas sobre gerenciamento de foco do jogo
Um jogo deve escutar as chaves de todo o documento?
Somente se o jogador tiver entrado intencionalmente no jogo e o manipulador evitar controles editáveis e interações de página não relacionadas. Uma superfície de jogo focada oferece um limite de entrada mais claro.
Para onde deve ir o foco quando o menu do jogo fecha?
Retorne-o ao controle que abriu o menu quando esse controle ainda existir. Isso dá aos usuários do teclado um ponto de continuação previsível.
Leitura complementar
Viu alguma informação desatualizada? Informar uma correção