View difference between Paste ID: SMuv41n1 and ZFdJzSsR
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
// add an array that will store the addresses to the bone
15-
const images = [
15+
const images = ["kosc1.png",
16-
  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-1.png?v=1610038358032",
16+
              "kosc2.png",
17-
  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-2.png?v=1610038358080",
17+
              "kosc3.png",
18-
  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-3.png?v=1610038358032",
18+
              "kosc4.png",
19-
  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-4.png?v=1610038358142",
19+
              "kosc5.png",
20-
  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-5.png?v=1610038358032",
20+
              "kosc6.png"];
21-
  "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-6.png?v=1610038358193",
21+
22-
];
22+
23
newGame();
24
25
function newGame() {
26
  //enable game
27
  canPlay = true;
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
59
//we are adding an event detector to our page, this particular one will detect a click on the Throw Dice button
60
// 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
61
document.querySelector(".btn-throw").addEventListener("click", function () {
62
  if (canPlay) {
63
    //throw the dice, draw the value 1-6
64
    const eyeNumber = Math.floor(Math.random() * 6) + 1;
65
66
    //we create the variable bonePicture storing a reference to the bone element on the page and display the cube
67
68
    const diePicture = document.querySelector(".die");
69
    //select the appropriate graphic
70
    diePicture.src = images[eyeNumber - 1];
71
72
    //display the bone
73
    diePicture.style.display = "block";
74
75
    //update the result of the round if the dice didn't have a single eye rolled
76
77
    if (eyeNumber != 1) {
78
      //we add the score
79
      roundPoints += eyeNumber;
80
      document.querySelector("#current-points-" + currentPlayer).textContent =
81
        roundPoints;
82
    } else {
83
      //Please ask participants to write down the function call and we will write its definitions in the next lesson
84
    }
85
  }
86
});
87
88
//mechanism to switch player
89
90
function nextPlayer() {
91
  //conditional operator- condition is checked if true is returned then part after is executed ? if false then part after :
92
  currentPlayer == 0 ? (currentPlayer = 1) : (currentPlayer = 0);
93
94
  //we reset the round points
95
  roundPoints = 0;
96
97
  //we are zeroing the points in the user interface
98
99
  document.getElementById("current-points-0").textContent = "0";
100
  document.getElementById("current-points-1").textContent = "0";
101
102
  //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
103
  document.querySelector(".player-0-panel").classList.toggle("active");
104
  document.querySelector(".player-1-panel").classList.toggle("active");
105
}
106
107
//program what to execute when the hold button is clicked
108
document.querySelector(".btn-hold").addEventListener("click", function () {
109
  if (canPlay) {
110
    //add points for a specific player
111
    points[currentPlayer] += roundPoints;
112
113
    //we update the UI
114
    document.querySelector("#result-" + currentPlayer).textContent =
115
      points[currentPlayer];
116
117
    //we check if the player has won
118
    if (points[currentPlayer] >= 100) {
119
      //we block gameplay
120
      canPlay = false;
121
      //we set the text Victory for the winner!
122
      document.querySelector("#name-" + currentPlayer).textContent = "Victory!";
123
      //hide the die
124
      document.querySelector(".die").style.display = "none";
125
126
      //add a win class to the current player that will modify the win text
127
      document
128
        .querySelector(".player-" + currentPlayer + "-panel")
129
        .classList.add("win");
130
    } else {
131
      //if the player has not scored the required points to win then the player is switched over
132
      nextPlayer();
133
    }
134
  }
135
});
136
137
//clicking the new-game button activates the initialSettings function
138
document.querySelector(".btn-new-game").addEventListener("click", newGame);
139