API tools faq
paste
Advertisement
ada1711

cg-10-hangman

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