2

Pessoal estou tentando criar um jogo do tipo snake para dois jogadores e do jeito que eu programei para movimentar as cobras eu gostaria de usar 'wsad' para o player 1 e as setas no player 2

//--- JOGADOR 1 APERTA TECLA
function apertoTecla1(tecla){
    const novaDirecao1 = tecla.key
    direcao1 = novaDirecao1
    console.log("direçao1: " + direcao1)
    console.log("Direçao2: " + direcao2)

}
//--- JOGADOR 2 APERTA TECLA
function apertoTecla2(tecla){
    const novaDirecao2 = tecla.key
    direcao2 = novaDirecao2
}

window.addEventListener('keydown', apertoTecla1)
window.addEventListener('keydown', apertoTecla2)

Adicioei um console.log para ver oque estava acontecendo quando aperto as teclas porque as duas cobras não se movimentam ao mesmo tempo, e reparei que minha direcao1 e direcao2 recebem a entrada do teclado por causa dos

window.addEventListener('keydown', apertoTecla1)
window.addEventListener('keydown', apertoTecla2)

eu imagino. Existe algum jeito de conseguir que os dois jogadores se movimentem ao mesmo tempo?

1

1 Resposta 1

6

Se eu entendi, você descobrir como implementar o evento onKeyDown para descobrir a escolha de direção dos jogadores.

Você pode fazer isso com apenas um evento, basta você reconhecer de quem é a tecla. Vamos quebrar seu trabalho em etapas, veja abaixo:

  1. Primeiro passo definir as teclas dos jogadores você já fez, então vamos colocar as teclas escolhidas em arrays separadas:
var JogadorUmKeys=['w','d','s','a'],
    JogadorDoisKeys=['ArrowUp','ArrowRight','ArrowDown','ArrowLeft'];

  /// ; A posição em que as keys estão, foi para 
  /// ;  pensa no índice deles como o relógio começando pelas 12H/0H:
  /// ;  INDICE/DIRECAO |  POS RELOGIO  | KEY
  /// ;  ---------------+---------------+------------
  /// ;          0      |     12H       | UP   , W
  /// ;          1      |      3H       | RIGHT, D
  /// ;          2      |      6H       | DOWN , S
  /// ;          3      |      9H       | LEFT , A
  1. Criar a função de mudança de direção (poderia ser duas funções uma para o jogadorUm e outra para o jogadorDois), vamos fazer ela receber:
    • Quem vai mudar direcao
    • A nova direcao
    • A key que foi teclada
function onJogadorMudaDirecao( jogador, direcao, key ){
    console.log( 'JOGADOR:', jogador, 'DIRECAO:', direcao, 'KEY:', key );
}
  1. Agora o objetivo da pergunta, criar a função que irá tratar os eventos, ela vai:
    • Receber os eventos de keydown.
    • Identificar se pertence a um jogador
    • E ignorar os que não pertencem a ninguém
function onKeyDown(evento){

    var direcao;
    /// ; `direcao` variável que vai receber o índice da 
    /// ; key que foi teclada.

    if( ( direcao=JogadorUmKeys.indexOf(evento.key) ) != -1 ){

        /// ; evento.key: a key que foi teclada
        /// ; JogadorUmKeys: Array com as keys que o jogadorUm pode jogar
        /// ; Array.indexOf: Função busca determinado valor na array,
        /// ;   retorna o índice desse valor, caso NÃO encontre retorna -1

        /// ; O `if` faz o seguinte: a variavel `direcao` recebe o resultado 
        /// ;  da busca do valor `evento.key` na array (`JogadorUmKeys.indexOf`),
        /// ;  por sua vez verifica se é diferente de -1, ou seja, a teclar foi
        /// ;  encontrada no JogadorUmKeys, isso vai fazer ele entrar no if.

        onJogadorMudaDirecao( 1, direcao, evento.key ); 
        /// ; Chama a função que muda a direção, passando como parâmetro
        /// ; 1 => indicando que é o jogadorUm,
        /// ; direcao => a nova direção
        /// ; event.key => a key que foi teclada.

        return; /// ; para a execução

    }else if( (direcao=JogadorDoisKeys.indexOf(evento.key)) != -1 ){

        /// ; Se a key não era do JogadorUm verifica se é do jogadorDois
        /// ; O if faz a mesma coisa que o primeiro a única variável que foi
        /// ; é a `JogadorDoisKeys`
        /// ; JogadorDoisKeys: Array com as keys que o jogadorDois pode jogar

        onJogadorMudaDirecao( 2, direcao, evento.key );
        /// ; Nessa, o primeiro parâmetro vai ser
        /// ; 2 => indicando que é o jogadorDois
        return;
    }
    /// ; Se não entrar em um dois ifs a tecla apertada não pertence a nenhum jogador
    /// ; então ela é invalida, você pode até colocar um console.log para ver
    console.log('tecla invalida');
    /// ; Aqui poderia ter mais opções Ex.: tecla P para pausar o jogo
}

Veja o esse código funcionando abaixo:

var JogadorUmKeys=['w','d','s','a'],
    JogadorDoisKeys=['ArrowUp','ArrowRight','ArrowDown','ArrowLeft'];
function onKeyDown(evento){
  var direcao;
  if( (direcao=JogadorUmKeys.indexOf(evento.key)) != -1 ){
    onJogadorMudaDirecao( 1, direcao, evento.key ); 
    return;
  }else if( (direcao=JogadorDoisKeys.indexOf(evento.key)) != -1 ){
    onJogadorMudaDirecao( 2, direcao, evento.key );
    return;
  }
  console.log('tecla invalida');
}

function onJogadorMudaDirecao( jogador, direcao, key ){
  console.log( 'JOGADOR:', jogador, 'DIRECAO:', direcao, 'KEY:', key );
}

window.addEventListener('keydown',onKeyDown);

Referencias:

Array.prototype.indexOf(), Element.addEventListener(), KeyboardEvent(), KeyboardEvent.key

1
  • 1
    Muito bem explicado. Commented 13/12/2019 às 19:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .