-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
118 lines (113 loc) · 4.31 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
108
109
110
111
112
113
114
115
116
117
118
'use strict';
//import 'core-js/stable';
//import 'regenerator-runtime/runtime';
//<<<Selecting elements>>>
const player0Element = document.querySelector(`.player--0`);
const player1Element = document.querySelector(`.player--1`);
const score0Element = document.querySelector(`#score--0`);
const score1Element = document.getElementById(`score--1`);
const current0Element = document.getElementById(`current--0`);
const current1Element = document.getElementById(`current--1`);
const diceElement = document.querySelector('.dice');
const btnNew = document.querySelector('.btn--new');
const btnRoll = document.querySelector(`.btn--roll`);
const btnHold = document.querySelector(`.btn--hold`);
//<<<Starting conditions>>>
// score0Element.textContent = 0;
// score1Element.textContent = 0;
// diceElement.classList.add('hidden');
//<<<initializing the game
let scores, currentScore, activePlayer, playing;
const initializeGame = function () {
scores = [0, 0];
currentScore = 0;
activePlayer = 0;
playing = true;
score0Element.textContent = 0;
score1Element.textContent = 0;
current0Element.textContent = 0;
current1Element.textContent = 0;
diceElement.classList.add('hidden');
player0Element.classList.remove(`player--winner`);
player1Element.classList.remove(`player--winner`);
player0Element.classList.add(`player--active`);
player1Element.classList.remove(`player--active`);
};
initializeGame();
//<<<FInishing the game>>>
//<<<switch active palyer function>>>
const switchActivePlayer = function () {
document.getElementById(`current--${activePlayer}`).textContent = 0;
activePlayer = activePlayer === 0 ? 1 : 0;
currentScore = 0;
//changing the background of the player on switching
player0Element.classList.toggle(`player--active`);
player1Element.classList.toggle(`player--active`);
};
//<<<rolling dice functionality>>>
btnRoll.addEventListener(`click`, function () {
if (playing) {
//generate a random dice roll
const dice = Math.trunc(Math.random() * 6) + 1;
//display result
diceElement.classList.remove(`hidden`);
diceElement.src = `dice-${dice}.png`;
//check if not 1 => scrore = 0 or roll again
if (dice !== 1) {
//Add dice to current score
currentScore += dice;
document.getElementById(`current--${activePlayer}`).textContent =
currentScore;
//current0Element.textContent = currentScore; //Change later to display the current player!!!
} else {
// //switch to next player
// document.getElementById(`current--${activePlayer}`).textContent = 0;
// activePlayer = activePlayer === 0 ? 1 : 0;
// currentScore = 0;
// //changing the background of the player on switching
// player0Element.classList.toggle(`player--active`);
// palyer1Element.classList.toggle(`player--active`);
switchActivePlayer();
}
}
});
btnHold.addEventListener('click', function () {
if (playing) {
console.log(`Hold Button`);
//add current score to the score of the active player and check if score is 100 => finish game, if !not => switch to next player
scores[activePlayer] += currentScore;
console.log(scores[activePlayer]);
document.getElementById(`score--${activePlayer}`).textContent =
scores[activePlayer];
//check if players score is >=100
if (scores[activePlayer] >= 100) {
//Game is won!
playing = false;
diceElement.classList.add('hidden');
document
.querySelector(`.player--${activePlayer}`)
.classList.add(`player--winner`);
document
.querySelector(`.player--${activePlayer}`)
.classList.remove(`player--active`);
} else {
switchActivePlayer();
}
}
});
//<<<Resetting the game>>>
btnNew.addEventListener('click', initializeGame);
//hide the dice and set the value to 0
//diceElement.classList.add('hidden');
//console.log((document.querySelector('dice').value = 0));
//reset both total scores to 0
// document.getElementById(`score--0`).textContent = 0;
// document.getElementById(`score--1`).textContent = 0;
//reset each player score to zero
//document.querySelector(`.current-score`).textContent = 0;
//make player 1 active again
// document
// .querySelector(`.player--${activePlayer}`)
// .classList.remove(`player--winner`);
// document.querySelector(`.player--0`).classList.add(`player--active`);
// playing = true;