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();
输出结果: