Escolha as chaves por significado e layout
Use KeyboardEvent.key quando a ação deve depender do caractere produzido pelo layout de teclado da pessoa; use KeyboardEvent.code quando a posição física da tecla for mais importante. Essa distinção afeta diferentes layouts. Ofereça um mapeamento consistente e mostre-o nas instruções, em vez de presumir que todo mundo espera WASD.
Não intercepte teclas enquanto um campo de texto ou controle editável estiver em foco. Impeça o comportamento padrão do navegador, como rolar a página, somente quando a área de jogo estiver tratando ativamente aquela tecla. Assim, o jogo não captura a digitação comum nem atrapalha a navegação antes de a pessoa entrar na área interativa.
Acompanhe as teclas mantidas e a liberação
Para movimento contínuo, ative o estado de uma tecla em keydown e limpe-o em keyup. O navegador pode repetir keydown enquanto a tecla estiver pressionada; por isso, uma ação única como pular deve ignorar repetições, a menos que repeti-las seja intencional. Limpe as teclas mantidas quando o jogo perder o foco ou a janela ficar desfocada, pois o jogo pode não receber keyup depois que o foco mudar para outro lugar.
Teste duas teclas ao mesmo tempo, um pressionamento longo, um toque rápido e o comportamento quando o jogo perde e recupera o foco. Para ações únicas, ignore eventos keydown repetidos, a menos que a repetição seja intencional. A MDN documenta KeyboardEvent.key, KeyboardEvent.code e os tipos de evento; escolha a propriedade adequada ao mapeamento.
Perguntas sobre controles de teclado para jogos de navegador
Devo usar KeyboardEvent.key ou KeyboardEvent.code em um controle do jogo?
Use KeyboardEvent.key quando o caractere ou o layout do teclado deve determinar a ação. Use KeyboardEvent.code quando a posição física da tecla for o controle pretendido. Deixe essa escolha explícita e teste outros layouts.
Por que limpar as teclas mantidas quando a página perde o foco?
Depois que o foco muda, o navegador pode não enviar ao jogo o evento de liberação keyup. Limpar o estado de entrada evita que o movimento continue ativo quando a pessoa voltar.
Leitura complementar
Viu alguma informação desatualizada? Informar uma correção