0
respostas

Consertando o placar de um jogo

Olá, estou terminando esse jogo mas não sei como fazer o contador do placar adicionar mais um ponto ao placar, não 7 ou 8 de uma vez. Como eu arrumo isso?

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="style_mario.css">
        <title>Super Mario - StartSe</title>
    </head>
    <body>
        <div class="game">
            <div id= "score"></div> 
            <img class="clouds-gamer" src="./images/clouds-gamer.png"/>
            <img class="super-mario" src="./images/super-mario.gif"/>
            <img class="pipe-game" src="./images/pipe-game.png"/>
        </div>

        <audio src="./sons/mario_death.mp3" id="mario_death"></audio>
        <audio src="./sons/mario_coin.mp3" id="mario_coin"></audio>


        <script src="main_mario.js"></script>
    </body>
</html>

JavaScript:

const mario = document.querySelector(".super-mario");
const pipe = document.querySelector(".pipe-game"); 

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

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

function tocaMarioDeath(){
    document.querySelector("#mario_death").play();
};
function tocaMarioCoin(){
    document.querySelector("#mario_coin").play();
};

const jump = () => {
    mario.classList.add("jump-mario"); 

    setTimeout(() =>{
        mario.classList.remove("jump-mario");
    }, 500); 
};

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

        tocaMarioDeath();

        clearInterval(loopGame);

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

        tocaMarioCoin();
        updated();

    };

}, 10);

document.addEventListener("keydown", jump);

link to the page:

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