はじめに
MTnD Hangman ゲーム は古典的な単語当てゲームであり、さまざまな Web 開発スキルを練習し披露するための優れたプロジェクトとして機能します。このプロジェクトでは、試行回数の追跡、手がかりの提供、試行回数の表示、試行失敗後の画像の更新、推測が当たった場合のお祝いメッセージの表示などの強化された機能を備えたハングマン ゲームを開発しました。ゲームは Vercel にデプロイされ、簡単に共有してアクセスできるようになりました。
このゲームのデモはここで評価できます
機能
使用されているテクノロジー
HTML: ゲームの構造
HTML 構造は単純で、空の画像タグ、見出しタグ、オーディオ タグなどのゲームのコンポーネントを表示するための div と要素がいくつかあり、さまざまなゲーム状態を切り替えるためにアクセスできます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hangman</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="game-container">
<div class="togglemode"></div>
<h3 id="tries"></h3>
<h1>MTnD Hangman</h1>
<h5 id="clue"></h5>
<audio src="" id="hangman-aud" volume="9"></audio>
<div id="word-container"></div>
<div id="letters-container"></div>
<img alt="Hangman Image" id="hangman-img" />
<p id="message"></p>
<button id="restart-btn">Restart Game</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: ゲームのスタイル
CSS スタイルは、ゲームの視覚的な魅力と応答性を向上させます:
* {
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
主にゲームの条件文とインタラクティブ性のために使用されました。
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();
}
};
コードの説明;
配列のオブジェクトを作成しました。配列名は単語への手掛かりとなります。このゲームは、オブジェクトをランダムにループしてから単一の配列を取得するようなものです。たとえば、ループした後、最後に言語の配列を取得します。次に、言語配列をランダムにループし、推測を隠します。したがって、プレーヤーは何を推測すべきかについての手掛かりしか持ちません。したがって、推測された単語が「Python」の場合。プレーヤーは単語を推測することができます。推測に 5 回失敗した後、ゲームに失敗した場合は、再スタートする必要があります。ただし、5 回失敗せずに単語を取得すると、お祝いのメッセージが届きます。
画像と音声を追加すると、ゲームがよりインタラクティブになる魅力的なものになります。
結論
この Hangman ゲームの開発は、JavaScript のスキルを応用して向上させることができた、やりがいのある経験でした。トライアルの追跡、手がかり、動的な画像、フィードバック メッセージなどのゲームの機能は、プレイヤーにとって魅力的でインタラクティブなエクスペリエンスを生み出します。ゲームを Vercel にデプロイすると、ゲームにアクセスして共有できるようになり、最新の Web 開発ツールと実践の機能が実証されます。
将来の進歩。
将来的にはゲームに新しい機能を追加して実装することを楽しみにしています。
スコアキーパーセクション: 基本的に成功と失敗の量を保存し、10 を超える合計スコアを返します。たとえば、6 回間違った試行をした場合は 4/10 になります。
タイマー ⌛: タイマーを実装します。たとえば、5 秒後に単語の入力に失敗した場合、推測ごとに 15 秒の時間が与えられ、自動的に失敗となります。ゲームの難易度を向上させるため。
今後の実装
MTnD Hangman ゲームはさまざまなニッチな分野で使用できます。あとはあなたのニッチな分野に合わせてオブジェクトを調整するだけです。必要なのは、あなたの特定のニッチな分野に合わせたキーワードだけです。 MTnD ハングマンは次のように適用できます。
それぞれのニッチは、MTnD Hangman ゲームに独自のひねりを加え、さまざまな視聴者を魅了する可能性があります。
このプロジェクトに関するご提案をお待ちしております。
以上がJavaScript を使用した動的なハングマン ゲームの作成: 技術概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
