I’ve created a small project resembling the Pig Game. I wanted to add to the game the possibility of keeping track of how many games a player has won. It works fine with the first game, but when I click on the NEW GAME button and start a new game, the game won counter doesn’t increase and stays at 1, although the rest of the game works just fine.
Furthermore, I would like that when the score of 20 is reached, the game switches itself to “YOU WON” without me clicking on the holding button to pass the current score to the total score and win the game.
JAVASCRIPT CODE
// selecting elements
const player0El = document.querySelector('.player--0');
const player1El = document.querySelector('.player--1');
const score0El = document.querySelector('#score--0');
const score1El = document.getElementById('score--1');
const game0El = document.getElementById("games--0");
const game1El = document.getElementById("games--1");
const current0El = document.getElementById('current--0');
const current1El = document.getElementById('current--1');
const diceEl = document.querySelector('.dice');
const newShowEl = document.querySelector(".fa-flip");
const rulesShowEl = document.querySelector(".fa-shake");
const holdShowEl = document.querySelector(".fa-beat");
const rollShowEl = document.querySelector(".fa-spin");
const btnNew = document.querySelector('.btn-new');
const btnRoll = document.querySelector('.btn-roll');
const btnHold = document.querySelector('.btn-hold');
let scores, currentScore, activePlayer, games, playing;
// starting conditions
const init = function () {
scores = [0, 0];
currentScore = 0;
activePlayer = 0;
games = 0;
playing = true;
score0El.textContent = 0;
score1El.textContent = 0;
current0El.textContent = 0;
current1El.textContent = 0;
diceEl.classList.add('hidden');
player0El.classList.remove('player--winner');
player1El.classList.remove('player--winner');
player0El.classList.add('player--active');
player1El.classList.remove('player--active');
document.getElementById(`name--${activePlayer}`).textContent = `PLAYER ${activePlayer === 0 ? "1" : "2"}`;
btnRoll.removeAttribute("disabled");
btnHold.removeAttribute("disabled");
newShowEl.classList.remove("fa-flip");
rulesShowEl.classList.add("fa-shake");
rollShowEl.classList.add("fa-spin");
holdShowEl.classList.remove("fa-beat");
};
init();
// switch player function
const switchPlayer = function () {
document.getElementById(`current--${activePlayer}`).textContent = 0;
currentScore = 0;
activePlayer = activePlayer === 0 ? 1 : 0;
player0El.classList.toggle('player--active');
player1El.classList.toggle('player--active');
};
// rolling dice functionality
btnRoll.addEventListener('click', function () {
newShowEl.classList.add("fa-flip");
rulesShowEl.classList.remove("fa-shake");
holdShowEl.classList.add("fa-beat");
if (playing) {
// generating a random dice roll
const dice = Math.trunc(Math.random() * 6) + 1;
// display the dice
diceEl.classList.remove('hidden');
diceEl.src = `images/dice-${dice}.png`;
// check for rolled 1
if (dice !== 1) {
// add dice to current score
currentScore += dice;
document.getElementById(`current--${activePlayer}`).textContent = currentScore;
} else {
// switch to next player
switchPlayer();
}
}
});
// holding dice functionality
btnHold.addEventListener('click', function () {
if (playing) {
// add current score to active player's score
scores[activePlayer] += currentScore;
document.getElementById(`score--${activePlayer}`).textContent = scores[activePlayer];
// check if player's score is >= 100
if (scores[activePlayer] >= 20) {
// finish the game
playing = false;
diceEl.classList.add('hidden');
document.querySelector(`.player--${activePlayer}`).classList.add('player--winner');
document.querySelector(`.player--${activePlayer}`).classList.remove('player--active');
document.getElementById(`name--${activePlayer}`).textContent = "You won!";
newShowEl.classList.add("fa-flip");
rollShowEl.classList.remove("fa-spin");
holdShowEl.classList.remove("fa-beat");
btnRoll.setAttribute("disabled", true);
btnHold.setAttribute("disabled", true);
current0El.textContent = 0;
current1El.textContent = 0;
if (activePlayer === 0) {
games++;
game0El.textContent = "Games won: " + games;
} else if (activePlayer === 1) {
games++;
game1El.textContent = "Games won: " + games;
}
} else {
// switch to the next player
switchPlayer();
}
}
});
// refresh functionality
btnNew.addEventListener('click', init);
HTML CODE
<body>
<div class="container-fluid">
<main>
<section id="left" class="player player--0 player--active">
<h1 class="name" id="name--0">Player 1</h1>
<h2 class="score" id="score--0">42</h2>
<p id="games--0">Games won: 0</p>
<div class="current rounded">
<p class="current-label">Current</p>
<p class="current-score" id="current--0">0</p>
</div>
</section>
<section id="right" class="player player--1">
<h1 class="name" id="name--1">Player 2</h1>
<h2 class="score" id="score--1">72</h2>
<p id="games--1">Games won: 0</p>
<div class="current rounded">
<p class="current-label">Current</p>
<p class="current-score" id="current--1">0</p>
</div>
</section>
<img src="images/dice-5.png" alt="Playing dice" class="dice img-fluid rounded" />
<button class="btn btn-light btn-sm btn-new"><i class="fa-solid fa-circle-plus fa-flip"></i> New game</button>
<button class="btn btn-light btn-sm btn-rules" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"><i class="fa-solid fa-book-open fa-shake"></i> Rules</button>
<button class="btn btn-light btn-sm btn-roll"><i class="fa-solid fa-arrows-rotate fa-spin"></i> Roll dice</button>
<button class="btn btn-light btn-sm btn-hold"><i class="fa-solid fa-circle-arrow-down fa-beat"></i> Hold</button>
</main>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h4 id="offcanvasRightLabel" class="offcanvas-title">Rules</h4>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<h5>You don't know how to play? Don't worry! Read the following instructions and have fun!</h5>
<ul class="offcanvas-ul">
<li>Roll the dice and <strong>add the number to your current score</strong>. You can either:</li>
<ul>
<li><strong>Keep rolling</strong>, adding new points to your current score</li>
<li><strong>Hold</strong>, adding your points to your total score</li>
</ul>
<li>If you roll a <strong>one (1)</strong>, you lose all your current points</li>
<li>Who first reaches <strong>100 points</strong>, wins the game</li>
</ul>
</div>
</div>
</div>
<footer>
<a href="https://www.facebook.com/people/Diana-DEstefano/100012558701947/" target="_blank"><i class="fa-brands fa-facebook-square footer-img"></i></a>
<a href="https://www.instagram.com/destefanodiana99/?r=nametag" target="_blank"><i class="fa-brands fa-instagram-square footer-img"></i></a>
<a href="https://www.linkedin.com/in/diana-d%E2%80%99estefano-118367174/" target="_blank"><i class="fa-brands fa-linkedin footer-img"></i></a>
<a href="https://github.com/dlipianin" target="_blank"><i class="fa-brands fa-github-square footer-img"></i></a>
<p class="p-footer">Diana D'Estefano. All rights reserved.</p>
</footer>
<script src="script.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>