Javascript Class Implementation

Question

Guys, I recently developed a game of raisin or repassa procedural (the code is ridiculous). I’m trying to improve it to put in my portfolio. I’m trying to implement with object orientation, would it be the case or just an improvement in the code is enough? If the most suitable is to use OO, I am doing it correctly, logically and syntactically?

How are you (working):

$(document).ready(function (){

  var i = 0;//Usada para passar as perguntas
  var valorPergunta = 50;//armazena o valor valor da pergunta, pode ser alterado quando uma equipe passar.
  var vez = Math.floor((Math.random() * 2) + 1); //Define a equipe que começa o jogo
  var pontoum = 0; //pontos da equipe1
  var pontodois = 0; //pontos da equipe2
  var passadas = 0;
  $('#valor_pergunta').html(valorPergunta);
  $('#pontoum').html(pontoum);
  $('#pontodois').html(pontodois);
  $('#pagadesafio').prop('disabled', true);

  jQuery.ajax({
        url: 'consulta.php' + location.search,
        type: "GET",
        dataType: 'json',
        success: function(returnjson) {
          /*Coloquei tudo nessa maldita função porque a merda do JSON SÓ FUNCIONA DENTRO DA MERDA DO escopo do ajax
           ENTÃO VAI ASSIM MESMO.
          */
          //Exibe os dados de primeira
          $('#id_pergunta').html(returnjson[i].id_pergunta);
          $('#pergunta_jogo').html(returnjson[i].pergunta);
          $('#desafio_jogo').html(returnjson[i].desafio);
          $('#resposta_jogo').html(returnjson[i].resposta);
          $('#equipeum').prepend(returnjson.equipeum);
          $('#equipedois').prepend(returnjson.equipedois);
          if (vez === 1){
            alert("A Equipe " + returnjson.equipeum + " iniciará o jogo");
          } else{
            alert("A Equipe " + returnjson.equipedois + " iniciará o jogo");
          }


          function timer(){
            segundos = 60;
            var intervalo = setInterval(conta, 1000);
               function conta() {
               segundos--;
               $('#timer').html(segundos);
              //proxima();

            if (segundos <= 40 && segundos>=20){
              $('#gatilho').addClass("btn btn-warning");
            } else if(segundos<=20 ){
              $('#gatilho').addClass("btn btn-danger");

            }
            if (segundos === 0 && vez === 1 && passadas === 0){
              Alert("A equipe "+returnjson.equipeum+ " deve passar ou responder a pergunta.");
              clearInterval(intervalo);
           }
           else if (segundos === 0 && vez === 2 && passadas === 0){
             Alert("A equipe "+returnjson.equipedois+ " deve passar ou responder a pergunta.");
             clearInterval(intervalo);
           }
           else if (segundos === 0 && vez === 1 && passadas === 1){
             Alert("A pergunta não pode mais ser passada, a equipe "+returnjson.equipedois+ " deve passar ou responder a pergunta.");
             clearInterval(intervalo);
           }
           else if (segundos === 0 && vez === 2 && passadas === 1){
             Alert("A vez foi passada para:");
             clearInterval(intervalo);
           }
        }
      }

          function proxima(){

            var json = Object.keys(returnjson).length - 3;//Menos dois pq ele recebe as equipes no mesmo json

            $('#respondidas').html(i);
            $('#total').html(json);

            passadas = 0;
            valorPergunta = 50;
            $('#valor_pergunta').html(valorPergunta);
            i++;
            $('#id_pergunta').html(returnjson[i].id_pergunta);
            $('#pergunta_jogo').html(returnjson[i].pergunta);
            $('#desafio_jogo').html(returnjson[i].desafio);
            $('#resposta_jogo').html(returnjson[i].resposta);
            $('#pagadesafio').prop('disabled', true);
            $('#proxima').prop('disabled', false);
            $('#acertar').prop('disabled', false);
            $('#passar').prop('disabled', false);
            $('#pagadesafio').prop('disabled', true);
          }


      function passaVez() {
/*         switch (vez) {
           case 1:
             valorPergunta = valorPergunta + 50;
             $('#valor_pergunta').html(valorPergunta);
             passadas++;
             vez = 2;
          break;
           case 2:
             valorPergunta = valorPergunta + 50;
             $('#valor_pergunta').html(valorPergunta);
             passadas++;
             vez = 1;
           break;
}*/
        if (vez === 1 && passadas === 0) {
          alert("Pergunta Passada para a equipe" + returnjson.equipedois);
          valorPergunta = valorPergunta + 50;
          $('#valor_pergunta').html(valorPergunta);
          passadas++;
          vez = 2;
        }

        else if (vez === 2 && passadas === 0){
          alert("Pergunta Passada para a equipe" + returnjson.equipeum);
          valorPergunta = valorPergunta + 50;
          $('#valor_pergunta').html(valorPergunta);
          passadas++;
          vez = 1;
        }

        else if (vez == 1 && passadas == 1){
                alert("A pergunta já foi passada 2 vezes, a equipe " + returnjson.equipedois + " terá de pagar o desafio");
                $('#proxima').prop('disabled', true);
                $('#acertar').prop('disabled', true);
                $('#passar').prop('disabled', true);
                $('#pagadesafio').prop('disabled', false);
                valorPergunta = 50;
                $('#valor_pergunta').html(valorPergunta);
                passadas = 0;
                vez = 2;
            }
        else if (vez == 2 && passadas == 1 ){
                alert("A pergunta já foi passada 2 vezes, a equipe " + returnjson.equipeum + " terá de pagar o desafio");
                $('#proxima').prop('disabled', true);
                $('#acertar').prop('disabled', true);
                $('#passar').prop('disabled', true);
                $('#pagadesafio').prop('disabled', false);
                valorPergunta = 50;
                $('#valor_pergunta').html(valorPergunta);
                passadas = 0;
                vez = 1;
            }
          }

          function pagarDesafio(){
             switch (vez) {
               case 1:
                 $('#pontoum').html(pontoum = pontoum + valorPergunta);
                 valorPergunta = 0;
                 vez = 2;
                 proxima();
               break;
               case 2:
                 $('#pontodois').html(pontodois = pontodois + valorPergunta);
                 valorPergunta = 0;
                 vez = 1;
                 proxima();
               break;

             }

          }
          function acertar(){
                 if (vez === 1){
                   pontoum = pontoum + valorPergunta;
                   $('#pontoum').html(pontoum);
                   vez = 1;
                   proxima();
                   return true;
                 } else{
                   pontodois = pontodois + valorPergunta;
                   $('#pontodois').html(pontodois);
                   vez = 2;
                   proxima();
                   return true;
                 }
               }

               function errar(){
                 if (vez === 1){
                   alert("A equipe " +returnjson.equipeum+ " errou, ponto para a equipe "+returnjson.equipedois);
                   pontodois = pontodois + valorPergunta;
                   $('#pontodois').html(pontodois);
                   vez = 2;
                   proxima();
                   //proxima();
                 } else {
                   alert("A equipe " +returnjson.equipedois+ " errou, ponto para a equipe "+returnjson.equipeum);
                   pontoum = pontoum + valorPergunta;
                   $('#pontoum').html(pontoum);
                   vez = 1;
                   proxima();
                 }
               }
           function defineVencedor (){
             if (i == json && pontoum > pontodois){

               alert ("A equipe" +returnjson.equipeum+ " venceu o jogo!")
             } else if (i == json && pontodois > pontoum){
               alert("A equipe" +returnjson.equipedois+ " venceu o jogo!")
             } else if (i == json && pontodois == pontoum){
               alert("Deu empate");
             }
           }


          //Função que troca a vez de jogar ao clicar no botão passar
          $('#passar').click(function trocaVez(){
            passaVez();
          });
          $('#pagadesafio').click(function pagaDesafio(){
            pagarDesafio();
          });

          $('#acertar').click(function acertarPergunta(){
            acertar();
          });

          $('#errar').click(function errarPergunta(){
            errar();
          });

          $('#gatilho').click(function contarTempo(){
            timer();
          });


        },
        error: function(returnjson) {
            alert("Erro interno do servidor");
            window.location = 'Index.php';
        }
    });


 });

