Update 2en.html

2024-09-21 14:14:41 +03:00
parent 36bbd024ed
commit deda0d0df9
1 changed files with 1 additions and 1 deletions
@@ -1,3 +1,3 @@
-<!DOCTYPE html><html lang="en"><head><link href="img/icon.ico" rel="shortcut icon" type="image/x-icon"><meta charset="UTF-8"><meta http-equiv="X-XSS-Protection" content="1; mode=block"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"><meta name="publisher" content="https://furk4ngg.github.io"><title>Hangman Game App</title><script src="word-list_en.js"></script></head><body><div class="game-modal"><div class="content"><img src="#" alt="gif"><h4>Game Over!</h4><p>The correct word was:<b>rainbow</b></p><button class="play-again">Play Again</button></div></div><div class="container"><div class="hangman-box"><img src="#" draggable="false" alt="hangman-img"><h1>Hangman Game</h1></div><div class="game-box"><ul class="word-display"></ul><h4 class="hint-text">Hint:<b></b></h4><h4 class="guesses-text">Incorrect guesses:<b></b></h4><div class="keyboard"></div></div></div><style>
+<!DOCTYPE html><html lang="en"><head><link href="img/icon.ico" rel="shortcut icon" type="image/x-icon"><meta charset="UTF-8"><meta http-equiv="X-XSS-Protection" content="1; mode=block"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"><meta name="publisher" content="https://furk4ngg.github.io"><title>Hangman Game App</title><script src="word-list_en.js"></script></head><body><div class="game-modal"><div class="content"><img src="#" alt="gif"><h4>Game Over!</h4><p>The correct word was:<b>rainbow</b></p><button class="play-again">Play Again</button></div></div><div class="container"><div class="hangman-box"><img src="#" draggable="false" alt="hangman-img"><h1>Hangman Game</h1></div><div class="game-box"><ul class="word-display"></ul><h4 class="hint-text">Hint:<b></b></h4><h4 class="guesses-text">Incorrect guesses:<b></b></h4><div class="keyboard"></div></div></div><style>
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap);*{margin:0;padding:0;box-sizing:border-box;font-family:"Open Sans",sans-serif}body{display:flex;padding:0 10px;align-items:center;justify-content:center;min-height:100vh;background:#5E63BA}.container{display:flex;width:850px;gap:70px;padding:60px 40px;background:#fff;border-radius:10px;align-items:flex-end;justify-content:space-between;box-shadow:0 10px 20px rgb(0 0 0 / .1)}.hangman-box img{user-select:none;max-width:270px}.hangman-box h1{font-size:1.45rem;text-align:center;margin-top:20px;text-transform:uppercase}.game-box .word-display{gap:10px;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}.word-display .letter{width:28px;font-size:2rem;text-align:center;font-weight:600;margin-bottom:40px;text-transform:uppercase;border-bottom:3px solid #000}.word-display .letter.guessed{margin:-40px 0 35px;border-color:#fff0}.game-box h4{text-align:center;font-size:1.1rem;font-weight:500;margin-bottom:15px}.game-box h4 b{font-weight:600}.game-box .guesses-text b{color:red}.game-box .keyboard{display:flex;gap:5px;flex-wrap:wrap;margin-top:40px;justify-content:center}:where(.game-modal,.keyboard) button{color:#fff;border:none;outline:none;cursor:pointer;font-size:1rem;font-weight:600;border-radius:4px;text-transform:uppercase;background:#5E63BA}.keyboard button{padding:7px;width:calc(100% / 9 - 5px)}.keyboard button[disabled]{pointer-events:none;opacity:.6}:where(.game-modal,.keyboard) button:hover{background:#8286c9}.game-modal{position:fixed;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;background:rgb(0 0 0 / .6);display:flex;align-items:center;justify-content:center;z-index:9999;padding:0 10px;transition:opacity 0.4s ease}.game-modal.show{opacity:1;pointer-events:auto;transition:opacity 0.4s 0.4s ease}.game-modal .content{padding:30px;max-width:420px;width:100%;border-radius:10px;background:#fff;text-align:center;box-shadow:0 10px 20px rgb(0 0 0 / .1)}.game-modal img{max-width:130px;margin-bottom:20px}.game-modal img[src="img/victory.gif"]{margin-left:-10px}.game-modal h4{font-size:1.53rem}.game-modal p{font-size:1.15rem;margin:15px 0 30px;font-weight:500}.game-modal p b{color:#5E63BA;font-weight:600}.game-modal button{padding:12px 23px}@media (max-width:782px){.container{flex-direction:column;padding:30px 15px;align-items:center}.hangman-box img{max-width:200px}.hangman-box h1{display:none}.game-box h4{font-size:1rem}.word-display .letter{margin-bottom:35px;font-size:1.7rem}.word-display .letter.guessed{margin:-35px 0 25px}.game-modal img{max-width:120px}.game-modal h4{font-size:1.45rem}.game-modal p{font-size:1.1rem}.game-modal button{padding:10px 18px}}</style><script>
 const wordDisplay=document.querySelector(".word-display"),guessesText=document.querySelector(".guesses-text b"),keyboardDiv=document.querySelector(".keyboard"),hangmanImage=document.querySelector(".hangman-box img"),gameModal=document.querySelector(".game-modal"),playAgainBtn=gameModal.querySelector("button");let currentWord,correctLetters,wrongGuessCount;const maxGuesses=6,resetGame=()=>{correctLetters=[],wrongGuessCount=0,hangmanImage.src="img/hangman-0.svg",guessesText.innerText=`${wrongGuessCount} / 6`,wordDisplay.innerHTML=currentWord.split("").map((()=>'<li class="letter"></li>')).join(""),keyboardDiv.querySelectorAll("button").forEach((e=>e.disabled=!1)),gameModal.classList.remove("show")},getRandomWord=()=>{const{word:e,hint:r}=wordList[Math.floor(Math.random()*wordList.length)];currentWord=e,document.querySelector(".hint-text b").innerText=r,correctLetters=[],wrongGuessCount=0,hangmanImage.src="img/hangman-0.svg",guessesText.innerText=`${wrongGuessCount} / 6`,wordDisplay.innerHTML=currentWord.split("").map((()=>'<li class="letter"></li>')).join(""),keyboardDiv.querySelectorAll("button").forEach((e=>e.disabled=!1)),gameModal.classList.remove("show")},gameOver=e=>{const r=e?"You found the word:":"The correct word was:";gameModal.querySelector("img").src=`img/${e?"victory":"lost"}.gif`,gameModal.querySelector("h4").innerText=e?"Congrats!":"Game Over!",gameModal.querySelector("p").innerHTML=`${r} <b>${currentWord}</b>`,gameModal.classList.add("show")},initGame=(e,r)=>(currentWord.includes(r)?[...currentWord].forEach(((e,t)=>{e===r&&(correctLetters.push(e),wordDisplay.querySelectorAll("li")[t].innerText=e,wordDisplay.querySelectorAll("li")[t].classList.add("guessed"))})):(wrongGuessCount++,hangmanImage.src=`img/hangman-${wrongGuessCount}.svg`),e.disabled=!0,guessesText.innerText=`${wrongGuessCount} / 6`,6===wrongGuessCount?gameOver(!1):correctLetters.length===currentWord.length?gameOver(!0):void 0);for(let e=97;e<=122;e++){const r=document.createElement("button");r.innerText=String.fromCharCode(e),keyboardDiv.appendChild(r),r.addEventListener("click",(r=>initGame(r.target,String.fromCharCode(e))))}getRandomWord(),playAgainBtn.addEventListener("click",getRandomWord);</script></body></html>