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
}

image of the hangman screen

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点击的点击功能

    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
        }
    }
}

我会删除它并将'a-z'放在HTML文件中，最终会产生相同的结果。

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

如果你想跟踪猜测的字母，可以为猜测事件调用这个函数。

这就是我最终会使用的内容。使用String.prototype.match()。这假定answer和answerLetters长度相同，您的代码假设这样，所以我认为这是安全的，但有办法写这个来考虑可能的不同长度或自动构建answerLetters基于answer长度。

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内的所有位置。 More info on this in another question.然后，您可以像我们使用indecies一样使用我刚刚关联的答案的answerLetters[i].innerHTML = userGuess;。这将允许您输入answer作为字符串而不是当前写入的数组。如果你愿意，我可以为你写一个这样的片段。

Javascript Hangman游戏

1 个答案: