JavaScript: Add score to saved score-CodePudding

So you'll find an if-statement marked in the snippet to inspect. If you run the snippet you'll notice the score adds when the character meets the coin. When the character is not at the coin, the score then returns to 0.

How can we save the score until 'isTouching()' is true again? Adding to it again and again, each time the coin is met. To confirm, the coin is supposed to move.

Thank you!

function isTouching(a, b) {
    const aRect = a.getBoundingClientRect();
    const bRect = b.getBoundingClientRect();

    return !(
        aRect.top   aRect.height < bRect.top ||
        aRect.top > bRect.top   bRect.height ||
        aRect.left   aRect.width < bRect.left ||
        aRect.left > bRect.left   bRect.width
    );
    
}

const avatar = document.querySelector('#player');
const coin = document.querySelector('#coin');


window.addEventListener('keyup', function(event){
    if(event.key==='ArrowDown' || event.key==='Down'){
        const currTop = extractPos(avatar.style.top);
        avatar.style.top = `${currTop   50}px`;
    }
    else if (event.key === 'ArrowUp' || event.key === 'Up'){
        const currTop = extractPos(avatar.style.top);
        avatar.style.top = `${currTop - 50}px`;
    }
    else if (event.key === 'ArrowRight' || event.key === 'Right'){
        const currLeft = extractPos(avatar.style.left);
        avatar.style.left = `${currLeft   50}px`;
        avatar.style.transform = 'scale(1,1)';
    }
    else if (event.key === 'ArrowLeft' || event.key === 'Left'){
        const currLeft = extractPos(avatar.style.left);
        avatar.style.left = `${currLeft - 50}px`;
        avatar.style.transform = 'scale(-1,1)';
    };
////////////////////////////////////////////////////////////////////////
    const scoreLabel = document.querySelector('#score');
    let scoreCount = 0;
    if (isTouching(avatar, coin)) {
        scoreCount  ;
    };
    scoreLabel.textContent = scoreCount;

    if(isTouching(avatar, coin)) moveCoin();
    });
/////////////////////////////////////////////////////////////////////////



const extractPos = (position) => {
    if (!position) return 50;
    return parseInt(position.slice(0,-2))
};



const moveCoin = () => {
    const y = Math.floor(Math.random()*window.innerWidth)
    const x = Math.floor(Math.random()*window.innerHeight)
    coin.style.top = `${y}px`;
    coin.style.left = `${x}px`;
};
moveCoin();

#player {
    width: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}

#coin {
    width: 100px;
    position: absolute;
    top: 150px;
    left: 50px;
}

#scoreBoard {
    width: 20px;
    position: absolute;
    top: 50px;
    left: 20px;
    border: 8px solid #FFD700;
}

label {
    text-align: center;
    margin-left: 6px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Coin Game</title>
  <link rel="stylesheet" href="app.css">
</head>

<body>
  <img id="player" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">
  <img id="coin" src="https://i.ya-webdesign.com/images/coin-gif-png-7.gif" alt="">

<div id="scoreBoard">
  <label id="score">0</label>
</div>

  <script src="app.js"></script>
</body>

</html>

CodePudding user response：

The variable let scoreCount = 0; is defined inside the event listener and once the event finishes and the variable is destructed with the value.

Simplest solution is to move let scoreCount = 0; to after const coin = document.querySelector('#coin'); directly as below

function isTouching(a, b) {
    const aRect = a.getBoundingClientRect();
    const bRect = b.getBoundingClientRect();

    return !(
        aRect.top   aRect.height < bRect.top ||
        aRect.top > bRect.top   bRect.height ||
        aRect.left   aRect.width < bRect.left ||
        aRect.left > bRect.left   bRect.width
    );
    
}

const avatar = document.querySelector('#player');
const coin = document.querySelector('#coin');
    let scoreCount = 0;


window.addEventListener('keyup', function(event){
    if(event.key==='ArrowDown' || event.key==='Down'){
        const currTop = extractPos(avatar.style.top);
        avatar.style.top = `${currTop   50}px`;
    }
    else if (event.key === 'ArrowUp' || event.key === 'Up'){
        const currTop = extractPos(avatar.style.top);
        avatar.style.top = `${currTop - 50}px`;
    }
    else if (event.key === 'ArrowRight' || event.key === 'Right'){
        const currLeft = extractPos(avatar.style.left);
        avatar.style.left = `${currLeft   50}px`;
        avatar.style.transform = 'scale(1,1)';
    }
    else if (event.key === 'ArrowLeft' || event.key === 'Left'){
        const currLeft = extractPos(avatar.style.left);
        avatar.style.left = `${currLeft - 50}px`;
        avatar.style.transform = 'scale(-1,1)';
    };
////////////////////////////////////////////////////////////////////////
    const scoreLabel = document.querySelector('#score');
    if (isTouching(avatar, coin)) {
        scoreCount  ;
    };
    scoreLabel.textContent = scoreCount;

    if(isTouching(avatar, coin)) moveCoin();
    });
/////////////////////////////////////////////////////////////////////////



const extractPos = (position) => {
    if (!position) return 50;
    return parseInt(position.slice(0,-2))
};



const moveCoin = () => {
    const y = Math.floor(Math.random()*window.innerWidth)
    const x = Math.floor(Math.random()*window.innerHeight)
    coin.style.top = `${y}px`;
    coin.style.left = `${x}px`;
};
moveCoin();

#player {
    width: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}

