Mencipta Permainan Hangman Dinamik dengan JavaScript: Gambaran Keseluruhan Teknikal-tutorial css-php.cn

Creating a Dynamic Hangman Game with JavaScript: A Technical Overview

Pengenalan
Permainan Hangman MTnD, permainan meneka perkataan klasik, berfungsi sebagai projek yang sangat baik untuk berlatih dan mempamerkan pelbagai kemahiran pembangunan web. Dalam projek ini, saya membangunkan permainan Hangman dengan ciri yang dipertingkatkan, termasuk menjejaki bilangan percubaan, menyediakan petunjuk, memaparkan kiraan percubaan, mengemas kini imej selepas percubaan gagal dan memaparkan mesej tahniah untuk tekaan yang betul. Permainan ini telah digunakan padaVercel, membolehkan perkongsian dan akses mudah.
Demo permainan ini boleh dinilai di sini
Ciri-ciri

Bilangan Percubaan: Permainan menjejaki bilangan tekaan yang salah yang telah dibuat oleh pemain. Setiap tekaan yang salah mengurangkan bilangan percubaan yang tinggal, menambah cabaran.
Petunjuk: Pemain boleh menerima petunjuk untuk membantu mereka meneka perkataan. Ciri ini menambah lapisan strategi dan bantuan, menjadikan permainan lebih menarik, meningkatkan pengalaman pengguna dengan menawarkan petunjuk apabila diperlukan. Maklum balas visual, termasuk menukar imej dan mesej ucapan tahniah, telah disepadukan untuk menjadikan permainan lebih menarik dan menarik secara visual.
Memaparkan Bilangan Percubaan: Bilangan percubaan yang tinggal dipaparkan dengan jelas, memastikan pemain dimaklumkan dan menambah ketegangan.
Menukar Imej Selepas Percubaan Gagal: Untuk setiap tekaan yang salah, permainan mengemas kini imej, biasanya menggambarkan perkembangan lukisan algojo. Maklum balas visual ini meningkatkan pengalaman pemain dengan mewakili secara visual akibat tekaan yang salah. 5. Mesej Tahniah untuk Tekaan Betul: Apabila pemain berjaya meneka perkataan itu, mesej tahniah dipaparkan, memberikan pengukuhan positif dan kesimpulan yang memuaskan untuk permainan.
Logik Permainan: Logik permainan teras telah dilaksanakan dalam fungsi JavaScript, mengendalikan tugas seperti mengesahkan tekaan, mengemas kini keadaan dan menentukan keadaan menang/kalah.
Deployment: Setelah permainan selesai dan diuji secara menyeluruh, ia telah digunakan pada Vercel. Proses penempatan melibatkan menolak kod ke repositori Git dan menyambungkannya ke Vercel, yang mengendalikan seluruh penggunaan dengan lancar. 8.Audio telah ditambahkan untuk menunjukkan tekaan yang salah yang menjadikan permainan lebih menarik, selepas 5 percubaan gagal ia juga kembali pada bunyi. Selepas percubaan yang berjaya untuk mendapatkan perkataan anda mendapat bunyi juga untuk kejayaan

Teknologi Digunakan

HTML: Struktur permainan.
CSS: Menggayakan antara muka permainan.
JavaScript digunakan untuk interaktiviti web dan bersyarat. 4.Vercel: Permainan ini digunakan pada Vercel, platform popular untuk menggunakan projek bahagian hadapan.Vercel menyediakan proses penggunaan yang lancar dan memastikan permainan boleh diakses dari mana-mana sahaja.

HTML: Struktur Permainan
Struktur HTML adalah mudah, dengan beberapa div dan elemen untuk memaparkan komponen permainan seperti teg imej kosong, teg tajuk dan teg audio boleh diakses untuk menogol keadaan permainan yang berbeza.

     Hangman  
   
 
 MTnD Hangman

Salin selepas log masuk

CSS: Menggayakan Permainan
Gaya CSS meningkatkan daya tarikan visual dan responsif permainan:

* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; line-height: 1.6; text-align: center; justify-content: center; display: flex; color: #333; background: linear-gradient(to bottom, #a8edea, #fed6e3); align-items: center; margin: 0; height: 100vh; /* background-color: #f9f9f9; */ } #game-container { display: flex; flex-direction: column; width: 80%; margin: 50px auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* justify-content: center; */ align-items: center; background: rgba(255, 255, 255, 0.8); text-align: center; } h1 { font-family: "Pacifico", cursive; color: #ff6f61; } #word-container { display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; margin-bottom: 20px; } .logo { height: 80px; width: 83px; } .letter-btn { margin: 10px; padding: 10px 20px; border: none; border-radius: 8px; color: #fff; background: #ff6f61; cursor: pointer; transition: background 0.3s ease; } .letter-btn:hover { background-color: #ff402e; } .letter-btn.disabled { background-color: #ccc; cursor: not-allowed; } #message { font-size: 18px; font-weight: bold; color: #666; margin-bottom: 20px; } #restart-btn { font-weight: bold; padding: 10px 20px; border: none; border-radius: 10px; background-color: #ff6f61; color: #fff; cursor: pointer; margin-bottom: 20px; } #restart-btn:hover { background-color: #ff402e; } #hangman-img { width: 180px; height: 180px; margin: 0 20px; transition: transform 0.3s ease-in-out; } .hangman-image:hover { transform: scale(1.05); } #clue { font-size: 18px; font-weight: bold; margin-bottom: 20px; color: darkblue; } #tries { position: relative; left: 30%; margin: 10px; /* margin-left: 900px; */ padding: 10px 20px; border: none; border-radius: 10px; background-color: #4fd8d8; color: #fff; cursor: pointer; } /* Media Queries */ /* Small screens (max-width: 768px) */ @media (max-width: 768px) { #game-container { display: flex; flex-direction: column; width: 90%; margin: 20px auto; height: 100vh; padding: 10px; align-items: center; } #word-container { font-size: 18px; } .letter-btn { margin: 5px; padding: 5px 10px; } #letters-container { width: 350px; } #message { font-size: 14px; font-weight: bold; } #restart-btn { height: 30px; padding: 5px 10px; } #hangman-img { width: 120px; height: 120px; } #clue { font-size: 14px; } #tries { /* margin: 5px; */ left: 30%; padding: 13px 5px 10px 5px; } } /* Extra small screens (max-width: 480px) */ @media (max-width: 480px) { #game-container { display: flex; flex-direction: column; width: 100%; height: 100vh; margin: 10px auto; padding: 5px; align-items: center; background:#ebfcfc; } #letters-container { /* width: 280px; */ flex-wrap: wrap; margin-bottom: 30px; } #word-container { font-size: 20px; } .letter-btn { height: 30px; width: 30px; border-radius: 100%; margin: 2px; padding: 2px 5px; } #message { font-weight: bold; font-size: 30px; margin: 10px 0 10px 0; } #restart-btn { margin-top: 30px; height: 40px; font-size: 20px; padding: 2px 5px; } #hangman-img { width: 170px; height: 170px; margin: 30px 0 0px 0; } #clue { margin-top: 40px; font-size: 21px; } #tries { left: 9%; width: 150px; flex-wrap: wrap; margin: 20px 0 40px 0; padding: 15px; margin-left: 170px; } } @media (max-width: 320px) { #game-container { display: flex; flex-direction: column; width: 100%; height: 100vh; margin: 10px auto; padding: 5px; align-items: center; background:#ebfcfc; } #letters-container { width: 270px; flex-wrap: wrap; margin-bottom: 20px; } #word-container { font-size: 20px; } .letter-btn { margin: 2px; padding: 2px 5px; } #message { font-weight: bold; font-size: 15px; } #restart-btn { font-size: medium; padding: 2px 5px; } #hangman-img { width: 120px; height: 120px; margin: 15px 0 0px 0; } #clue { margin-top: 10px; font-size: 18px; } #tries { left: 20%; margin: 2px; padding: 15px 0 0 0; } }* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; line-height: 1.6; text-align: center; justify-content: center; display: flex; color: #333; background: linear-gradient(to bottom, #a8edea, #fed6e3); align-items: center; margin: 0; height: 100vh; /* background-color: #f9f9f9; */ } #game-container { display: flex; flex-direction: column; width: 80%; margin: 50px auto; padding: 20px; border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* justify-content: center; */ align-items: center; background: rgba(255, 255, 255, 0.8); text-align: center; } h1 { font-family: "Pacifico", cursive; color: #ff6f61; } #word-container { display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; margin-bottom: 20px; } .logo { height: 80px; width: 83px; } .letter-btn { margin: 10px; padding: 10px 20px; border: none; border-radius: 8px; color: #fff; background: #ff6f61; cursor: pointer; transition: background 0.3s ease; } .letter-btn:hover { background-color: #ff402e; } .letter-btn.disabled { background-color: #ccc; cursor: not-allowed; } #message { font-size: 18px; font-weight: bold; color: #666; margin-bottom: 20px; } #restart-btn { font-weight: bold; padding: 10px 20px; border: none; border-radius: 10px; background-color: #ff6f61; color: #fff; cursor: pointer; margin-bottom: 20px; } #restart-btn:hover { background-color: #ff402e; } #hangman-img { width: 180px; height: 180px; margin: 0 20px; transition: transform 0.3s ease-in-out; } .hangman-image:hover { transform: scale(1.05); } #clue { font-size: 18px; font-weight: bold; margin-bottom: 20px; color: darkblue; } #tries { position: relative; left: 30%; margin: 10px; /* margin-left: 900px; */ padding: 10px 20px; border: none; border-radius: 10px; background-color: #4fd8d8; color: #fff; cursor: pointer; } /* Media Queries */ /* Small screens (max-width: 768px) */ @media (max-width: 768px) { #game-container { display: flex; flex-direction: column; width: 90%; margin: 20px auto; height: 100vh; padding: 10px; align-items: center; } #word-container { font-size: 18px; } .letter-btn { margin: 5px; padding: 5px 10px; } #letters-container { width: 350px; } #message { font-size: 14px; font-weight: bold; } #restart-btn { height: 30px; padding: 5px 10px; } #hangman-img { width: 120px; height: 120px; } #clue { font-size: 14px; } #tries { /* margin: 5px; */ left: 30%; padding: 13px 5px 10px 5px; } } /* Extra small screens (max-width: 480px) */ @media (max-width: 480px) { #game-container { display: flex; flex-direction: column; width: 100%; height: 100vh; margin: 10px auto; padding: 5px; align-items: center; background:#ebfcfc; } #letters-container { /* width: 280px; */ flex-wrap: wrap; margin-bottom: 30px; } #word-container { font-size: 20px; } .letter-btn { height: 30px; width: 30px; border-radius: 100%; margin: 2px; padding: 2px 5px; } #message { font-weight: bold; font-size: 30px; margin: 10px 0 10px 0; } #restart-btn { margin-top: 30px; height: 40px; font-size: 20px; padding: 2px 5px; } #hangman-img { width: 170px; height: 170px; margin: 30px 0 0px 0; } #clue { margin-top: 40px; font-size: 21px; } #tries { left: 9%; width: 150px; flex-wrap: wrap; margin: 20px 0 40px 0; padding: 15px; margin-left: 170px; } } @media (max-width: 320px) { #game-container { display: flex; flex-direction: column; width: 100%; height: 100vh; margin: 10px auto; padding: 5px; align-items: center; background:#ebfcfc; } #letters-container { width: 270px; flex-wrap: wrap; margin-bottom: 20px; } #word-container { font-size: 20px; } .letter-btn { margin: 2px; padding: 2px 5px; } #message { font-weight: bold; font-size: 15px; } #restart-btn { font-size: medium; padding: 2px 5px; } #hangman-img { width: 120px; height: 120px; margin: 15px 0 0px 0; } #clue { margin-top: 10px; font-size: 18px; } #tries { left: 20%; margin: 2px; padding: 15px 0 0 0; } }

