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
Teknologi Digunakan
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
![]()
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; } }
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(); } };
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!