JavaScript Word Scramble游戏

本文将演示使用JavaScript创建Word Scramble游戏。Word Scramble游戏是一款基于字母重排的简单问答游戏，用户需要根据所提供的提示猜出正确的单词。如果用户能够猜出正确的单词，显示结果为“正确”，如果猜错则显示“错误”。

完成后，该游戏将如下所示：

先决条件

方法

使用HTML标签如div、标题用于标题和乱序的单词、输入以及按钮用于接收用户输入和验证，同时使用相关的类名和ID，如代码示例中所示，创建基本的游戏布局。
然后，使用这些类名和ID使用CSS属性如显示、对齐内容来应用样式，如填充、边距、字体大小、背景颜色和边框来使其外观更好。
在JavaScript中，创建一个单词和提示的样本列表。使用Math.random()方法获取一个随机索引来显示单词和提示，使用document.getElementById方法。
在显示之前，使用math.random和自定义的shuffle函数混洗单词的字母并交换位置。
定义一个refresh函数，当点击刷新按钮时，刷新乱序的单词和提示。使用check函数通过点击检查按钮验证用户输入，并显示结果输出。
示例： 在此示例中，我们将使用上述方法创建一个带有样本单词和提示列表的Word Scramble游戏。

HTML

<!--index.html-->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <title>word scramble</title> 
    <link href="style.css" rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="root"> 
        <h1 class="title">Word Scramble Game</h1> 
        <div id="scrambled"> 
            <h2 id="scrambleWord">Word</h2> 
            <p id="hint"></p> 
        </div> 
        <div id="form"> 
            <input id="input" 
                   type="text" 
                   placeholder="Guess correct word" /> 
        </div> 
        <h3 id="output">Result:</h3> 
        <div class="foot"> 
            <button type="button" 
                    onclick="check()"> 
                Check 
            </button> 
            <button type="button" 
                    onclick="refresh()"> 
                Refresh 
            </button> 
        </div> 
        <script src="script.js"></script> 
    </div> 
</body> 
  
</html>

CSS

/* style.css */
body { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
  
    align-items: center; 
    min-height: 50vh; 
} 
  
.root { 
    font-size: x-large; 
    color: whitesmoke; 
    background-color: rgb(57, 151, 57); 
    box-shadow: 0 2px 5px grey; 
    padding: 0% 5% 1% 5%; 
  
    text-align: center; 
    border-radius: 5px 0; 
} 
  
.title { 
    border-bottom: 4px dashed; 
    border-color: white; 
} 
  
input { 
    font-size: 20px; 
    padding-left: 10px; 
    outline: 2px grey; 
} 
  
  
.foot { 
    margin-bottom: 0%; 
    display: flex; 
    width: 100%; 
} 
  
.foot>button { 
    width: 48%; 
    padding: 1%; 
    margin: 1%; 
    background-color: rgb(41, 117, 41); 
    border-radius: 5px; 
    border-color: rgb(29, 90, 29); 
    font-size: large; 
}

JavaScript

// script.js 
  
const words = [ 
    "react", 
    "angular", 
    "javascript", 
    "bootstrap", 
    "tailwind", 
]; 
  
// Respective list of hints 
const hints = [ 
    "JavaScript framework", 
    "JavaScript Framework", 
    "Scripting Language", 
    "Styling Library", 
    "Styling Library", 
]; 
  
// Initialize display word 
let displayWord = ""; 
  
// Function to shuffle letters 
function shuffle(str) { 
    strArray = Array.from(str); 
    for (let i = 0; i < strArray.length - 1; ++i) { 
        let j = Math.floor(Math.random() * strArray.length); 
        // Swap letters 
        let temp = strArray[i]; 
        strArray[i] = strArray[j]; 
        strArray[j] = temp; 
    } 
    return strArray.join(" "); 
} 
  
// Function to check input and display result 
function check() { 
    let input = document.getElementById("input"); 
    let output = document.getElementById("output"); 
    if ( 
        input.value.toLocaleLowerCase() === 
        displayWord.toLocaleLowerCase() 
    ) 
        output.innerHTML = "Result: Correct"; 
    else output.innerHTML = "Result: Incorrect"; 
} 
  
// To refresh and show new word 
function refresh() { 
    index = Math.floor(Math.random() * 5); 
    displayWord = words[index]; 
    displayHint = hints[index]; 
    scrambleWord =  
        document.getElementById("scrambleWord"); 
    scrambleWord.innerText = 
        shuffle(displayWord).toUpperCase(); 
    let hint = document.getElementById("hint"); 
    hint.innerHTML = "<b>Hint:</b> " + displayHint; 
    document.getElementById("output").innerText = "Result:"; 
} 
  
// Function call when page load for first time 
refresh();