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