Javascript Hangman游戏

Question

使用javascript编码处理刽子手游戏，我遇到了一些麻烦。 这就是我想要做的。 我创建了两个数组，其中包含要求解的单词，另一个包含字母表中的所有字母。 现在我想要当用户选择的字母与单词中找到的字母匹配时，它不仅显示出来，还会检查猜测的字母应该在哪个位置。为此，我使用了双For循环这可能是错误的方式。 指向正确方向的任何帮助都会很棒！

//JavaScript document
var answer = new Array('h', 'a', 'n', 'g', 'm', 'a', 'n');
var letters = new Array("a", "b ", "c ", "d ", "e ", "f ", "g ", 'h', "i ", "j ", "k ", "l ", "m ", "n ", "o ", "p ", "q " ,"r " ,"s ", "t ", "u ", "v ", "w ", "y ", "x "); 

onload = init;
function init(){
    updateDisplay();
document.getElementById("guess_button").onclick= 
function(){
    enter();
 }
}
function enter(){
    var list1 = "";
    var letter = document.getElementById("guess_text").value
    var box = document.getElementsByClassName("answer_char")
    if(letter == answer){
    for (var i = 0; i < answer.length; i++) {
        for(var j = 0; j < box.length; j++){
              if(answer[i] == box[j]) {
                      list1+= letter
                  }
              }
            box[j].innerHTML = list1
        }

  }
 }

function updateDisplay(){
    var list = " ";
  for(var i = 0; i < letters.length; i++){
        list += letters[i]
    }
document.getElementById("letter_pool").innerHTML = list
}

Answer 1

我认为使用一些正则表达式和几个if语句可以做一些改进。 另外，为了节省一些字符，我通常使用[]来初始化一个数组，表示new Array()是完全正确的。 更改此选项以使用正则表达式匹配字母。

//JavaScript document
var answer = new Array('h', 'a', 'n', 'g', 'm', 'a', 'n');
var letters = new Array("a", "b ", "c ", "d ", "e ", "f ", "g ", 'h', "i ", "j ", "k ", "l ", "m ", "n ", "o ", "p ", "q " ,"r " ,"s ", "t ", "u ", "v ", "w ", "y ", "x "); 

onload = init;
function init(){

我会删除它，只是在HTML文档中包含文本。

    updateDisplay();

enter（）不需要在这里单独，除非你想在其他地方调用它，你可以让它成为guess_button点击的click函数

    document.getElementById("guess_button").onclick= 
    function(){
        enter();
    }
}
function enter(){
    var list1 = "";
    var letter = document.getElementById("guess_text").value
    var box = document.getElementsByClassName("answer_char")

考虑到letter是一个字符串而answer是一个数组， letter不会是平等的answer 。

    if(letter == answer){

使用一些if语句可以减少这些for循环，并使字母更容易放入正确的位置

        for (var i = 0; i < answer.length; i++) {
            for(var j = 0; j < box.length; j++){
                if(answer[i] == box[j]) {
                    list1+= letter
                }
            }
            box[j].innerHTML = list1
        }
    }
}

我会删除它，只需将'az'放在HTML文件中，它最终会产生相同的结果。

function updateDisplay(){
    var list = " ";
    for(var i = 0; i < letters.length; i++){
        list += letters[i]
    }
    document.getElementById("letter_pool").innerHTML = list
}

如果你想跟踪猜测的字母，你可以创建一个在guess事件中调用的函数。

这就是我最终会使用的内容。 使用String.prototype.match（） 。 这假设answer和answerLetters是相同的长度，你的代码假设这一点，所以我认为这是安全的，但有办法写这个来考虑可能的不同长度或根据answer长度自动建立answerLetters 。

var answer = ['h','a','n','g','m','a','n'];
var letters = /^[a-zA-Z]*$/; 
var answerLetters = document.getElementsByClassName("answer_char");

// Redude this to just a click event, naming the function `enter` in 
// case we want to use it later
document.getElementById("guess_button").onclick = function enter() {
    var userGuess = document.getElementById("guess_text").value;

    // This uses String.prototype.match() to see if the user's guess
    // is actually a letter. Not needed, but nice error handling.
    // Also tests to see if the guess is just one character.
    if (userGuess.match(letters) && userGuess.length === 1) {
        for (var i = 0; i < answer.length; i++) {
            if (userGuess === answer[i])
                // Because answerLetters and answer are the same length we
                // know that answer[i] correlates to answerLetters[i].
                answerLetters[i].innerHTML = userGuess;
        }
    } else {
        throw new Error('User did not enter an English letter or entered more than one character.');
    }
}

您还可以使用一些聪明的正则表达式而不是for循环来确定userGuess在answer内的所有位置。 有关此问题的更多信息，请参阅另 然后，您可以使用indecies这个问题的答案我只是在我们使用相同的方式链接的answerLetters[i].innerHTML = userGuess; 。 这将允许您输入answer作为字符串而不是当前写入的数组。 如果你愿意，我可以为你写一个这样的片段。