-
Notifications
You must be signed in to change notification settings - Fork 0
/
challenges.js
134 lines (112 loc) · 4.67 KB
/
challenges.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/*
YOUR 3 CHALLENGES
Change the game to follow these rules:
1. A player looses his ENTIRE score when he rolls two 6 in a row. After that, it's the next player's turn. (Hint: Always save the previous dice roll in a separate variable)
2. Add an input field to the HTML where players can set the winning score, so that they can change the predefined score of 100. (Hint: you can read that value with the .value property in JavaScript. This is a good oportunity to use google to figure this out :)
3. Add another dice to the game, so that there are two dices now. The player looses his current score when one of them is a 1. (Hint: you will need CSS to position the second dice, so take a look at the CSS code for the first one.)
*/
var scores, roundScore, activePlayer, gamePlaying, lastDice, winScore;
init();
document.querySelector(".btn-roll").addEventListener("click", function() {
if (gamePlaying) {
//1. Random number
var dice1 = Math.floor(Math.random() * 6) + 1;
var dice2 = Math.floor(Math.random() * 6) + 1;
//2. Display result
document.getElementById("dice-1").style.display = "block";
document.getElementById("dice-2").style.display = "block";
document.getElementById("dice-1").src = "dice-" + dice1 + ".png";
document.getElementById("dice-2").src = "dice-" + dice2 + ".png";
//3. Update the roundscore IF the rolled is NOT a 1
if (dice1 !== 1 && dice2 !== 1) {
//Add score
roundScore += dice1 + dice2;
document.querySelector(
"#current-" + activePlayer
).textContent = roundScore;
} else {
//Next player
nextPlayer();
}
// if (dice === 6 && lastDice === 6) {
// //Player looses score
// scores[activePlayer] = 0;
// document.querySelector("#score-" + activePlayer).textContent =
// scores[activePlayer];
// nextPlayer();
// } else if (dice !== 1) {
// //Add score
// roundScore += dice;
// document.querySelector(
// "#current-" + activePlayer
// ).textContent = roundScore;
// } else {
// //Next player
// nextPlayer();
// }
// lastDice = dice;
}
});
document.querySelector(".btn-hold").addEventListener("click", function() {
if (gamePlaying) {
//Add round score & total score
scores[activePlayer] += roundScore;
//Display total score
document.querySelector("#score-" + activePlayer).textContent =
scores[activePlayer];
//Winning score INPUT
var input = document.querySelector(".win-score").value;
//Undefined, 0, null, "" are COERCED to false
//Anything else is COERCED to true
if (input) {
winScore = input;
} else {
winScore = 100;
}
//Check IF its a WIN
if (scores[activePlayer] >= winScore) {
document.querySelector("#name-" + activePlayer).textContent = "Winner!";
document
.querySelector(".player-" + activePlayer + "-panel")
.classList.add("winner");
document
.querySelector(".player-" + activePlayer + "-panel")
.classList.remove("active");
gamePlaying = false;
} else {
//Next Player
nextPlayer();
}
}
});
//Next player
function nextPlayer() {
activePlayer = 1 - activePlayer;
roundScore = 0;
document.getElementById("dice-1").style.display = "none";
document.getElementById("dice-2").style.display = "none";
document.getElementById("current-0").textContent = 0;
document.getElementById("current-1").textContent = 0;
document.querySelector(".player-0-panel").classList.toggle("active");
document.querySelector(".player-1-panel").classList.toggle("active");
}
document.querySelector(".btn-new").addEventListener("click", init);
function init() {
scores = [0, 0];
roundScore = 0;
activePlayer = 0;
gamePlaying = true;
document.getElementById("dice-1").style.display = "none";
document.getElementById("dice-2").style.display = "none";
document.getElementById("score-0").textContent = 0;
document.getElementById("score-1").textContent = 0;
document.getElementById("current-0").textContent = 0;
document.getElementById("current-1").textContent = 0;
document.getElementById("name-0").textContent = "Player 1";
document.getElementById("name-1").textContent = "Player 2";
document.querySelector(".player-0-panel").classList.remove("winner");
document.querySelector(".player-1-panel").classList.remove("winner");
document.querySelector(".player-0-panel").classList.remove("active");
document.querySelector(".player-1-panel").classList.remove("active");
document.querySelector(".player-0-panel").classList.add("active");
}