SHOW:
|
|
- or go back to the newest paste.
1 | //an array storing players' point | |
2 | let points = []; | |
3 | ||
4 | //points that a player scores after each dice roll | |
5 | let roundPoints; | |
6 | ||
7 | //variable controlling players if equal to 0 plays player1 if equal to 1 plays player2 | |
8 | //as in programming we number from 0, player1 will have a value of 0 player2 a value of 1 this will make it easier to retrieve points from the array | |
9 | let currentPlayer; | |
10 | ||
11 | //boolean variable controlling gameplay if true we can play if false gameplay will be impossible | |
12 | let canPlay; | |
13 | ||
14 | //variable storing information about the current required points for victory | |
15 | let maxPoints; | |
16 | ||
17 | let lastThrow; | |
18 | ||
19 | // add an array that will store the addresses to the bone | |
20 | const images = [ | |
21 | "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-1.png?v=1610038358032", | |
22 | "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-2.png?v=1610038358080", | |
23 | "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-3.png?v=1610038358032", | |
24 | "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-4.png?v=1610038358142", | |
25 | "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-5.png?v=1610038358032", | |
26 | "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-6.png?v=1610038358193", | |
27 | ]; | |
28 | ||
29 | //function responsible for preparing a new game | |
30 | newGame(); | |
31 | ||
32 | function newGame() { | |
33 | //enable game | |
34 | canPlay = true; | |
35 | ||
36 | //the game always starts with player 1 | |
37 | currentPlayer = 0; | |
38 | //hide the bone at the beginning of the game | |
39 | document.querySelector(".die").style.display = "none"; | |
40 | ||
41 | //zero all scores | |
42 | points = [0, 0]; | |
43 | roundPoints = 0; | |
44 | ||
45 | //we update the user interface with points | |
46 | document.getElementById("result-0").textContent = "0"; | |
47 | document.getElementById("result-1").textContent = "0"; | |
48 | document.getElementById("current-points-0").textContent = "0"; | |
49 | document.getElementById("current-points-1").textContent = "0"; | |
50 | ||
51 | //change the names to Player1 and Player2 because during gameplay we will modify these elements by setting the victory text | |
52 | document.getElementById("name-0").textContent = "Player1"; | |
53 | document.getElementById("name-1").textContent = "Player 2"; | |
54 | //remove the win class responsible for replacing the Player1/2 text with win | |
55 | document.querySelector(".player-0-panel").classList.remove("victory"); | |
56 | document.querySelector(".player-1-panel").classList.remove("victory"); | |
57 | ||
58 | // we remove the active class responsible for indicating the current player | |
59 | document.querySelector(".player-0-panel").classList.remove("active"); | |
60 | document.querySelector(".player-1-panel").classList.remove("active"); | |
61 | ||
62 | // we add the active class to Player1 because he is always the one who starts the game | |
63 | document.querySelector(".player-0-panel").classList.add("active"); | |
64 | ||
65 | //show the panel in which we will set the gameplay points | |
66 | document.querySelector(".max-points").style.display = "block"; | |
67 | ||
68 | //points you need to score to win | |
69 | ||
70 | maxPoints = document.getElementById("value").value; | |
71 | ||
72 | if (maxPoints != 0) { | |
73 | //enable to play | |
74 | canPlay = true; | |
75 | } | |
76 | } | |
77 | ||
78 | //we are adding an event detector to our page, this particular one will detect a click on the Throw Dice button | |
79 | // wecreate an anonymous function - one without a name, which we will use only in this particular context and will not be able to use it outside of the | |
80 | document.querySelector(".btn-throw").addEventListener("click", function () { | |
81 | if (canPlay) { | |
82 | document.querySelector(".max-points").style.display = "none"; | |
83 | maxPoints = document.getElementById("value").value; | |
84 | ||
85 | //throw the dice, draw the value 1-6 | |
86 | const eyeNumber = Math.floor(Math.random() * 6) + 1; | |
87 | ||
88 | //we create the variable bonePicture storing a reference to the bone element on the page and display the cube | |
89 | ||
90 | const diePicture = document.querySelector(".die"); | |
91 | //select the appropriate graphic | |
92 | diePicture.src = images[eyeNumber - 1]; | |
93 | ||
94 | //display the bone | |
95 | diePicture.style.display = "block"; | |
96 | ||
97 | //update the result of the round if the dice didn't have a single eye rolled | |
98 | if (eyeNumber == 6 && lastThrow == 6) { | |
99 | points[currentPlayer] = 0; | |
100 | document.querySelector("#result-" + currentPlayer).textContent = "0"; | |
101 | nextPlayer(); | |
102 | } else if (eyeNumber != 1) { | |
103 | //we add the score | |
104 | roundPoints += eyeNumber; | |
105 | document.querySelector("#current-points-" + currentPlayer).textContent = | |
106 | roundPoints; | |
107 | } else { | |
108 | nextPlayer(); | |
109 | } | |
110 | lastThrow = eyeNumber; | |
111 | } | |
112 | }); | |
113 | ||
114 | //mechanism to switch player | |
115 | ||
116 | function nextPlayer() { | |
117 | //conditional operator- condition is checked if true is returned then part after is executed ? if false then part after : | |
118 | currentPlayer == 0 ? (currentPlayer = 1) : (currentPlayer = 0); | |
119 | ||
120 | //we reset the round points | |
121 | roundPoints = 0; | |
122 | ||
123 | //we are zeroing the points in the user interface | |
124 | ||
125 | document.getElementById("current-points-0").textContent = "0"; | |
126 | document.getElementById("current-points-1").textContent = "0"; | |
127 | ||
128 | //switch the class so that it points to the current player toggle works so that if there is already a class indicated it removes it and if there is no class it is added to the given element | |
129 | document.querySelector(".player-0-panel").classList.toggle("active"); | |
130 | document.querySelector(".player-1-panel").classList.toggle("active"); | |
131 | } | |
132 | ||
133 | //program what to execute when the hold button is clicked | |
134 | document.querySelector(".btn-hold").addEventListener("click", function () { | |
135 | if (canPlay) { | |
136 | //add points for a specific player | |
137 | points[currentPlayer] += roundPoints; | |
138 | ||
139 | //we update the UI | |
140 | document.querySelector("#result-" + currentPlayer).textContent = | |
141 | points[currentPlayer]; | |
142 | ||
143 | //we check if the player has won | |
144 | if (points[currentPlayer] >= maxPoints) { | |
145 | //we block gameplay | |
146 | canPlay = false; | |
147 | //we set the text Victory for the winner! | |
148 | document.querySelector("#name-" + currentPlayer).textContent = "Victory!"; | |
149 | //hide the die | |
150 | document.querySelector(".die").style.display = "none"; | |
151 | ||
152 | //add a win class to the current player that will modify the win text | |
153 | document | |
154 | .querySelector(".player-" + currentPlayer + "-panel") | |
155 | .classList.add("win"); | |
156 | } else { | |
157 | //if the player has not scored the required points to win then the player is switched over | |
158 | nextPlayer(); | |
159 | } | |
160 | } | |
161 | }); | |
162 | ||
163 | //clicking the new-game button activates the initialSettings function | |
164 | document.querySelector(".btn-new-game").addEventListener("click", newGame); | |
165 |