-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
107 lines (89 loc) · 4.14 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
const Score1 = document.querySelector('#playerRecentScore1');
const Score2 = document.querySelector('#playerRecentScore2');
const dice = document.querySelector('#dice');
const rollDiceBtn = document.querySelector('#rollDiceBtn');
const newGameBtn = document.querySelector('#newGameBtn');
const currentScore1 = document.getElementById('playerCurrentScore1');
const currentScore2 = document.getElementById('playerCurrentScore2');
// Starting conditions
Score1.textContent = 0;
Score2.textContent = 0;
dice.classList.add('hidden');
let currentScore = 0;
let activePlayer = 1;
// Switch player function
const switchPlayer = function () {
document.getElementById(`playerCurrentScore${activePlayer}`).textContent = 0;
currentScore = 0;
activePlayer = activePlayer === 1 ? 2 : 1;
Score1.classList.toggle('player--active');
Score2.classList.toggle('player--active');
}
// Roll dice button event listener
rollDiceBtn.addEventListener('click', function () {
// Generate a dice roll
const diceNumber = Math.trunc(Math.random() * 6) + 1;
// Display dice
dice.classList.remove('hidden');
dice.src = `images/dice-${diceNumber}.png`;
// Check if diceNumber != 1, add the dice number to the current score
if (diceNumber !== 1) {
// Add the dice to the current score
currentScore += diceNumber;
document.getElementById(`playerCurrentScore${activePlayer}`).textContent = currentScore;
} else {
// If diceNumber is 1, reset current score to 0 and switch player
switchPlayer();
}
});
const holdBtn = document.querySelector('#holdBtn');
// Hold button event listener
holdBtn.addEventListener('click', function () {
// Your existing logic to calculate recent score and switch player goes here
// Update the recent score for the active player
let recentScore = parseInt(document.getElementById(`playerRecentScore${activePlayer}`).textContent);
recentScore += currentScore;
document.getElementById(`playerRecentScore${activePlayer}`).textContent = recentScore;
// Reset the current score to zero
currentScore = 0;
// Update the current score display to zero
document.getElementById(`playerCurrentScore${activePlayer}`).textContent = currentScore;
// Check if player score is >= 20
if (recentScore >= 20) {
// Remove original gradient background class
document.getElementById('game-container').classList.remove('bg-gradient-to-br', 'from-pink-500', 'to-gray-200');
// Add new background color class
document.getElementById('game-container').classList.add('bg-gradient-custom');
// Change background color of body
document.getElementById('game-container').classList.remove('bg-gradient-to-br', 'from-blue-500', 'to-purple-700');
document.body.classList.add('bg-gradient-winner'); // Corrected to use classList.add method
// Display congratulatory message
const congratulationsMessage = document.createElement('div');
congratulationsMessage.textContent = 'Congratulations 🎉';
congratulationsMessage.classList.add('congratulations-message');
document.body.appendChild(congratulationsMessage);
// Disable rollDiceBtn and holdBtn
rollDiceBtn.disabled = true;
holdBtn.disabled = true;
} else {
// Switch to the next player
switchPlayer();
}
});
newGameBtn.addEventListener('click', function () {
Score1.textContent = 0;
Score2.textContent = 0;
dice.classList.add('hidden');
currentScore1.textContent = 0;
currentScore2.textContent = 0;
document.getElementById('game-container').classList.add('bg-gradient-to-br', 'from-pink-500', 'to-gray-200');
document.getElementById('game-container').classList.remove('bg-gradient-custom');
document.getElementById('game-container').classList.add('bg-gradient-to-br', 'from-blue-500', 'to-purple-700');
document.body.classList.remove('bg-gradient-winner');
const congratulationsMessage = document.querySelector('.congratulations-message');
if (congratulationsMessage) {
congratulationsMessage.remove();
}
rollDiceBtn.disabled = false;
holdBtn.disabled = false;;
})