Class I’m trying to implement:

class equipe {
  var nome;
  var pontos;
  var vez;
  var acertos = 0;
  var erros = 0;
  var desafios = 0;

  function passaVez(){
   //A vez tem que ser passada para a outra instância do objeto equipe ao ser clicado no botão
  }

  function acertar(pergunta){
    this.ponto = this.ponto + pergunta;
    this.acertos++;
  }

  function errar(){
    this.erros++;
    passaVez();
  }

  function pagaDesafio(pergunta){
    this.desafios++;
    acertar(pergunta);
  }

  function get pontos(){
    return this.pontos;
  }

  function get erros(){
    return this.erros;
  }

  function get acertos(){
    return this.acertos;
  }
  function get desafios(){
    return this.desafios;
  }

}

Answer 1

Hello, Thiago

Although ES6 allows the creation of classes, Javascript is still a functional paradigm language. The introduction of ES6 arose from the need for Javascript to communicate with data, Apis, among others. Therefore, the use of classes (which is just one of the wonderful features introduced by ES6) is recommended where there is need to reuse code, make your code more testable, among others.

As for your class, I suggest the following:

class Equipe {
  constructor(args) {
    this.nome = args.nome;
    this.pontos = args.pontos;
    this.vez = args.vez;
    this.acertos = 0;
    this.erros = 0;
    this.desafios = 0;
  }

  passaVez() {
    // TODO
  }

  acertar(pergunta){
    this.ponto = this.ponto + pergunta;
    this.acertos++;
  }

  errar(){
    this.erros++;
    this.passaVez();
  }

  pagaDesafio(pergunta){
    this.desafios++;
    this.acertar(pergunta);
  }

  get pontos(){
    return this.pontos;
  }

  get erros(){
    return this.erros;
  }

  get acertos(){
    return this.acertos;
  }

  get desafios(){
    return this.desafios;
  }
}