View difference between Paste ID: MJG1jyHv and zVF4aHEJ
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