javascript - 我对 For 循环的理解正确吗？我缺少什么？ - JavaScript

Question

这是我制作的一个小游戏，旨在尝试练习 JavaScript，基本上玩家选择一个四色代码，计算机有十次轮次来猜测它。我设置了两个 for 循环，一个循环运行玩家的四种颜色代码，另一个循环运行计算机的代码(无论它做出什么猜测)。在循环中进行检查，如果计算机的猜测与玩家输入的内容相匹配，我希望保存该值，如果不是，则计算机随机选择不同的颜色，我们以这种方式继续 10 轮，或者直到计算机玩家猜出整个代码。我遇到的问题是，如果计算机的猜测与玩家的猜测相匹配，则该信息不会被延续到下一回合。因此，如果计算机猜测第一种颜色是紫色，并且第一种颜色是紫色，那么下一回合第一个猜测应该从紫色开始。希望这是有道理的。我怀疑有更好的方法可以做到这一点，但我是新手。这是我正在做的事情的链接。

http://codepen.io/terratunaz/pen/bNBoVY

var colorSelection; //the current selected color 
var clickCount = 0;
var playerCode = []; //holds player's code
var computerGuess = [];
var numColorValue = 0;
var computerSaveGuess = [];


//Fancy yet simple code to make the selectable colors respond to the user's actions   
$(document).ready(function() {

    $("div.codeOption").mouseenter(function() {

        $(this).animate({
            opacity: "0.1"
        }, "slow");
    });

    $("div.codeOption").mouseleave(function() {

        $(this).animate({
            opacity: "1"
        }, "fast");
    });


    //Have the player choose a 4 color code amongst the 6 possible choices on screen and store that information
    $("div.codeOption").click(function() {

        if (clickCount < 4) {


            colorSelection = $(this).attr("id");
            playerCode[clickCount] = colorSelection;
            clickCount++

        }

        if (playerCode.length === 4) {

            $("div.codeOption, #inGameInstructions").css("display", "none");

            $("#hackCode").css("display", "block");

            $("#playersFinalCode").append("<p id='furtherInstructions'>This is the code you have selected. Press the [HackCode] button to continue, or use the button at the top right corner to go back to the main menu to start over from the beginning.</p>");


            for (i = 0; i < playerCode.length; i++) {


                if (playerCode[i] === "red") {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div");

                } else if (playerCode[i] === "green") {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div");

                } else if (playerCode[i] === "orange") {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div");

                } else if (playerCode[i] === "yellow") {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div");

                } else if (playerCode[i] === "blue") {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div>");

                } else {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div>");

                }


            }

        }

        //   


        //

    });




    function HackCode() {
        $("#hackCode").click(function() {

            $("#hackCode").css("display", "none");
            $(".playerCodeChoice, #furtherInstructions").css("display", "none");

            //Computer logic for guessing
            var computerTurn = 10;

            while (computerTurn > 0)

            {

                /*
 for(i=0;i<playerCode.length; i++){


         if(playerCode[i].length===5){
       //red

     }

        else if(playerCode[i].length===5){
       //green

     }

     else if(playerCode[i].length ===4){
         //blue
     }

    else
      { if(playerCode[i].length ===6 && playerCode[i][0] === "o" ){
        //orange
      }

       else if(playerCode[i].length ===6 && playerCode[i][0] === "p" ){
        //purple
      }
        else{//yellow
        }
      }

  computerGuess.push(playerCode[i]);




}*/


                for (c = 0; c != 4; c++) {

                    for (i = 0; i != 4; i++) {



                        //if(computerGuess[c] === playerCode[i])
                        //      


                        // numColorValue = Math.floor((Math.random() * 6) + 1);

                        if (computerGuess[c] === playerCode[i]) {
                            computerGuess[c] = playerCode[i];
                        } else {
                            numColorValue = Math.floor((Math.random() * 6) + 1);

                            if (numColorValue === 1) {
                                computerGuess[c] = ("red");

                            } else if (numColorValue === 2) {
                                computerGuess[c] = ("green");

                            } else if (numColorValue === 3) {
                                computerGuess[c] = ("orange");

                            } else if (numColorValue === 4) {
                                computerGuess[c] = ("yellow");

                            } else if (numColorValue === 5) {
                                computerGuess[c] = ("blue");

                            } else {
                                computerGuess[c] = ("purple");

                            }
                        }

                    }

                }


                $("#guessList").append("<li class='list'>" + computerGuess + "</li>");
                computerTurn--;


            }

        });

    }

    HackCode();


    //Clears whatever is on the screen and displays the main menu when the player clicks on the button to go there
    function hideToMainMenu() {
        $("#toMainMenu").click(function() {
            $(".codeOption, #toMainMenu, #inGameInstructions,#helpMenuInstructions, #hackCode,.playerCodeChoice, #furtherInstructions, .list").css("display", "none");

            $("#mainTitle, #playGame, #helpMenu").css("display", "block");
            playerCode.length = 0;
            computerGuess.length = 0;
            clickCount = 0;
        });
    }

    hideToMainMenu();

    //Clears whatever is on the screen and displays the actual beginning of the game when the player clicks on the button to go there
    function playGame() {
        $("#playGame").click(function() {

            $("#mainTitle, #playGame, #helpMenu, #helpMenuInstructions").css("display", "none");

            $("#toMainMenu").css({
                "margin-top": "-5px",
                "float": "right"
            });
            $(".codeOption, #toMainMenu, #inGameInstructions").css("display", "block");


        });
    }

    playGame();

    //Clears whatever is on the screen and displays the main menu when the player clicks on the button to go there
    function hideHelpMenu() {
        $("#helpMenu").click(function() {
            $("#mainTitle,#helpMenu, #inGameInstructions").css("display", "none");


            $("#toMainMenu").css({
                "margin-top": "5px",
                "float": "none"
            });
            $("#helpMenuInstructions, #toMainMenu").css("display", "block");

        });

    }

    hideHelpMenu();


});

/

Answer 1

我觉得你的逻辑需要改进。这个游戏应该只需要一个for循环，因为你只需要检查第一个是否匹配第一个，第二个匹配第二个等等。你当前的问题是它会检查计算机的选择是否匹配所有玩家的选择，并且只会被结转如果它与最后一个匹配。

您还可以将正确的猜测保存在另一个 bool 数组中。然后在 for 循环开始时检查是否已经被猜到。

如果你确实希望计算机能够猜测第一个=红色，并将其与玩家的第二个=红色相匹配，你应该添加一个中断；循环内的语句来停止它。