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>
No comments:
Post a Comment