API tools faq
paste
coding_giants

cg-11-hangman

coding_giants
Feb 15th, 2024
25
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.66 KB | None | 0 0
raw download clone embed print report diff
  1. ============================================ HTML ============================================
  2. <!DOCTYPE html>
  3. <html lang="pl">
  4. <head>
  5. <title>Wisielec</title>
  6. <meta charset="utf-8" />
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1" />
  9.  
  10. <!-- import the webpage's stylesheet -->
  11. <link rel="stylesheet" href="/style.css" />
  12. <link
  13. rel="icon"
  14. href="https://cdn.glitch.com/fbbbb34f-0b8d-49c9-afe0-d55182ec0908%2Fwis.png?v=1608563089741"
  15. />
  16. <!-- import the webpage's javascript file -->
  17. <script src="/script.js" defer></script>
  18. </head>
  19. <body>
  20. <div id="container">
  21. <h1>Hangman</h1>
  22.  
  23. <p id="game">
  24. <!--here we will display the obscured password and if we guess it right, the given letter will be revealed-->
  25. </p>
  26.  
  27. <label>Submit a letter</label>
  28. <input
  29. id="letter"
  30. type="text"
  31. maxlength="1"
  32. /><!--field for entering letters-->
  33.  
  34. <button id="ok">Ok</button>
  35. <!-- button that appears at the end of the game-->
  36. <button id="reset">reset</button>
  37.  
  38. <!--here we will display messages like lost/win/no letter/repeated letter-->
  39. <h3 id="message"></h3>
  40.  
  41. <div>
  42. <!--the place where the gallows will appear-->
  43.  
  44. <img
  45. id="hangman"
  46. src="https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F1.png?v=1585147286506"
  47. width="300"
  48. />
  49. </div>
  50. </div>
  51. </body>
  52. </html>
  53.  
  54. ============================================ JS ============================================
  55. //words array
  56.  
  57. const words = ["giants", "function", "hangman"];
  58.  
  59. // random word from the words array
  60. const word = words[Math.floor(Math.random() * words.length)];
  61.  
  62. //table for addresses to pictures
  63. const picturesArray = [
  64. "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F0.png?v=1623760735527",
  65. "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F1.png?v=1623760735604",
  66. "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F2.png?v=1623760735890",
  67. "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F3.png?v=1623760735703",
  68. "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F4.png?v=1623760735867",
  69. "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F5.png?v=1623760735857",
  70. "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F6.png?v=1623760735876",
  71. "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F7.png?v=1623760735751",
  72. "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F8.png?v=1623760735918",
  73. "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F9.png?v=1623760735966",
  74. "https://cdn.glitch.com/252ccab9-3cec-4a04-89f5-816ee2994f79%2F10.png?v=1623760735998",
  75. ];
  76.  
  77. // the answers array contains an obscure password which we will gradually reveal in the game
  78. const answers = [];
  79.  
  80. // a variable indicating whether the letter was guessed correctly after being entered
  81. let ifGuessed = false;
  82.  
  83. //the chances in the game must be such a value because we have so many pictures
  84. let chances = 11;
  85.  
  86. //an array storing the letters already used
  87.  
  88. const used = [];
  89.  
  90. //variable counting the number of spaces between words
  91. let spaces = 0;
  92.  
  93. //preparing the covered drawn word
  94. for (let i = 0; i < word.length; i++) {
  95. if (word[i] == " ") {
  96. answers[i] = "|";
  97. spaces++;
  98. } else {
  99. answers[i] = "_";
  100. }
  101. }
  102.  
  103. //variable storing info how many letters are left to guess
  104. let remainingLetters = word.length - spaces;
  105.  
  106. //display an array of the covered word each element in the array i.e. _ is joined with a space
  107. document.getElementById("game").textContent = answers.join(" ");
  108.  
  109. // the event for clicking the ok button
  110. document.getElementById("ok").addEventListener("click", function () {
  111. // before each new letter approval, set this variable to false
  112. ifGuessed = false;
  113.  
  114. // we clear the display of the message
  115. document.getElementById("message").textContent = "";
  116.  
  117. //variable storing the player's letter
  118. const guess = document.getElementById("letter").value;
  119.  
  120. document.getElementById("letter").value = "";
  121.  
  122. if (guess.length == 0) {
  123. document.getElementById("message").textContent = "Please enter one letter.";
  124. } else if (used.includes(guess)) {
  125. document.getElementById("message").textContent =
  126. "You already entered this letter.";
  127. } else {
  128. used.push(guess);
  129. //we search the given word letter by letter and check if somewhere there is the same letter as our shot if so, we expose that letter in the answer array
  130. for (let j = 0; j < word.length; j++) {
  131. if (word[j] == guess) {
  132. ifGuessed = true;
  133. answers[j] = guess; //recover the letter in the password
  134. remainingLetters;
  135.  
  136. //update the display of our password
  137. document.getElementById("game").textContent = answers.join(" ");
  138. }
  139. }
  140.  
  141. //we search the given word letter by letter and check if somewhere there is the same letter as our shot if so, we reveal in the answer array that letter
  142. for (let j = 0; j < word.length; j++) {
  143. if (word[j] == guess) {
  144. ifGuessed = true;
  145. answers[j] = guess; //odsłonięcie litery w haśle
  146. remainingLetters--;
  147.  
  148. //update the display of our password
  149. document.getElementById("game").textContent = answers.join(" ");
  150. }
  151. }
  152.  
  153. // win
  154.  
  155. if (remainingLetters == 0) {
  156. document.getElementById("ok").disabled = true;
  157. document.getElementById("letter").disabled = true;
  158. document.getElementById("message").textContent =
  159. "Bravo the guessed password is: " + word;
  160. }
  161.  
  162. //losing the chance, drawing a hangman
  163.  
  164. if (ifGuessed == false) {
  165. setPicture();
  166. chances--;
  167.  
  168. //losing condition
  169. if (chances == 0) {
  170. document.getElementById("ok").disabled = true;
  171. document.getElementById("letter").disabled = true;
  172. document.getElementById("message").textContent =
  173. "You lost, the word is: " + word;
  174. }
  175. }
  176. }
  177. });
  178.  
  179. //we search the given word letter by letter and check if somewhere there is the same letter as our shot if so, we reveal in the answer array that letter
  180.  
  181. function setPicture() {
  182. //select the appropriate image address from the array and set as image source
  183. document.getElementById("hangman").src = picturesArray[chances - 1];
  184. //display the image
  185. document.getElementById("hangman").style.display = "block";
  186. }
  187.  
  188. document.getElementById("reset").addEventListener("click", function () {
  189. //refreshing the page
  190. window.location.reload();
  191. });
  192.  
  193. ============================================ CSS ============================================
  194. @import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Bungee+Outline&display=swap");
  195.  
  196. body {
  197. font-family: "Black Ops One", cursive;
  198. font-size: 30px;
  199. }
  200.  
  201. h1 {
  202. color: #373fff;
  203. }
  204.  
  205. img {
  206. display: none;
  207. }
  208.  
  209. #container {
  210. width: 1000px;
  211. margin-left: auto;
  212. margin-right: auto;
  213. text-align: center;
  214. }
  215.  
  216. input {
  217. font-family: "Black Ops One", cursive;
  218. width: 50px;
  219. height: 50px;
  220. font-size: 35px;
  221. }
  222.  
  223. button {
  224. width: 200px;
  225. height: 50px;
  226. background-color: #fa4a0a;
  227. color: white;
  228. cursor: pointer;
  229. font-size: 16px;
  230. border-radius: 4px;
  231. transition-duration: 0.4s;
  232. border: 2px solid #fa4a0a;
  233. text-transform: uppercase;
  234. font-family: "Black Ops One", cursive;
  235. }
  236.  
  237. button:hover {
  238. background-color: white;
  239. color: black;
  240. }
  241.  
  242. p {
  243. letter-spacing: 4px;
  244. }
  245.  
  246. .active {
  247. display: block;
  248. }
  249.  
  250. .hidden {
  251. display: none;
  252. }
  253.  
Add Comment
Please, Sign In to add comment
Public Pastes
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!