ホームページ >ウェブフロントエンド >CSSチュートリアル >JavaScript を使用した動的なハングマン ゲームの作成: 技術概要
JavaScript を使用した動的なハングマン ゲームの作成: 技術概要
- 王林オリジナル
- 2024-08-10 06:32:38722ブラウズ
はじめに
MTnD Hangman ゲーム は古典的な単語当てゲームであり、さまざまな Web 開発スキルを練習し披露するための優れたプロジェクトとして機能します。このプロジェクトでは、試行回数の追跡、手がかりの提供、試行回数の表示、試行失敗後の画像の更新、推測が当たった場合のお祝いメッセージの表示などの強化された機能を備えたハングマン ゲームを開発しました。ゲームは Vercel にデプロイされ、簡単に共有してアクセスできるようになりました。
このゲームのデモはここで評価できます
機能
- 試行回数: ゲームは、プレイヤーが誤った推測をした回数を追跡します。推測が間違っていると、残りの試行回数が減り、挑戦がさらに増えます。
- 手がかり: プレイヤーは単語を推測するのに役立つ手がかりを受け取ることができます。この機能は戦略と支援の層を追加し、ゲームをより魅力的にし、必要なときにヒントを提供することでユーザー エクスペリエンスを向上させます。ゲームをより魅力的で視覚的に魅力的なものにするために、画像の変更やお祝いメッセージなどの視覚的なフィードバックが統合されました。
- 試行回数の表示: 残りの試行回数が目立つように表示され、プレイヤーに情報を提供し、緊張感を高めます。
- 失敗した試行後の画像の変更: 推測が不正確になるたびに、ゲームは通常、絞首刑執行人の描画の進行状況を示す画像を更新します。この視覚的なフィードバックは、間違った推測の結果を視覚的に表現することにより、プレーヤーのエクスペリエンスを向上させます。 5.正しい推測に対するお祝いメッセージ: プレイヤーが単語の推測に成功すると、お祝いメッセージが表示され、ポジティブな強化とゲームの満足のいく結論が得られます。
- ゲーム ロジック: コア ゲーム ロジックは JavaScript 関数で実装され、推測の検証、状態の更新、勝敗条件の決定などのタスクを処理します。
- 展開: ゲームが完成し、徹底的にテストされると、Vercel に展開されました。デプロイメント プロセスには、コードを Git リポジトリにプッシュし、それを Vercel に接続することが含まれ、Vercel は残りのデプロイメントをシームレスに処理しました。 8. 間違った推測を示すために音声が追加され、ゲームがより興味深くなります。5 回失敗した後も音声で戻ります。単語の取得に成功すると、成功したことを示す音も得られます
使用されているテクノロジー
- HTML: ゲームの構造。
- CSS: ゲームインターフェイスのスタイルを設定します。
- Web の対話性と条件文に使用される JavaScript。 4.Vercel: ゲームは、フロントエンド プロジェクトを展開するための人気のあるプラットフォームである Vercel 上に展開されます。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 サイトの他の関連記事を参照してください。
Python JavaScript css html Array Object if for include Session Validating math Length Interface finally number this history display input git Access word
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。