#coin {
    width: 100px;
    position: absolute;
    top: 150px;
    left: 50px;
}

#scoreBoard {
    width: 20px;
    position: absolute;
    top: 50px;
    left: 20px;
    border: 8px solid #FFD700;
}

label {
    text-align: center;
    margin-left: 6px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Coin Game</title>
  <link rel="stylesheet" href="app.css">
</head>

<body>
  <img id="player" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">
  <img id="coin" src="https://i.ya-webdesign.com/images/coin-gif-png-7.gif" alt="">

<div id="scoreBoard">
  <label id="score">0</label>
</div>

  <script src="app.js"></script>
</body>

</html>

CodePudding user response：

The score is getting initialized to 0 every time the listener runs, instead, you can use a global variable or you could save the score as textContent of the id with id "score".

Another small improvement would be to do the moveCoin and increment score in the same if (isTouching) block instead of two if blocks

function isTouching(a, b) {
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();

return !(
    aRect.top   aRect.height < bRect.top ||
    aRect.top > bRect.top   bRect.height ||
    aRect.left   aRect.width < bRect.left ||
    aRect.left > bRect.left   bRect.width
);
}

const avatar = document.querySelector('#player');
const coin = document.querySelector('#coin');

window.addEventListener('keyup', function (event) {
if (event.key === 'ArrowDown' || event.key === 'Down') {
    const currTop = extractPos(avatar.style.top);
    avatar.style.top = `${currTop   50}px`;
} else if (event.key === 'ArrowUp' || event.key === 'Up') {
    const currTop = extractPos(avatar.style.top);
    avatar.style.top = `${currTop - 50}px`;
} else if (event.key === 'ArrowRight' || event.key === 'Right') {
    const currLeft = extractPos(avatar.style.left);
    avatar.style.left = `${currLeft   50}px`;
    avatar.style.transform = 'scale(1,1)';
} else if (event.key === 'ArrowLeft' || event.key === 'Left') {
    const currLeft = extractPos(avatar.style.left);
    avatar.style.left = `${currLeft - 50}px`;
    avatar.style.transform = 'scale(-1,1)';
}
////////////////////////////////////////////////////////////////////////
if (isTouching(avatar, coin)) {
    incrementScore();
    moveCoin();
}
});
/////////////////////////////////////////////////////////////////////////

const incrementScore = () => {
  const score = Number(document.getElementById('score').textContent);
  document.getElementById('score').textContent = score   1;
};

const extractPos = (position) => {
  if (!position) return 50;
  return parseInt(position.slice(0, -2));
};

const moveCoin = () => {
  const y = Math.floor(Math.random() * window.innerWidth);
  const x = Math.floor(Math.random() * window.innerHeight);
  coin.style.top = `${y}px`;
  coin.style.left = `${x}px`;
};

moveCoin();

#player {
    width: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}

#coin {
    width: 100px;
    position: absolute;
    top: 150px;
    left: 50px;
}

#scoreBoard {
    width: 20px;
    position: absolute;
    top: 50px;
    left: 20px;
    border: 8px solid #FFD700;
}

label {
    text-align: center;
    margin-left: 6px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Coin Game</title>
  <link rel="stylesheet" href="app.css">
</head>

<body>
  <img id="player" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">
  <img id="coin" src="https://i.ya-webdesign.com/images/coin-gif-png-7.gif" alt="">

<div id="scoreBoard">
  <label id="score">0</label>
</div>

  <script src="app.js"></script>
</body>

</html>