Javascript - 函数在第一次之后不会以同样的方式运行

Question

我是学习前端和 Javascript 的新手，我正在设计一款游戏“学习初学者”以实现这一目标。

我的目的是：

• 1st - 将字母随机放入游戏板中。
• 2nd - 用户选择第一个（例如 A）。 代码分配了 firstSelectedLetter 类
• 3rd - 用户选择来的那个 在第一个选择之后（B，在这种情况下）代码分配 secondSelectedLetter 类
• 4rd - 代码比较两个字母 选中并且如果第二个出现在第一个选中的字母之后 它分配更正的类。

现在，我已经完成了所有这些步骤。但是当我继续播放并选择字母 C（或任何其他字母）时，代码不会在第 2 步和第 3 步之间拆分，它会将两个类（firstSelectedLetter 和 secondSelectedLetter）分配给单击的字母。它比较了同一个字母，当然它是错误的，游戏结束。

第一次发现字母A有1，字母B有2，比较后说我是对的，因为2=1+1。

Buuut，当我继续玩并选择字母 C 时，它只会分配两个类，比较相同的后者和 booom。

我尝试了很多组合，以及大量的变通方法。但我很确定我错过了一些我还没有学到的东西。我希望你们可以教给我并帮助其他人:)

这是供您参考的小提琴：https://jsfiddle.net/alejandroarag/qb91kean/

    // First I create the array with the abecedary letters
var abecedary = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];


// Second, I use this function to shuffle the letters randomly
function shuffleAbecedary() {
    var result;
    result = abecedary.sort(function () {
        return 0.5 - Math.random();
    });
    return result;
}

//From this function i got on the internet i get the position on the letters on the alphabet (like 1st, 2nd...)
function alphabetPosition(text) {
    var result = "";
    for (var i = 0; i < text.length; i++) {
        var code = text.toUpperCase().charCodeAt(i)
        if (code > 64 && code < 91) result += (code - 64) + " ";
    }

    return result.slice(0, result.length - 1);
}

// This function prints the letter in a DIV with a class and a dataset value that I will use later on
function lettersPrint() {
    var gameBoard = document.querySelector("#gameboard");
    var shuffledLetters = shuffleAbecedary();
    gameBoard.innerHTML = "";

    shuffledLetters.forEach(function (element) {
        var letter = document.createElement("div");
        letter.innerHTML = "<div class='letter' data-valor= " + element + ">" +
            "<div class='letter_content'>" +
            element +
            "</div>" +
            "</div>";
        //I put all of them inside the gameBoard ID
        gameBoard.appendChild(letter);
    });

}

function firstToSelect() {
    var firstSelected = document.querySelectorAll(".firstLetterSelected:not(.correct)");

    if (firstSelected.length > 0) {
        return
    }

    this.classList.add("selected");
    this.classList.add("firstLetterSelected");

    document.querySelectorAll(".letter:not(.selected)").forEach(function (element) {
        element.addEventListener("click", secondToSelect);
    });
}


function secondToSelect() {
    var firstSelected = document.querySelectorAll(".firstLetterSelected:not(.correct)");
    var secondSelected = document.querySelectorAll(".secondLetterSelected:not(.correct)");

    if (secondSelected.length > 0) {
        return
    }

    this.classList.add("selected");
    this.classList.add("secondLetterSelected");

    var lettersToCompare = firstSelected + secondSelected;


    compare(lettersToCompare);
}

function compare(lettersToCompare) {
    var firstLetter = document.querySelectorAll(".firstLetterSelected:not(.correct)");
    var secondLetter = document.querySelectorAll(".secondLetterSelected:not(.correct)");
    var firstLetterToCompare = alphabetPosition(firstLetter[0].dataset.valor);
    var secondLetterToCompare = alphabetPosition(secondLetter[0].dataset.valor);

    var lettersToCompare = firstLetterToCompare + "," + secondLetterToCompare;

    var theLetters = document.querySelectorAll(".selected:not(.correct)")
    var letsCompare = lettersToCompare.split(",");

    console.log(letsCompare[0]);
    console.log(letsCompare[1]);

    if (letsCompare[0] == letsCompare[1] - 1) {
        console.log("You are right!");
        correct(theLetters);

    } else {
        console.log("Opps you are not right!");
        error(theLetters);
    }
}

function correct(theLetters) {
    theLetters.forEach(function (element) {
        element.classList.add("correct");
    });
}

function error(theLetters) {


    //    theLetters.forEach(function (element) {
    //        element.classList.add("error");
    //
    //        setTimeout(
    //            function () {
    //                theLetters.forEach(function (element) {
    //                    element.classList.remove("selected");
    //                    element.classList.remove("error");
    //                });
    //            }, 1000);
    //    });
}

lettersPrint();
document.querySelectorAll(".letter").forEach(function (element) {
    element.addEventListener("click", firstToSelect);
});

Answer 1

我看了一下，我认为大问题在这里

    document.querySelectorAll(".letter:not(.selected)").forEach(function (element) {
        element.addEventListener("click", secondToSelect);
    });

您注册了第二个点击侦听器，但从未摆脱它？

首先我喜欢这个游戏，这对你来说是一个很好的练习。

您肯定需要将游戏的一些隐藏状态移出 的 HTML 和 CSS 并进入代码，你将能够实现更多 有点推卸责任。

现在状态在 CSS 类中，您可以获取哪个是 第一个，哪个是第二个，通过查看它，但你正在制作它 复杂;这就是我要做的。

var choices = [] // a list of letters chosen by the player

function isCorrect() {
    return choices.length == 2 & choices[0] < choices[1] // this is just for two letters at a time but could be made longer
}

function clear() {
  choices = []
}

function select(a) {
  if (choices.length == 2) {
    return
  }
  choices.push(a)
}

然后，我将注册 1，而不是注册 2 个单击侦听器，该侦听器将使用 select 将值添加到选项中，然后调用 isCorrect 以了解是否 它应该更新 UI 和状态（调用 clear 并从板上删除字母）。

奖励：您可以在 javascript 中比较很多值，在这种情况下，您应该尝试"a" < "b" 看看会发生什么！

Answer 2

根据我的理解，您的代码似乎过于复杂 达到。这让我觉得我可能误解了目标和游戏逻辑。如果是这种情况，下面的简化可能不合适。

基本上，我认为您可以减少大部分代码。

// first letter should always be A? If so, we can set lastSelected = (charCode 64). 
var lastSelected = String.fromCharCode(64), abecedary = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

// shuffle the letters randomly
function shuffle(arr) {
    var result = arr.sort(function () {
        return 0.5 - Math.random();
    });
    return result;
}

function checkOrder(e){
  var s = this.textContent;
  if ((s.charCodeAt(0) - 1) != lastSelected.charCodeAt(0)){
    this.classList.add("err");
  } else {
    this.classList.remove("err");
    this.classList.add("correct");
    lastSelected = s;
  }
}

shuffle(abecedary);

var l, board = document.getElementById("board");
for(i=0;i<abecedary.length;i++){
  l = document.createElement("div");
  l.setAttribute("class","letter");
  l.textContent = abecedary[i];
  l.addEventListener("click",checkOrder,false);
  board.appendChild(l);
}

#board {
  max-width:216px;
}
.letter {
  display:inline-block;
  width:24px;
  line-height:24px;
  text-align:center;
}
.err {
  background:#f99;
}
.correct {
  background:#9f9;
}

<div id="board"></div>