删除节点元素而不删除 innerHTML
Remove node element without removing innerHTML
我正在重构 Fortune/Hangman 游戏的 vanilla JS Wheel,我正在尝试弄清楚如何删除下划线中显示的先前节点元素,这些下划线代表用户尝试访问的单词中的字母猜测。如果用户选择一个 5-6 个字母的单词,通常没问题,因为下一个随机单词可能超过 5-6 个字母,因此它将覆盖较短的下划线数组。我的问题是,像 "JAVASCRIPT" 这样的词会导致问题。如果用户获得 "ARRAYS",则前一个 "JAVASCRIPT" 中的 "RIPT" 将保留在页面上。我尝试了几种方法,例如 window.location.reload(),但我不想在每次用户猜对单词时都重新加载页面,因为我想添加一个基于点的系统。我试过 wordDisplay.remove() 但没有运气。最后,我尝试了
wordDisplay.childNodes.forEach(child => {
wordDisplay.removeChild(child);
});
但这不允许在按下播放按钮后显示下划线。也没有完全解决在wordDisplay中重置childNodes的问题。有什么办法可以解决这个问题吗?
let guessesLeft,
letterClicked,
wordChoice,
remainingLetters,
answerList = [],
wordArray = ["JAVASCRIPT", "ARRAYS", "FUNCTIONS", "HOISTING", "RECURSION", "EVENTS", "KEYUP", "TERNARY"],
hint = document.querySelector(".hint"),
letterGuessed = document.querySelector("#your-guess"),
numbers = document.querySelector("#numbers"),
guesses = document.querySelector("#guesses"),
wordDisplay = document.querySelector("#words"),
letterCount = document.querySelector(".letters"),
newGame = document.querySelector("#play"),
letterBoxes = document.querySelector("#alphabet"),
titleHeader = document.querySelector(".welcome"),
pointTotal = document.querySelector("#pointTotal");
function playGame() {
guessesLeft = 6;
guesses.innerHTML = `You have ${guessesLeft} guesses left`;
// Pick a random word.
wordChoice = wordArray[Math.floor(Math.random() * wordArray.length)];
for (var i = 0; i < wordChoice.length; i++) {
answerList[i] = "_";
}
// Display underscores on page representing each letter in the random word
wordDisplay.innerHTML = answerList.join('');
let hintObject = {
JAVASCRIPT: "The language of the web",
ARRAYS: "Similar to objects",
FUNCTIONS: "Stores instructions",
HOISTING: "Moving declarations to the top",
RECURSION: "Calling functions inside of functions",
EVENTS: "This happens to HTML elements; like a concert",
KEYUP: "Not 'keydown', but...",
TERNARY: "Type of operator"
}
hint.innerHTML = `Clue: ${hintObject[wordChoice]}`;
// Display number of letters in the random word on the page
remainingLetters = wordChoice.length;
letterCount.innerHTML = `The word is ${remainingLetters} letters long`;
// wordDisplay.childNodes.forEach(child => {
// wordDisplay.removeChild(child);
// });
}
// Register the player’s guess.
function buttonPress(e) {
letterClicked = e.target.textContent;
letterGuessed.innerHTML = `You guessed the letter ${letterClicked}`;
matchWord(letterClicked);
}
// Pass the letter event from buttonPress into the randomWord function
function matchWord(letter) {
pointTotal = 0;
if (remainingLetters > 0) {
let foundMatch = false;
for (var i = 0; i < wordChoice.length; i++) {
if (wordChoice[i] === letter) {
foundMatch = true;
answerList[i] = letter;
wordDisplay.innerHTML = answerList.join(' ');
remainingLetters--;
}
}
if (!foundMatch) {
guessesLeft--;
guesses.innerHTML = (`You have ${guessesLeft} guesses left`);
}
if (guessesLeft === 0) {
hint.innerHTML = "Sorry, you're out of guesses!";
setTimeout(function () {
hint.innerHTML = "If you'd like to play again, click the spin button.";
letterCount.innerHTML = "You lost :(";
}, 3000);
}
if (remainingLetters === 0) {
hint.innerHTML = "Great job! You guessed it!";
pointTotal++;
setTimeout(function () {
playGame();
}, 3000);
}
}
}
body {
background: linear-gradient(200deg, #025302, #027740, #05b965, #07e07b, #05532f);
background-size: contain;
color: white;
font-family: 'Merriweather', serif;
text-shadow: 2px 2px 3px rgb(27, 22, 22);
}
#container {
display: block;
margin: 20px;
}
#roundsWon {
margin-left: 15%;
font-size: 45px;
}
.welcome {
font-size: 80px;
letter-spacing: 5px;
text-align: center;
}
.letters, .lives {
font-size: 30px;
text-align: center;
}
.hint {
font-size: 35px;
text-align: center;
}
#words {
justify-content: center;
text-align: center;
font-size: 50px;
margin: 10px;
letter-spacing: 20px;
}
#alphabet {
margin: 0 auto;
width: 990px;
}
#letterChoices {
padding: 5px;
margin: 5px;
width: 2em;
height: 10%;
font-size: 2em;
border: 2px solid white;
text-align: center;
box-shadow: 2px 2px 3px black;
}
#play {
float: left;
margin: 20px auto;
font-size: 60px;
}
#your-guess {
float: right;
margin-right: 5%;
font-size: 40px;
color: #bada55;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Wheel of Fortune</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
</head>
<body>
<div class="Title">
<h1 class="welcome">Welcome to Wheel of Fortune!</h1>
</div>
<div id="alphabet" onclick="buttonPress(event)">
<a id="letterChoices" class="waves-effect waves-light btn-large">A</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">B</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">C</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">D</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">E</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">F</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">G</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">H</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">I</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">J</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">K</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">L</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">M</a>
</br>
<a id="letterChoices" class="waves-effect waves-light btn-large">N</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">O</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">P</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">Q</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">R</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">S</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">T</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">U</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">V</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">W</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">X</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">Y</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">Z</a>
</div>
<div id="container">
<div id="header">
<p class="hint">Hint will display once you spin</p>
<!-- The letters will be tied to the number of letters in the random array -->
<p class="letters">The word is <span id="numbers">_</span> letters long</p>
<!-- The user will be given a number of choices and with each wrong choice, they lose a turn -->
<p class="lives"><span id="guesses">You have _ guesses remaining</span></p>
<p id="words"></p>
</br>
<a id="play" onclick="playGame()" class="waves-effect waves-light btn-large">Spin</a>
<span id="roundsWon">Rounds won:<span id="pointTotal"></span></span>
<span id="your-guess">Letter guessed</span>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
answerList 之前已声明。因此,当像 'javascript' 这样的随机单词作为“__________”存储在 answerList 中并且数组 answerList 的长度变为 10 时。当像 [=27 这样的新单词时=] 在 answerList 中存储为 '______' 新 wordChoice 的长度小于最后一个 wordChoice 的长度,即 6,因此剩余的 4 个单词不会改变,这就是为什么 ript 未删除。
解决方法:
添加这一行
answerList = [];
之前
for (var i = 0; i < wordChoice.length; i++) {
answerList[i] = "_";
}
这会很好用。
您需要在每
之后重置您的值
setTimeout(function () {
answerList = [];
letterClicked = '';
playGame();
}, 3000);
因为目前你的数组保留了字母,你只覆盖了其中的一些并且你保留了最后点击的字母。
清算程序
playGame()
函数中添加了以下内容:
function playGame() {
/* Clearing Procedure */
wordDisplay.innerHTML = " ";
remainingLetters = 0;
answerList.length = 0;
...
还有一些表面上的变化,这些变化完全是可选的。要记住的一件事是 #ids
必须是唯一的,#letterChoices
.
有 26 个实例
演示
let guessesLeft,
letterClicked,
wordChoice,
remainingLetters,
answerList = [],
wordArray = ["JAVASCRIPT", "ARRAYS", "FUNCTIONS", "HOISTING", "RECURSION", "EVENTS", "KEYUP", "TERNARY"],
hint = document.querySelector("#hint"),
letterGuessed = document.querySelector("#guess"),
letterCount = document.querySelector("#letters"),
guesses = document.querySelector("#guesses"),
wordDisplay = document.querySelector("#words"),
newGame = document.querySelector("#play"),
letterBoxes = document.querySelector(".alphabet"),
titleHeader = document.querySelector("h1"),
pointTotal = document.querySelector("#pointTotal");
function playGame() {
/* Clearing Procedure */
wordDisplay.innerHTML = " ";
remainingLetters = 0;
answerList.length = 0;
guessesLeft = 6;
guesses.innerHTML = guessesLeft;
// Pick a random word.
wordChoice = wordArray[Math.floor(Math.random() * wordArray.length)];
for (var i = 0; i < wordChoice.length; i++) {
answerList[i] = "_";
}
// Display underscores on page representing each letter in the random word
wordDisplay.innerHTML = answerList.join('');
let hintObject = {
JAVASCRIPT: "The language of the web",
ARRAYS: "Similar to objects",
FUNCTIONS: "Stores instructions",
HOISTING: "Moving declarations to the top",
RECURSION: "Calling functions inside of functions",
EVENTS: "This happens to HTML elements; like a concert",
KEYUP: "Not 'keydown', but...",
TERNARY: "Type of operator"
}
hint.innerHTML = `Clue: ${hintObject[wordChoice]}`;
// Display number of letters in the random word on the page
remainingLetters = wordChoice.length;
letterCount.innerHTML = remainingLetters;
}
// Register the player’s guess.
function buttonPress(e) {
letterClicked = e.target.textContent;
letterGuessed.innerHTML = letterClicked;
matchWord(letterClicked);
}
// Pass the letter event from buttonPress into the randomWord function
function matchWord(letter) {
pointTotal = 0;
if (remainingLetters > 0) {
let foundMatch = false;
for (var i = 0; i < wordChoice.length; i++) {
if (wordChoice[i] === letter) {
foundMatch = true;
answerList[i] = letter;
wordDisplay.innerHTML = answerList.join(' ');
remainingLetters--;
}
}
if (!foundMatch) {
guessesLeft--;
guesses.innerHTML = guessesLeft;
}
if (guessesLeft === 0) {
hint.innerHTML = "Sorry, you're out of guesses!";
setTimeout(function() {
hint.innerHTML += "If you'd like to play again, click the spin button.";
letterCount.innerHTML = "You lost :(";
}, 3000);
}
if (remainingLetters === 0) {
hint.innerHTML = "Great job! You guessed it!";
pointTotal++;
setTimeout(function() {
playGame();
}, 3000);
}
}
}
body {
background: linear-gradient(200deg, #025302, #027740, #05b965, #07e07b, #05532f);
background-size: contain;
color: white;
font-family: 'Merriweather', serif;
text-shadow: 2px 2px 3px rgb(27, 22, 22);
}
.container {
margin: 20px;
}
[for=pointTotal] {
margin-left: 15%;
font-size: 45px;
}
h1 {
font-size: 80px;
letter-spacing: 5px;
text-align: center;
}
label {
margin: 5px;
}
label,
output {
display: block;
}
label output {
display: inline-block;
}
[for=letters],
[for=guesses] {
font-size: 30px;
text-align: center;
}
#hint {
font-size: 35px;
text-align: center;
}
#words {
text-align: center;
font-size: 50px;
margin: 10px;
letter-spacing: 20px;
}
.alphabet {
margin: 0 auto;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.letter {
padding: 5px;
margin: 5px;
width: 2em;
height: 10%;
font-size: 2em;
border: 2px solid white;
text-align: center;
box-shadow: 2px 2px 3px black;
}
#play {
float: left;
margin: 20px auto;
font-size: 60px;
}
[for=guess] {
float: right;
margin-right: 5%;
font-size: 40px;
color: #bada55;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Wheel of Fortune</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
</head>
<body>
<h1>Welcome to Wheel of Fortune!</h1>
<section class="alphabet" onclick="buttonPress(event)">
<a class="letter waves-effect waves-light btn-large">A</a>
<a class="letter waves-effect waves-light btn-large">B</a>
<a class="letter waves-effect waves-light btn-large">C</a>
<a class="letter waves-effect waves-light btn-large">D</a>
<a class="letter waves-effect waves-light btn-large">E</a>
<a class="letter waves-effect waves-light btn-large">F</a>
<a class="letter waves-effect waves-light btn-large">G</a>
<a class="letter waves-effect waves-light btn-large">H</a>
<a class="letter waves-effect waves-light btn-large">I</a>
<a class="letter waves-effect waves-light btn-large">J</a>
<a class="letter waves-effect waves-light btn-large">K</a>
<a class="letter waves-effect waves-light btn-large">L</a>
<a class="letter waves-effect waves-light btn-large">M</a>
<a class="letter waves-effect waves-light btn-large">N</a>
<a class="letter waves-effect waves-light btn-large">O</a>
<a class="letter waves-effect waves-light btn-large">P</a>
<a class="letter waves-effect waves-light btn-large">Q</a>
<a class="letter waves-effect waves-light btn-large">R</a>
<a class="letter waves-effect waves-light btn-large">S</a>
<a class="letter waves-effect waves-light btn-large">T</a>
<a class="letter waves-effect waves-light btn-large">U</a>
<a class="letter waves-effect waves-light btn-large">V</a>
<a class="letter waves-effect waves-light btn-large">W</a>
<a class="letter waves-effect waves-light btn-large">X</a>
<a class="letter waves-effect waves-light btn-large">Y</a>
<a class="letter waves-effect waves-light btn-large">Z</a>
</section>
<section class="container">
<header>
<output id="hint">Hint will display once you spin</output>
<!-- The letters will be tied to the number of letters in the random array -->
<label for="letters">The word is <output id="letters">_</output> letters long</label>
<!-- The user will be given a number of choices and with each wrong choice, they lose a turn -->
<label for='guesses'>You have <output id="guesses">_</output> guesses remaining</label>
<output id="words"></output>
<br>
<a id="play" onclick="playGame()" class="waves-effect waves-light btn-large">Spin</a>
<label for="pointTotal">Rounds won:<output id="pointTotal"></output></label>
<label for="guess">Letter guessed <output id='guess'>_</output></label>
</header>
</section>
</body>
</html>
我正在重构 Fortune/Hangman 游戏的 vanilla JS Wheel,我正在尝试弄清楚如何删除下划线中显示的先前节点元素,这些下划线代表用户尝试访问的单词中的字母猜测。如果用户选择一个 5-6 个字母的单词,通常没问题,因为下一个随机单词可能超过 5-6 个字母,因此它将覆盖较短的下划线数组。我的问题是,像 "JAVASCRIPT" 这样的词会导致问题。如果用户获得 "ARRAYS",则前一个 "JAVASCRIPT" 中的 "RIPT" 将保留在页面上。我尝试了几种方法,例如 window.location.reload(),但我不想在每次用户猜对单词时都重新加载页面,因为我想添加一个基于点的系统。我试过 wordDisplay.remove() 但没有运气。最后,我尝试了
wordDisplay.childNodes.forEach(child => {
wordDisplay.removeChild(child);
});
但这不允许在按下播放按钮后显示下划线。也没有完全解决在wordDisplay中重置childNodes的问题。有什么办法可以解决这个问题吗?
let guessesLeft,
letterClicked,
wordChoice,
remainingLetters,
answerList = [],
wordArray = ["JAVASCRIPT", "ARRAYS", "FUNCTIONS", "HOISTING", "RECURSION", "EVENTS", "KEYUP", "TERNARY"],
hint = document.querySelector(".hint"),
letterGuessed = document.querySelector("#your-guess"),
numbers = document.querySelector("#numbers"),
guesses = document.querySelector("#guesses"),
wordDisplay = document.querySelector("#words"),
letterCount = document.querySelector(".letters"),
newGame = document.querySelector("#play"),
letterBoxes = document.querySelector("#alphabet"),
titleHeader = document.querySelector(".welcome"),
pointTotal = document.querySelector("#pointTotal");
function playGame() {
guessesLeft = 6;
guesses.innerHTML = `You have ${guessesLeft} guesses left`;
// Pick a random word.
wordChoice = wordArray[Math.floor(Math.random() * wordArray.length)];
for (var i = 0; i < wordChoice.length; i++) {
answerList[i] = "_";
}
// Display underscores on page representing each letter in the random word
wordDisplay.innerHTML = answerList.join('');
let hintObject = {
JAVASCRIPT: "The language of the web",
ARRAYS: "Similar to objects",
FUNCTIONS: "Stores instructions",
HOISTING: "Moving declarations to the top",
RECURSION: "Calling functions inside of functions",
EVENTS: "This happens to HTML elements; like a concert",
KEYUP: "Not 'keydown', but...",
TERNARY: "Type of operator"
}
hint.innerHTML = `Clue: ${hintObject[wordChoice]}`;
// Display number of letters in the random word on the page
remainingLetters = wordChoice.length;
letterCount.innerHTML = `The word is ${remainingLetters} letters long`;
// wordDisplay.childNodes.forEach(child => {
// wordDisplay.removeChild(child);
// });
}
// Register the player’s guess.
function buttonPress(e) {
letterClicked = e.target.textContent;
letterGuessed.innerHTML = `You guessed the letter ${letterClicked}`;
matchWord(letterClicked);
}
// Pass the letter event from buttonPress into the randomWord function
function matchWord(letter) {
pointTotal = 0;
if (remainingLetters > 0) {
let foundMatch = false;
for (var i = 0; i < wordChoice.length; i++) {
if (wordChoice[i] === letter) {
foundMatch = true;
answerList[i] = letter;
wordDisplay.innerHTML = answerList.join(' ');
remainingLetters--;
}
}
if (!foundMatch) {
guessesLeft--;
guesses.innerHTML = (`You have ${guessesLeft} guesses left`);
}
if (guessesLeft === 0) {
hint.innerHTML = "Sorry, you're out of guesses!";
setTimeout(function () {
hint.innerHTML = "If you'd like to play again, click the spin button.";
letterCount.innerHTML = "You lost :(";
}, 3000);
}
if (remainingLetters === 0) {
hint.innerHTML = "Great job! You guessed it!";
pointTotal++;
setTimeout(function () {
playGame();
}, 3000);
}
}
}
body {
background: linear-gradient(200deg, #025302, #027740, #05b965, #07e07b, #05532f);
background-size: contain;
color: white;
font-family: 'Merriweather', serif;
text-shadow: 2px 2px 3px rgb(27, 22, 22);
}
#container {
display: block;
margin: 20px;
}
#roundsWon {
margin-left: 15%;
font-size: 45px;
}
.welcome {
font-size: 80px;
letter-spacing: 5px;
text-align: center;
}
.letters, .lives {
font-size: 30px;
text-align: center;
}
.hint {
font-size: 35px;
text-align: center;
}
#words {
justify-content: center;
text-align: center;
font-size: 50px;
margin: 10px;
letter-spacing: 20px;
}
#alphabet {
margin: 0 auto;
width: 990px;
}
#letterChoices {
padding: 5px;
margin: 5px;
width: 2em;
height: 10%;
font-size: 2em;
border: 2px solid white;
text-align: center;
box-shadow: 2px 2px 3px black;
}
#play {
float: left;
margin: 20px auto;
font-size: 60px;
}
#your-guess {
float: right;
margin-right: 5%;
font-size: 40px;
color: #bada55;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Wheel of Fortune</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
</head>
<body>
<div class="Title">
<h1 class="welcome">Welcome to Wheel of Fortune!</h1>
</div>
<div id="alphabet" onclick="buttonPress(event)">
<a id="letterChoices" class="waves-effect waves-light btn-large">A</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">B</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">C</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">D</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">E</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">F</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">G</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">H</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">I</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">J</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">K</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">L</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">M</a>
</br>
<a id="letterChoices" class="waves-effect waves-light btn-large">N</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">O</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">P</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">Q</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">R</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">S</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">T</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">U</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">V</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">W</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">X</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">Y</a>
<a id="letterChoices" class="waves-effect waves-light btn-large">Z</a>
</div>
<div id="container">
<div id="header">
<p class="hint">Hint will display once you spin</p>
<!-- The letters will be tied to the number of letters in the random array -->
<p class="letters">The word is <span id="numbers">_</span> letters long</p>
<!-- The user will be given a number of choices and with each wrong choice, they lose a turn -->
<p class="lives"><span id="guesses">You have _ guesses remaining</span></p>
<p id="words"></p>
</br>
<a id="play" onclick="playGame()" class="waves-effect waves-light btn-large">Spin</a>
<span id="roundsWon">Rounds won:<span id="pointTotal"></span></span>
<span id="your-guess">Letter guessed</span>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
answerList 之前已声明。因此,当像 'javascript' 这样的随机单词作为“__________”存储在 answerList 中并且数组 answerList 的长度变为 10 时。当像 [=27 这样的新单词时=] 在 answerList 中存储为 '______' 新 wordChoice 的长度小于最后一个 wordChoice 的长度,即 6,因此剩余的 4 个单词不会改变,这就是为什么 ript 未删除。
解决方法: 添加这一行
answerList = [];
之前
for (var i = 0; i < wordChoice.length; i++) {
answerList[i] = "_";
}
这会很好用。
您需要在每
之后重置您的值setTimeout(function () {
answerList = [];
letterClicked = '';
playGame();
}, 3000);
因为目前你的数组保留了字母,你只覆盖了其中的一些并且你保留了最后点击的字母。
清算程序
playGame()
函数中添加了以下内容:
function playGame() { /* Clearing Procedure */ wordDisplay.innerHTML = " "; remainingLetters = 0; answerList.length = 0; ...
还有一些表面上的变化,这些变化完全是可选的。要记住的一件事是 #ids
必须是唯一的,#letterChoices
.
演示
let guessesLeft,
letterClicked,
wordChoice,
remainingLetters,
answerList = [],
wordArray = ["JAVASCRIPT", "ARRAYS", "FUNCTIONS", "HOISTING", "RECURSION", "EVENTS", "KEYUP", "TERNARY"],
hint = document.querySelector("#hint"),
letterGuessed = document.querySelector("#guess"),
letterCount = document.querySelector("#letters"),
guesses = document.querySelector("#guesses"),
wordDisplay = document.querySelector("#words"),
newGame = document.querySelector("#play"),
letterBoxes = document.querySelector(".alphabet"),
titleHeader = document.querySelector("h1"),
pointTotal = document.querySelector("#pointTotal");
function playGame() {
/* Clearing Procedure */
wordDisplay.innerHTML = " ";
remainingLetters = 0;
answerList.length = 0;
guessesLeft = 6;
guesses.innerHTML = guessesLeft;
// Pick a random word.
wordChoice = wordArray[Math.floor(Math.random() * wordArray.length)];
for (var i = 0; i < wordChoice.length; i++) {
answerList[i] = "_";
}
// Display underscores on page representing each letter in the random word
wordDisplay.innerHTML = answerList.join('');
let hintObject = {
JAVASCRIPT: "The language of the web",
ARRAYS: "Similar to objects",
FUNCTIONS: "Stores instructions",
HOISTING: "Moving declarations to the top",
RECURSION: "Calling functions inside of functions",
EVENTS: "This happens to HTML elements; like a concert",
KEYUP: "Not 'keydown', but...",
TERNARY: "Type of operator"
}
hint.innerHTML = `Clue: ${hintObject[wordChoice]}`;
// Display number of letters in the random word on the page
remainingLetters = wordChoice.length;
letterCount.innerHTML = remainingLetters;
}
// Register the player’s guess.
function buttonPress(e) {
letterClicked = e.target.textContent;
letterGuessed.innerHTML = letterClicked;
matchWord(letterClicked);
}
// Pass the letter event from buttonPress into the randomWord function
function matchWord(letter) {
pointTotal = 0;
if (remainingLetters > 0) {
let foundMatch = false;
for (var i = 0; i < wordChoice.length; i++) {
if (wordChoice[i] === letter) {
foundMatch = true;
answerList[i] = letter;
wordDisplay.innerHTML = answerList.join(' ');
remainingLetters--;
}
}
if (!foundMatch) {
guessesLeft--;
guesses.innerHTML = guessesLeft;
}
if (guessesLeft === 0) {
hint.innerHTML = "Sorry, you're out of guesses!";
setTimeout(function() {
hint.innerHTML += "If you'd like to play again, click the spin button.";
letterCount.innerHTML = "You lost :(";
}, 3000);
}
if (remainingLetters === 0) {
hint.innerHTML = "Great job! You guessed it!";
pointTotal++;
setTimeout(function() {
playGame();
}, 3000);
}
}
}
body {
background: linear-gradient(200deg, #025302, #027740, #05b965, #07e07b, #05532f);
background-size: contain;
color: white;
font-family: 'Merriweather', serif;
text-shadow: 2px 2px 3px rgb(27, 22, 22);
}
.container {
margin: 20px;
}
[for=pointTotal] {
margin-left: 15%;
font-size: 45px;
}
h1 {
font-size: 80px;
letter-spacing: 5px;
text-align: center;
}
label {
margin: 5px;
}
label,
output {
display: block;
}
label output {
display: inline-block;
}
[for=letters],
[for=guesses] {
font-size: 30px;
text-align: center;
}
#hint {
font-size: 35px;
text-align: center;
}
#words {
text-align: center;
font-size: 50px;
margin: 10px;
letter-spacing: 20px;
}
.alphabet {
margin: 0 auto;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.letter {
padding: 5px;
margin: 5px;
width: 2em;
height: 10%;
font-size: 2em;
border: 2px solid white;
text-align: center;
box-shadow: 2px 2px 3px black;
}
#play {
float: left;
margin: 20px auto;
font-size: 60px;
}
[for=guess] {
float: right;
margin-right: 5%;
font-size: 40px;
color: #bada55;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Wheel of Fortune</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
</head>
<body>
<h1>Welcome to Wheel of Fortune!</h1>
<section class="alphabet" onclick="buttonPress(event)">
<a class="letter waves-effect waves-light btn-large">A</a>
<a class="letter waves-effect waves-light btn-large">B</a>
<a class="letter waves-effect waves-light btn-large">C</a>
<a class="letter waves-effect waves-light btn-large">D</a>
<a class="letter waves-effect waves-light btn-large">E</a>
<a class="letter waves-effect waves-light btn-large">F</a>
<a class="letter waves-effect waves-light btn-large">G</a>
<a class="letter waves-effect waves-light btn-large">H</a>
<a class="letter waves-effect waves-light btn-large">I</a>
<a class="letter waves-effect waves-light btn-large">J</a>
<a class="letter waves-effect waves-light btn-large">K</a>
<a class="letter waves-effect waves-light btn-large">L</a>
<a class="letter waves-effect waves-light btn-large">M</a>
<a class="letter waves-effect waves-light btn-large">N</a>
<a class="letter waves-effect waves-light btn-large">O</a>
<a class="letter waves-effect waves-light btn-large">P</a>
<a class="letter waves-effect waves-light btn-large">Q</a>
<a class="letter waves-effect waves-light btn-large">R</a>
<a class="letter waves-effect waves-light btn-large">S</a>
<a class="letter waves-effect waves-light btn-large">T</a>
<a class="letter waves-effect waves-light btn-large">U</a>
<a class="letter waves-effect waves-light btn-large">V</a>
<a class="letter waves-effect waves-light btn-large">W</a>
<a class="letter waves-effect waves-light btn-large">X</a>
<a class="letter waves-effect waves-light btn-large">Y</a>
<a class="letter waves-effect waves-light btn-large">Z</a>
</section>
<section class="container">
<header>
<output id="hint">Hint will display once you spin</output>
<!-- The letters will be tied to the number of letters in the random array -->
<label for="letters">The word is <output id="letters">_</output> letters long</label>
<!-- The user will be given a number of choices and with each wrong choice, they lose a turn -->
<label for='guesses'>You have <output id="guesses">_</output> guesses remaining</label>
<output id="words"></output>
<br>
<a id="play" onclick="playGame()" class="waves-effect waves-light btn-large">Spin</a>
<label for="pointTotal">Rounds won:<output id="pointTotal"></output></label>
<label for="guess">Letter guessed <output id='guess'>_</output></label>
</header>
</section>
</body>
</html>