我是JavaScript新手,我创建了一个像游戏一样非常基本的hang子手,但有些事情我遇到了麻烦。我遇到麻烦的一件事是我的字母猜测数组。现在数组每次按下一个键都会显示,它会重复相同的字符(我不想)。无论按下该键多少次,我都希望阵列只显示按下的按键一次。如果按下相同的键,我也无法弄清楚如何使猜测计数器保持不变。Javascript hangman问题
我也不确定为什么游戏结束,然后才能看到条件满足的时间。例如,当您用完猜测时,警报将弹出,您仍然会看到剩余1个猜测。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div id="placeholders"> </div>
<div id="guessesRemaining"></div>
<div id="wins"></div>
<div id="losses"></div>
<div id="pressedLetters"></div>
<script type="text/javascript">
var arrayOfWords = ["alpha", "bravo", "charlie", "delta", "echo"];
var pickedWord;
var pickedWordArray = [];
var pickedWordPlaceholders = [];
var wins = 0;
var losses = 0;
var lettersGuessed;
var guessesLeft;
function newGame() {
guessesLeft = 10;
lettersGuessed = [];
pickedWord = arrayOfWords[Math.floor(Math.random() * arrayOfWords.length)];
pickedWordArray = pickedWord.split("");
pickedWordPlaceholders = [];
for (var i = 0; i < pickedWordArray.length; i++) {
pickedWordPlaceholders.push("_");
var placeHolderString = pickedWordPlaceholders.join(' ');
document.querySelector("#guessesRemaining").innerHTML ="Lives: " + guessesLeft;
document.querySelector("#placeholders").innerHTML = placeHolderString;
document.querySelector("#wins").innerHTML = "Wins: " + wins;
document.querySelector("#losses").innerHTML = "Losses: " + losses;
}
}
document.onkeyup = function(event) {
var userGuess = event.key;
lettersGuessed.push(userGuess);
for (var i = 0; i < pickedWordArray.length; i++) {
if (userGuess === pickedWordArray[i]) {
pickedWordPlaceholders[i] = userGuess;
}
}
document.querySelector("#placeholders").innerHTML = pickedWordPlaceholders.join(" ");
document.querySelector("#pressedLetters").innerHTML = lettersGuessed;
if (pickedWordPlaceholders.indexOf(userGuess) === -1) {
guessesLeft--;
}
document.querySelector("#guessesRemaining").innerHTML ="Lives: " + guessesLeft;
if (guessesLeft === 0){
losses++;
alert("You lose!");
newGame();
}
document.querySelector("#losses").innerHTML = "Losses: " + losses;
if (pickedWordPlaceholders.join("") === pickedWord){
wins++;
alert("You win!");
newGame();
}
document.querySelector("#wins").innerHTML = "Wins: " + wins;
}
newGame();
</script>
</body>
</html>
随时给我打电话了任何多余的代码,或任何东西,我可以做的更好。