Infinite variable (javascript)

Question

I’m programming in the: http://alpha.editor.p5js.org

The exercise: whenever the user presses the 'A' key a random number is assigned between 1 and 6 as well as pressing the 'B' key. I need to compare these two numbers in order to figure out which one is bigger and assign 1 point to the user who primed the 'A' or 'B' key respectively.

What happens to me is that when I press the key, in the points part it increases the score infinitely, even before the second user has primed his key and the computer has made the comparison.

var s = "Pontos A";
var r = "Pontos B";
var d1 = 0;
var d2 = 0;
var pontosA = 0;
var pontosB = 0;

function setup() {
  createCanvas(400, 400);

}

function keyPressed() {
  if (keyCode === 65) {
    d1 = 1 + int((6 - 1 + 1) * random());
  } else if (keyCode === 66) {
    d2 = 1 + int((6 - 1 + 1) * random());
  }
  return false;
}

function draw() {
  if (d1 > d2) {
    pontosA = pontosA + 1;
  }
  if (d2 > d1) {
    pontosB = pontosB + 1;
  }
  background(220);
  text(s, 50, 10, 70, 80);
  text(r, 300, 10, 80, 80);

  text(pontosA, 60, 50);
  text(pontosB, 320, 50);
  text(d1, 60, 100);
  text(d2, 320, 100);
}

Answer 1

In the editor you mentioned, http://alpha.editor.p5js.org, the function draw is executed several times per second, whenever it is necessary to update the screen. Soon can not update the points in it, otherwise updates numerous times without user interaction.

The ideal location for this update would then be in function keyPressed, that runs only once, when the user presses the key. Transporting its point update code to the function keyPressed already works:

function keyPressed() {
  if (keyCode === 65) {
    d1 = 1 + int((6 - 1 + 1) * random());

    //atualiza aqui
    if (d1 > d2) { 
        pontosA = pontosA + 1;
    }
    if (d2 > d1) {
        pontosB = pontosB + 1;
    }
  } else if (keyCode === 66) {
    d2 = 1 + int((6 - 1 + 1) * random());

    //e aqui também
    if (d1 > d2) {
        pontosA = pontosA + 1;
    }
    if (d2 > d1) {
        pontosB = pontosB + 1;
    }
  }
  return false;
}

function draw() {
  //sem atualização de pontos aqui
  background(220);
  text(s, 50, 10, 70, 80);
  text(r, 300, 10, 80, 80);

  text(pontosA, 60, 50);
  text(pontosB, 320, 50);
  text(d1, 60, 100);
  text(d2, 320, 100);
}

Note however that there is a certain logic repeated in the code. Whenever you see yourself repeating code it is because you have better way to write it. In this case a better solution would be to transform that repeated code into a function that can call either the user press A or B:

function atualizaPontos(){
  if (d1 > d2) {
    pontosA = pontosA + 1;
  }
  else if (d2 > d1) { //else if em vez de if
    pontosB = pontosB + 1;
  }
}

function keyPressed() {
  if (keyCode === 65) {
    d1 = 1 + int((6 - 1 + 1) * random());
    atualizaPontos(); //atualização dos pontos aqui
  } else if (keyCode === 66) {
    d2 = 1 + int((6 - 1 + 1) * random());
    atualizaPontos(); //atualização dos pontos aqui
  }
  return false;
}

Personally, I would take a further step towards turning the generation of the random number into a function as well. This step makes code simpler, clearer and reusable:

function aleatorioEntre(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function keyPressed() {
  if (keyCode === 65) {
    d1 = aleatorioEntre(1, 6); //gera aleatório de 1 a 6
    atualizaPontos();
  } else if (keyCode === 66) {
    d2 = aleatorioEntre(1, 6); //gera aleatório de 1 a 6
    atualizaPontos();
  }
  return false;
}