使用HTML CSS和JavaScript的猜词游戏

在本文中，我们将看到如何利用HTML、CSS和JavaScript实现一个猜词游戏。

在这里，我们提供了一个提示键和相应的缺口/空格总数，取决于单词的长度，并且每次仅接受一个字母作为输入。如果输入正确，那么该字母将填充到特定的空白处，否则，猜测将继续进行。它将看起来像下面的图片：

先决条件

方法

使用HTML标签创建游戏结构，例如

div>、

h1>用于标题、

用于显示单词和提示，并使用HTML输入标签为猜测的输入字母添加相应的类和ID。
* 使用类和元素添加不同的样式属性到游戏中，这将定义填充、边距、字体大小、对齐方式、颜色等特定元素的样式。
* 在JavaScript中，首先创建一个单词数组，以供选择。
* 然后使用JavaScript的Math.random()方法通过选择随机索引从列表中选择一个随机单词进行显示。
* 最初将所有字母显示为“_”或横线，通过使用一个命名为displayWord的与所选单词长度相同的变量。
* 使用array.push()将所猜字母推入guessedList数组，并使用循环更新displayWord中的每个出现的字母。
* 每次检查字母是否已经被猜测，如果是，则显示警告“您已经猜过该字母”。
* 当所有字母都被猜中时，在警告框中显示“您已经猜对了单词”。

项目结构

使用HTML CSS和JavaScript的猜词游戏

示例： 该示例描述了使用HTML、CSS和Javascript实现的基本 猜词游戏 。

Javascript

// script.js 
  
// Array of words to choose from 
const words = [ 
    "java", 
    "javascript", 
    "python", 
    "pascal", 
    "ruby", 
    "perl", 
    "swift", 
    "kotlin", 
]; 
  
// Geting random word from the list 
let randomIndex = Math.floor(Math.random() * words.length); 
let selectedWord = words[randomIndex]; 
console.log(selectedWord); 
  
// To store the already guessed letters 
let guessedlist = []; 
  
// For initial display Word 
let displayWord = ""; 
for (let i = 0; i < selectedWord.length; i++) { 
    displayWord += "_ "; 
} 
document.getElementById("displayWord").textContent = displayWord; 
  
// Function to check Guessed letter 
function guessLetter() { 
    let inputElement =  
        document.getElementById("letter-input"); 
  
    // To check empty input 
    if (!inputElement.value) { 
        alert("Empty Input box. Please add input letter"); 
        return; 
    } 
  
    let letter = inputElement.value.toLowerCase(); 
  
    // Clear the input field 
    inputElement.value = ""; 
  
    // Check if the letter has already been guessed 
    if (guessedlist.includes(letter)) { 
        alert("You have already guessed that letter!"); 
        return; 
    } 
  
    // Add the letter to the guessed letters array 
    guessedlist.push(letter); 
  
    // Update the word display based on the guessed letters 
    let updatedDisplay = ""; 
    let allLettersGuessed = true; 
    for (let i = 0; i < selectedWord.length; i++) { 
        if (guessedlist.includes(selectedWord[i])) { 
            updatedDisplay += selectedWord[i] + " "; 
        } else { 
            updatedDisplay += "_ "; 
            allLettersGuessed = false; 
        } 
    } 
    document.getElementById("displayWord") 
        .textContent = updatedDisplay; 
  
    // Check if all letters have been guessed 
    if (allLettersGuessed) { 
        alert("Congratulations! You guessed the word correctly!"); 
    } 
}

HTML

<!-- index.html -->
  
<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Word Guessing Game</title> 
    <link rel="stylesheet" 
          href="style.css" /> 
       <script src="./script.js"></script> 
</head> 
  
<body> 
    <div class="card"> 
        <h1>Guess the word</h1> 
        <p> 
              <b>Hint:</b> A programming language 
          </p> 
        <p id="displayWord"></p> 
        <p>Guess one letter: 
  
            <input type="text" 
                   maxlength="1" 
                   id="letter-input"> 
        </p> 
        <button onclick="guessLetter()"> 
              Submit 
          </button> 
    </div> 
</body> 
  
</html>

CSS

/* style.css */
  
/* Styling for the heading */
h1 { 
    background-color: rgb(231, 231, 231); 
    color: green; 
    font-size: xx-large; 
    padding: 2%; 
    /* width: 70vh; */
} 
  
/* Style for the card and border  */
.card { 
    min-width: 30%; 
    width: 50vh; 
    min-height: 30vh; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
    transition: 0.3s; 
    border-radius: 5px; 
    margin: auto; 
    padding: 2%; 
} 
  
/* Font and display style for complete body */
body { 
    display: flex; 
    text-align: center; 
    font-family: "Gill Sans",  
                   "Gill Sans MT",  
                   Calibri, "Trebuchet MS", 
                 sans-serif; 
} 
  
/* Adding style for input box */
input { 
    width: 30px; 
    padding: 1%; 
    font-size: larger; 
    text-align: center; 
    margin-left: 2%; 
} 
  
/* Adding style for display word*/
#displayWord { 
    font-size: xx-large; 
}