javascript - 西蒙游戏如何进行？

Question

所以我正在尝试构建一个西蒙游戏。首先，我创建了一个随机数组，其中包含 20 个值，这些值在 1 到 4 之间变化(这将识别游戏的每种颜色)。所以 1 是红色，2 是蓝色，3 是绿色，4 是黄色。所以我得到了这样的数组:

var arrayRandomColors = [1, 3, 1, 2, 4, 3, 2, 1, 3, 2, 1, 2, 4, 1, 2, 3, 4, 1, 3, 2]

现在这是我的西蒙游戏的声音和颜色的顺序。但是，我现在需要像这样去那里的数组:

Level 1 - [1] -> Level 2 - [1, 3] -> Level 3 - [1, 3, 1] ->  Level 4 - [1, 3, 1, 2]... etc. And then each time it loops over these arrays it plays a sequence o sounds that corresponds to the current level.

这就是我所做的:

var j=2;
    var arrayPlay = [];
    for (var j=2; j<22; j++){
        for(var i=1; i<j; i++){
            arrayPlay.push(arrayRandomColors[i-1]);
        }
        console.log(arrayPlay); //[1] -> [1,3] -> [1,3,1]...etc
        arrayPlay = [];
    }

到目前为止，我已经成功获得了我想要的所有数组。然而，我对如何继续感到困惑，因为我需要慢慢地检查这些数字，显示所选的颜色并在循环时播放声音，而 for 循环太快了。我想过做这样的事情:

for (var j=2; j<22; j++){
        for(var i=1; i<j; i++){
            arrayPlay.push(arrayRandomColors[i-1]);
        }
        //console.log(arrayPlay);
        for (var k=0; k<arrayPlay.length; k++){
            var id = setInterval(function(){
                console.log("entrou");
            if (arrayPlay[k] == 1){
                $red.css("background-color", "#ffc1c1");
                $red.delay(500);
                $red.css("background-color", "red");
            }
            else if (arrayPlay[k] == 2){
                $blue.css("background-color", "#a5b0f7");
                $blue.delay(500);
                $blue.css("background-color", "blue");
            }
            else if (arrayPlay[k] == 3){
                $green.css("background-color", "#aff7a5");
                $green.delay(500)
                $green.css("background-color", "green");
            }
            else if (arrayPlay[k] == 4){
                $yellow.css("background-color", "#fffb91");
                $yellow.delay(500);
                $yellow.css("background-color", "yellow");
            }

            }, 500);
        }
        arrayPlay = [];
        console.log("\n");
    }

但是这不起作用。谁能帮帮我吗？

Answer 1

就像你说的那样，循环运行得太快了。您使用间隔的想法是一个很好的步骤，但有一个问题。您使用了 500 的固定间隔。现在尝试想象一下，循环运行得很快，并创建了一堆全是 500 的间隔，因此在 500 之后它们几乎同时运行。我们没有解决问题，我们只是延迟执行 500。

解决方案是使用递增间隔。将其乘以索引(记住加一，因为它是从零开始的)。像这样的东西:

setInterval(..., 500 * (k+1));

您可能需要使用索引j或k和j的组合。我将把这个问题留给您去探索，但这个答案将帮助您开始。