西蒙游戲如何進行？

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的組合。 我將讓您繼續探索，但是這個答案將幫助您入門。

Answer 2

你可以使用setTimeout()如所描述這里 。 說的是：

setTimeout（）方法將在指定的毫秒數后調用一個函數或對一個表達式求值。 setTimeout(function(){ alert("Hello"); }, 3000);

（w3Schools參考文獻不是最好的參考文獻，在這里看不見，但這不是更復雜的事情，因此此鏈接應該有所幫助。）

Answer 3

我本人正在嘗試構建Simon游戲（我只是在前端開發中開始）。 這是我開始之前所做的一些指示。

我需要先從一個着色圖塊開始一次着色，然后再從兩個着色圖塊開始一次着色，依此類推，直到您決定的級別數為止。 因此，我的方法是已經定義了4個彩色圖塊，其中1表示紅色，2表示黃色，3表示藍色，4表示綠色。 現在，對於每個級別，我可以通過一個函數生成隨機數（1到4）。 因此，如果我使用的循環運行次數等於游戲級別，則將為級別1生成一個隨機數，為級別2生成2個隨機數，依此類推。

對於每個隨機數，您可以使相應的彩色拼貼變暗。

現在，對於有色瓷磚之間的時間間隔，您可以使用setInterval函數在一定的毫秒數后運行，只有在所需數量的瓷磚出血后才清除。 例如，在級別4上，setInterval應該以1000 ms的時間間隔運行4次。

現在，隨着級別的提高，您可以減少時間間隔，從而使游戲更快，更具挑戰性。

另外，記下您要如何讓用戶知道，現在該輪到他們玩了，並且，一旦用戶完成了級別，您如何告訴應用程序它不應該等待更多用戶輸入並分析結果級別，然后繼續進行下一個階段。

我知道，這全是話，但請相信我，如果您計划好了所有這些，那么您的努力就會越來越有成果。