How can I get my scoreboard to add 1 point at a time, instead of 10?

JavaScript (used intervals cause it was the only thing that worked.):

let placar = setInterval(updated);
let pontuacao = 0;

function updated() {
  var pontos = document.getElementById('score');
  pontos.innerHTML = "score: "   pontuacao  ;
  clearInterval(placar);
}

const loopGame = setInterval(() => {

  const pipePosition = pipe.offsetLeft;
  const marioPosition =  window
    .getComputedStyle(mario)
    .bottom.replace("px", "")

  if (pipePosition <= 120 && pipePosition > 0 && marioPosition < 80) {
    pipe.style.animation = "none";
    pipe.style.left = `${pipePosition}px`;

    mario.style.animation = "none";
    mario.style.bottom = `${marioPosition}px`;

    mario.src = "./images/mario-game-over.png";
    mario.style.width = "75px";
    mario.style.marginLeft = "45px";

    clearInterval(loopGame);

  } else if (pipePosition <= 0 && marioPosition >= 0) {

    updated();

  };

}, 10);

<div >
  <div id="score"></div>
</div>

link to the page:

https://ana-luiza-sampaio.github.io/jogo_mario_game/

CodePudding user response：

You have too many functions. You want this

const pontos = document.getElementById('score');
let pontuacao = 0;

function updated() {
  pontos.innerHTML = "score: "   pontuacao  ;
}

const loopGame = setInterval(() => {
  // if (pipePosition <= 0 && marioPosition >= 0) { 
  //   tocaMarioCoin();

      updated(); // call only when Mario does something that earns a point

  // }
  // else { clearInterval(loopGame);   pontos.innerHTML = "Game over"; }

}, 100);

<div >
  <div id="score"></div>
</div>