addEventListeners Javascript

Question

Guys I’m trying to create a game like Snake for two players and the way I programmed to move the snakes I would like to use 'wsad' for player 1 and arrows in 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)

I added a.log console to see what was happening when I press the keys because the two snakes don’t move at the same time, and noticed that my direction1 and direction2 get the keyboard input because of the

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

I imagine. Is there any way to get the two players to move at the same time?

Answer 1

If I understand, you figure out how to implement the event onKeyDown to find out the players' choice of direction.

You can do this with just one event, you just recognize whose key is. Let’s go break your work in stages, see below:

1. First step set the players' keys you have already made, so let’s put the chosen keys in separate arrays:

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

2. Create the direction change function (could be two functions one for the player one and the other for the player), let’s get her paid:
   • Who will change direction
   • The new direction
   • The key that was keyed

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

3. Now the purpose of the question, create the function that will handle the events, it will:
   • Receive the keydown events.
   • Identify if it belongs to a player
   • And ignore those who belong to no one

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
}

See this code working below:

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);

References:

Array.prototype.indexof(), Element.addeventlistener(), Keyboardevent(), Keyboardevent.key