Salin selepas log masuk

JavaScript
digunakan terutamanya untuk syarat dan interaktiviti permainan.

const languages = ["javascript", "python", "java", "ruby"]; const frameworks = ["react", "angular", "vue", "django", "flask"]; const tools = ["git", "webpack", "babel", "eslint", "prettier"]; const concept = ["closure", "callback", "promises", "async", "hosting"]; const databases = ["mongodb", "sqlite", "mysql"]; const allObjects = {languages, frameworks, tools, concept, databases}; let chosenWord = ""; let guessedLetters = []; let wrongGuesses; const wordContainer = document.getElementById("word-container"); const lettersContainer = document.getElementById("letters-container"); const message = document.getElementById("message"); const restartBtn = document.getElementById("restart-btn"); const hangmanImg = document.getElementById("hangman-img"); const hangmanAud = document.getElementById("hangman-aud"); const trials = document.getElementById("tries"); const clue = document.getElementById("clue"); function init() { const randomArray = Object.values(allObjects)[ Math.floor(Math.random() * Object.keys(allObjects).length) ]; const randomValue = randomArray[Math.floor(Math.random() * randomArray.length)]; console.log(randomValue); const getClue = () => { for (const [key, value] of Object.entries(allObjects)) { if (value.includes(randomValue)) { return key; } } }; clue.textContent = `Clue: "${getClue().toUpperCase()}" in Programming`; chosenWord = randomValue; // words[Math.floor(Math.random() * words.length)]; guessedLetters = []; remainingGuesses = 5; message.textContent = ""; wordContainer.innerHTML = "_ ".repeat(chosenWord.length).trim(); lettersContainer.innerHTML = ""; hangmanImg.src = "hangmanSteady.png"; trials.innerText = "YOU HAVE 5 TRIALS!"; wrongGuesses = 0; for (let i = 65; i <= 90; i++) { const letterBtn = document.createElement("button"); letterBtn.classList.add("letter-btn"); letterBtn.textContent = String.fromCharCode(i); letterBtn.addEventListener("click", handleGuess); lettersContainer.appendChild(letterBtn); } } //after click this disables all buttons function disableAllButtons() { const buttons = document.querySelectorAll(".letter-btn"); buttons.forEach((button) => { button.classList.add("disabled"); button.disabled = true; }); } restartBtn.addEventListener("click", init); init(); //this handles guesses function handleGuess(event) { const letter = event.target.innerText.toLowerCase(); event.target.classList.add("disabled"); event.target.disabled = true; if (chosenWord.includes(letter)) { guessedLetters.push(letter); const displayWord = chosenWord .split("") .map((letter) => (guessedLetters.includes(letter) ? letter : "_")) .join(" "); wordContainer.textContent = displayWord; } else { wrongGuesses++; if (wrongGuesses === 1) { trials.innerText = "4 trials left"; hangmanImg.src = "hangman1.png"; hangmanAud.src = "failed.mp3"; hangmanAud.play(); } else if (wrongGuesses === 2) { hangmanImg.src = "hangman2.png"; trials.innerText = "3 trials left"; hangmanAud.src = "failed.mp3"; hangmanAud.play(); } else if (wrongGuesses === 3) { hangmanImg.src = "hangman3.png"; trials.innerText = "2 trials left"; hangmanAud.src = "failed.mp3"; hangmanAud.play(); } else if (wrongGuesses === 4) { hangmanImg.src = "hangman4.png"; trials.innerText = "1 trials left"; hangmanAud.src = "failed.mp3"; hangmanAud.play(); } } handleGameOver(); } const handleGameOver = () => { if (wrongGuesses === 5) { message.textContent = `Game Over! ❌ The word was "${chosenWord}".`; disableAllButtons(); hangmanImg.src = "hangmanFailed.png"; trials.innerText = "0 TRIAL!"; hangmanAud.src = "gameover.mp3"; hangmanAud.play(); document.querySelector("#message").style.color = "red"; } if (chosenWord.split("").every((letter) => guessedLetters.includes(letter))) { message.textContent = "Congratulations! You guessed the word!"; hangmanImg.src = "hangmanSuccess.png"; trials.innerText = "Congrats!"; hangmanAud.src = "success.mp3"; hangmanAud.play(); document.querySelector("#message").style.color = "green"; disableAllButtons(); } };

Salin selepas log masuk

Penjelasan Kod;
Saya mencipta objek tatasusunan. Nama tatasusunan berfungsi sebagai petunjuk kepada perkataan itu. Permainan ini sedemikian rupa sehingga ia secara rawak gelung ke dalam objek kemudian mendapat tatasusunan tunggal, contohnya jika selepas ia gelung dan akhirnya mendapat tatasusunan bahasa. Ia kemudian menggelung secara rawak pada tatasusunan bahasa dan menyembunyikan tekaan. Oleh itu pemain hanya mempunyai petunjuk tentang perkara yang perlu diteka . Jadi jika perkataan yang diteka adalah "python". Pemain boleh cuba meneka perkataan. Jika selepas 5 percubaan tekaan yang gagal, anda gagal dalam permainan dan perlu dimulakan semula. Tetapi jika anda mendapat perkataan tanpa 5 percubaan yang gagal anda mendapat mesej tahniah.
Penambahan imej dan audio menjadikan permainan menarik menjadikan lebih lebih interaktif.

Kesimpulan
Membangunkan permainan Hangman ini merupakan pengalaman yang bermanfaat yang membolehkan saya menggunakan dan meningkatkan kemahiran saya dalam JavaScript. Ciri permainan, termasuk penjejakan percubaan, petunjuk, imej dinamik dan mesej maklum balas, mencipta pengalaman yang menarik dan interaktif untuk pemain. Menggunakan permainan pada Vercel memastikan ia boleh diakses dan dikongsi, mempamerkan keupayaan alat dan amalan pembangunan web moden.

Kemajuan Masa Depan.
Saya tidak sabar-sabar untuk menambah ciri baharu pada permainan pada masa hadapan untuk dilaksanakan.

점수 기록부 섹션: 기본적으로 성공과 실패의 양을 저장하며 10이 넘는 총점을 반환합니다. 예를 들어 6번 잘못된 시도를 하면 4/10을 얻습니다.
타이머 ⌛: 타이머를 구현합니다. 예를 들어 추측할 때마다 15초가 주어지며, 5초 후에 단어 입력에 실패하면 자동으로 시도 실패가 발생합니다. 게임의 난이도를 개선하기 위해.

향후 구현
MTnD Hangman 게임은 다양한 틈새 시장에서 사용될 수 있습니다. 귀하의 틈새 시장에 맞게 개체를 조정하는 것만 남았습니다. 나에게 필요한 유일한 것은 귀하의 특정 틈새 시장에 맞는 키워드입니다. MTnD 행맨은 다음과 같이 적용될 수 있습니다.

교육용 행맨: 수학, 과학, 역사와 같은 특정 주제에 맞게 게임을 맞춤화하고 플레이어가 이러한 주제와 관련된 용어를 추측합니다.
테마 행맨: 각 게임 세션에 대해 영화, 책, 유명 인물 등의 테마를 만듭니다.
다국어 행맨: 언어 학습에 도움이 되도록 다양한 언어 버전을 제공합니다.
사용자 정의 단어 목록: 사용자가 개인화된 경험을 위해 자신만의 단어 목록을 업로드하거나 만들 수 있습니다.
난이도 수준: 단어 길이나 복잡성에 따라 쉬움, 중간, 어려움 난이도 옵션을 포함합니다.
스토리 모드: 플레이어가 성공하면서 새로운 레벨이나 도전 과제를 잠금 해제하는 스토리라인 또는 진행 시스템을 통합합니다.

각 틈새 시장은 MTnD 행맨 게임에 독특한 변형을 제공하고 다양한 청중의 관심을 끌 수 있습니다.
이 프로젝트에 대한 제안을 환영합니다.

Atas ialah kandungan terperinci Mencipta Permainan Hangman Dinamik dengan JavaScript: Gambaran Keseluruhan Teknikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!