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 |