API tools faq
paste
Advertisement
ada1711

cg-13-dice-game-basic

ada1711
Jan 11th, 2024
26
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.07 KB | None | 0 0
raw download clone embed print report
  1. ============================================= HTML ======================================================
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1" />
  8.  
  9. <title>Dice Game</title>
  10.  
  11. <!-- import the webpage's stylesheet -->
  12. <link rel="stylesheet" href="/style.css" />
  13.  
  14. <!-- import the webpage's javascript file -->
  15. <script src="/script.js" defer=""></script>
  16.  
  17. <link
  18. rel="icon"
  19. href="https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-6.png?v=1610038358193"
  20. />
  21. </head>
  22. <body>
  23. <div class="game-field clearfix">
  24. <div class="player-0-panel active">
  25. <div class="player-name" id="name-0">Player 1</div>
  26. <div class="player-result" id="result-0">0</div>
  27. <div class="player-active-box">
  28. <div class="player-label">Current points</div>
  29. <div class="player-result" id="current-points-0">0</div>
  30. </div>
  31. </div>
  32.  
  33. <div class="player-1-panel">
  34. <div class="player-name" id="name-1">Player 2</div>
  35. <div class="player-result" id="result-1">0</div>
  36. <div class="player-active-box">
  37. <div class="player-label">Current points</div>
  38. <div class="player-result" id="current-points-1">0</div>
  39. </div>
  40. </div>
  41.  
  42. <button class="btn-new-game">New game</button>
  43. <button class="btn-throw">Throw a dice</button>
  44. <button class="btn-hold">Hold points</button>
  45.  
  46. <img
  47. src="https://cdn.glitch.com/2f870331-e2e8-4e4b-afe0-2a5cb331b66a%2Fkosc-6.png?v=1598188463618"
  48. class="die" style="display: none;"
  49. />
  50. </div>
  51. </body>
  52. </html>
  53.  
  54. ============================================== JS =======================================================
  55. //an array storing players' point
  56. let points = [];
  57.  
  58. //points that a player scores after each dice roll
  59. let roundPoints;
  60.  
  61. //variable controlling players if equal to 0 plays player1 if equal to 1 plays player2
  62. //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
  63. let currentPlayer;
  64.  
  65. //boolean variable controlling gameplay if true we can play if false gameplay will be impossible
  66. let canPlay;
  67.  
  68. // add an array that will store the addresses to the bone
  69. const images = [
  70. "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-1.png?v=1610038358032",
  71. "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-2.png?v=1610038358080",
  72. "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-3.png?v=1610038358032",
  73. "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-4.png?v=1610038358142",
  74. "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-5.png?v=1610038358032",
  75. "https://cdn.glitch.com/8fbc579f-3346-47a0-abbc-945a83abb962%2Fkosc-6.png?v=1610038358193",
  76. ];
  77.  
  78. //function responsible for preparing a new game
  79. newGame();
  80.  
  81. function newGame() {
  82. //enable game
  83. canPlay = true;
  84.  
  85. //the game always starts with player 1
  86. currentPlayer = 0;
  87. //hide the bone at the beginning of the game
  88. document.querySelector(".die").style.display = "none";
  89.  
  90. //zero all scores
  91. points = [0, 0];
  92. roundPoints = 0;
  93.  
  94. //we update the user interface with points
  95. document.getElementById("result-0").textContent = "0";
  96. document.getElementById("result-1").textContent = "0";
  97. document.getElementById("current-points-0").textContent = "0";
  98. document.getElementById("current-points-1").textContent = "0";
  99.  
  100. //change the names to Player1 and Player2 because during gameplay we will modify these elements by setting the victory text
  101. document.getElementById("name-0").textContent = "Player1";
  102. document.getElementById("name-1").textContent = "Player 2";
  103. //remove the win class responsible for replacing the Player1/2 text with win
  104. document.querySelector(".player-0-panel").classList.remove("victory");
  105. document.querySelector(".player-1-panel").classList.remove("victory");
  106.  
  107. // we remove the active class responsible for indicating the current player
  108. document.querySelector(".player-0-panel").classList.remove("active");
  109. document.querySelector(".player-1-panel").classList.remove("active");
  110.  
  111. // we add the active class to Player1 because he is always the one who starts the game
  112. document.querySelector(".player-0-panel").classList.add("active");
  113. }
  114.  
  115. //we are adding an event detector to our page, this particular one will detect a click on the Throw Dice button
  116. // 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
  117. document.querySelector(".btn-throw").addEventListener("click", function () {
  118. if (canPlay) {
  119. //throw the dice, draw the value 1-6
  120. const eyeNumber = Math.floor(Math.random() * 6) + 1;
  121.  
  122. //we create the variable bonePicture storing a reference to the bone element on the page and display the cube
  123.  
  124. const diePicture = document.querySelector(".die");
  125. //select the appropriate graphic
  126. diePicture.src = images[eyeNumber - 1];
  127.  
  128. //display the bone
  129. diePicture.style.display = "block";
  130.  
  131. //update the result of the round if the dice didn't have a single eye rolled
  132.  
  133. if (eyeNumber != 1) {
  134. //we add the score
  135. roundPoints += eyeNumber;
  136. document.querySelector("#current-points-" + currentPlayer).textContent =
  137. roundPoints;
  138. } else {
  139. //Please ask participants to write down the function call and we will write its definitions in the next lesson
  140. }
  141. }
  142. });
  143.  
  144. //mechanism to switch player
  145.  
  146. function nextPlayer() {
  147. //conditional operator- condition is checked if true is returned then part after is executed ? if false then part after :
  148. currentPlayer == 0 ? (currentPlayer = 1) : (currentPlayer = 0);
  149.  
  150. //we reset the round points
  151. roundPoints = 0;
  152.  
  153. //we are zeroing the points in the user interface
  154.  
  155. document.getElementById("current-points-0").textContent = "0";
  156. document.getElementById("current-points-1").textContent = "0";
  157.  
  158. //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
  159. document.querySelector(".player-0-panel").classList.toggle("active");
  160. document.querySelector(".player-1-panel").classList.toggle("active");
  161. }
  162.  
  163. //program what to execute when the hold button is clicked
  164. document.querySelector(".btn-hold").addEventListener("click", function () {
  165. if (canPlay) {
  166. //add points for a specific player
  167. points[currentPlayer] += roundPoints;
  168.  
  169. //we update the UI
  170. document.querySelector("#result-" + currentPlayer).textContent =
  171. points[currentPlayer];
  172.  
  173. //we check if the player has won
  174. if (points[currentPlayer] >= 100) {
  175. //we block gameplay
  176. canPlay = false;
  177. //we set the text Victory for the winner!
  178. document.querySelector("#name-" + currentPlayer).textContent = "Victory!";
  179. //hide the die
  180. document.querySelector(".die").style.display = "none";
  181.  
  182. //add a win class to the current player that will modify the win text
  183. document
  184. .querySelector(".player-" + currentPlayer + "-panel")
  185. .classList.add("win");
  186. } else {
  187. //if the player has not scored the required points to win then the player is switched over
  188. nextPlayer();
  189. }
  190. }
  191. });
  192.  
  193. //clicking the new-game button activates the initialSettings function
  194. document.querySelector(".btn-new-game").addEventListener("click", newGame);
  195.  
  196. ============================================== CSS ======================================================
  197. @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
  198.  
  199. * {
  200.  
  201. box-sizing: border-box;
  202.  
  203. }
  204.  
  205.  
  206. body {
  207. font-family: 'Righteous', cursive;
  208. background-image:url('https://cdn.glitch.com/2f870331-e2e8-4e4b-afe0-2a5cb331b66a%2Friho-kroll-m4sGYaHYN5o-unsplash.jpg?v=1598200303748');
  209. background-image:cover;
  210. background-position:center top;
  211. background-size:cover;
  212.  
  213. }
  214.  
  215. .game-field {
  216.  
  217. margin-top:30px;
  218. width: 1000px;
  219. height:600px;
  220. margin-left:auto;
  221. margin-right:auto;
  222. background-color:#e3e3e3;
  223.  
  224.  
  225. }
  226.  
  227. .player-0-panel,
  228. .player-1-panel {
  229. width: 50%;
  230. float: left;
  231. height: 600px;
  232. padding: 100px;
  233.  
  234. }
  235.  
  236.  
  237. .player-name {
  238. font-size: 40px;
  239. text-align: center;
  240. text-transform: uppercase;
  241. letter-spacing: 2px;
  242. margin-top: 20px;
  243. margin-bottom: 10px;
  244.  
  245. }
  246.  
  247. .player-result {
  248. text-align: center;
  249. font-size: 30px;
  250. color: black;
  251. margin-bottom: 130px;
  252. }
  253.  
  254. .active {
  255. background-color: #aee65a;
  256. }
  257.  
  258.  
  259. .player-active-box {
  260. background-color: #EB4D4D;
  261. color: #ffffff;
  262. width: 150px;
  263. height:150px;
  264. margin: 0 auto;
  265. padding: 12px;
  266. text-align: center;
  267. border-radius:10px;
  268. }
  269.  
  270. .player-label {
  271. text-transform: uppercase;
  272. margin-bottom: 10px;
  273. font-size: 15px;
  274. color: #222222;
  275. }
  276.  
  277. button {
  278. position: absolute;
  279. width: 200px;
  280. left: 50%;
  281. transform: translateX(-50%);
  282. color: #555555;
  283. background: none;
  284. border: none;
  285. font-family: 'Righteous', cursive;
  286. font-size: 25px;
  287. text-transform: uppercase;
  288. cursor: pointer;
  289. font-weight: 300;
  290.  
  291. }
  292.  
  293. button:hover { font-weight: 600; }
  294.  
  295.  
  296. button:focus {
  297. outline: none;
  298. }
  299.  
  300. input{
  301. position: absolute;
  302. left: 50%;
  303. transform: translateX(-50%);
  304. top:100px;
  305. height:30px;
  306. width:230px;
  307. font-family: 'Righteous', cursive;
  308. }
  309.  
  310. .btn-nowa-gra{ top: 45px;}
  311. .btn-throw { top: 453px;}
  312. .btn-hold { top: 497px;}
  313.  
  314.  
  315. .die{
  316. position: absolute;
  317. left: 50%;
  318. top: 178px;
  319. transform: translateX(-50%);
  320. height: 200px;
  321. box-shadow:20px 10px 50px 20px grey;
  322.  
  323. }
  324.  
  325. .victory { background-color: #FFD700; }
  326. .victory .player-name { font-weight: 300; color: #EB4D4D; }
  327.  
  328.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!