我正在用JavaScript,超文本标记语言和CSS制作一个Hangman游戏。我一直试图让wins变量在所有字母都被正确猜测后增加1,并在每个字母被猜测后将猜测数减1。
我还认为我需要合并这行代码,但无论我在哪里尝试插入它,游戏都会中断:
// Set the inner HTML contents of the #game div to our html string
document.querySelector(".container").innerHTML = html;
我的代码:
//Array of available words
const words = ["patriots", "bills", "dolphins", "jets", "chiefs", "chargers", "raiders", "broncos", "steelers", "ravens", "bengals", "browns", "jaguars", "titans", "colts", "texans", "eagles", "cowboys", "redskins", "giants", "rams", "seahawks", "cardinals", "niners", "vikings", "lions", "packers", "bears", "saints", "panthers", "falcons", "buccaneers"];
let currentWord;
let dashes = [];
let rightLetter = [];
let wrongLetter = [];
// Creating variables to hold the number of wins and guesses remaining
let wins = 0;
let guesses = 10;
// Creating a variable to hold our new HTML. Our HTML now keeps track of the user and computer guesses, and wins/losses/ties.
let html =
"<p>wins: " + wins + "</p>" +
"<p>guesses: " + guesses + "</p>";
//Click button to start game
document.getElementById("start").addEventListener("click",function(){
startGame("")
})
//Computer chooses a random word from the words array. The random choice becomes currentWord
function startGame(){
currentWord = words[Math.floor(Math.random() * words.length)];
//Creates underscores depending on length of the currentWord; push underscores to dashes array
for ( let i = 0; i < currentWord.length; i++ ) {
dashes.push(' _ ');
}
writeWordDashes(dashes.join(' '))
}
function writeWordDashes(str){
document.querySelector("#dashContainer").innerHTML = str;
}
//HTML document waits for key to be pressed; key is assiged Unicode value (a/A are diff)
document.addEventListener('keypress', (event) => {
let codes = event.keyCode;
//Convert a Unicode value into a character
let characters = String.fromCharCode(codes);
//Search currentWord for the users correct guess; push character to rightLetter array
if(currentWord.indexOf(characters) > -1)
rightLetter.push(characters);
//Replace dashes with correctly choosen characters
dashes[currentWord.indexOf(characters)] = characters;
//Loop over word and replace dashes
for( let i = 0; i < currentWord.length; i++) {
let currentLetter = currentWord[i];
if (currentLetter === characters) {
dashes[i] = characters;
}
}
//Write words to dashes
writeWordDashes (dashes.join(''))
//Search currentWord for the users incorrect guess; push character to wrongLetter array
if(currentWord.indexOf(characters) < 0)
wrongLetter.push(characters);
document.querySelector(".wrong").innerHTML = wrongLetter;
})
发布于 2018-08-18 08:28:32
-编辑--
所以,关于我做了什么/添加了什么,以及为什么。
如果可能,您应该避免使用字符串连接来创建html。在您的例子中,您可以预先创建html元素,然后通过document.getElementById('wins')或document.querySelector('wins')填充它们。如果你坚持保留你当前的实现,那么你需要把.container放在某个地方( ... ),但是每次你都需要更新容器,内容有一个相关的变化(可能封装在一个函数中),更新很可能是猜测部分。
下一步,由于游戏需要增加win变量,因此需要有一个获胜的场景。为此,我们需要一个新的变量,它声明游戏是否处于活动状态(否则您可能会一直赢/输)。每按一次键,都会有一个猜测。每一次猜测都会被检查,可能游戏已经赢了。在这种情况下,检查破折号是否包含‘_ ',如果不包含,则返回-1,游戏获胜。每次击键时,都会检查该字母是否在单词中。如果不是,那么猜测就会增加。未来的版本也可能允许在结束游戏之前进行固定数量的猜测。
-编辑--
<button id="start">Start</button>
<div id="dashContainer"></div>
<div class="wrong"></div>
wins <div id="wins"></div>
losses <div id="losses"></div>
guesses <div id="guesses"></div>
<script>
//Array of available words
const words = ["patriots", "bills", "dolphins", "jets", "chiefs", "chargers", "raiders", "broncos", "steelers", "ravens", "bengals", "browns", "jaguars", "titans", "colts", "texans", "eagles", "cowboys", "redskins", "giants", "rams", "seahawks", "cardinals", "niners", "vikings", "lions", "packers", "bears", "saints", "panthers", "falcons", "buccaneers"];
let currentWord;
let dashes = [];
let rightLetter = [];
let wrongLetter = [];
let gameActive = false;
// Creating variables to hold the number of wins and guesses remaining
let wins = 0;
let losses = 0;
let guesses = 0;
// Creating a variable to hold our new HTML. Our HTML now keeps track of the user and computer guesses, and wins/losses/ties.
function render() {
document.querySelector('#wins').textContent = wins;
document.querySelector('#losses').textContent = losses;
document.querySelector('#guesses').textContent = guesses;
}
render();
//Click button to start game
document.getElementById("start").addEventListener("click", function() {
startGame("")
})
function checkWin() {
if (!gameActive) return;
if (dashes.indexOf(' _ ') < 0) {
gameActive = false;
wins += 1;
}
}
//Computer chooses a random word from the words array. The random choice becomes currentWord
function startGame() {
gameActive = true;
currentWord = words[Math.floor(Math.random() * words.length)];
wrongLetter = [];
rightLetter = [];
guesses = 0;
dashes = [];
//Creates underscores depending on length of the currentWord; push underscores to dashes array
for (let i = 0; i < currentWord.length; i++) {
dashes.push(' _ ');
}
writeWordDashes(dashes.join(' '))
}
function writeWordDashes(str) {
document.querySelector("#dashContainer").innerHTML = str;
}
//HTML document waits for key to be pressed; key is assiged Unicode value (a/A are diff)
document.addEventListener('keypress', (event) => {
if (!gameActive) return;
let codes = event.keyCode;
//Convert a Unicode value into a character
let characters = String.fromCharCode(codes);
//Search currentWord for the users correct guess; push character to rightLetter array
if (currentWord.indexOf(characters) > -1)
rightLetter.push(characters);
//Replace dashes with correctly choosen characters
dashes[currentWord.indexOf(characters)] = characters;
//Loop over word and replace dashes
for (let i = 0; i < currentWord.length; i++) {
let currentLetter = currentWord[i];
if (currentLetter === characters) {
dashes[i] = characters;
}
}
//Write words to dashes
writeWordDashes(dashes.join(''))
//Search currentWord for the users incorrect guess; push character to wrongLetter array
if (currentWord.indexOf(characters) < 0) {
if (wrongLetter.indexOf(characters) < 0) {
wrongLetter.push(characters);
guesses += 1;
}
}
document.querySelector(".wrong").innerHTML = wrongLetter;
checkWin();
render();
})
</script>
https://stackoverflow.com/questions/51904013
复制相似问题