2017-07-06 84 views
1

所以我試圖建立一個Simon遊戲。 首先,我創建了一個隨機數組,其中有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"); 
    } 

但它不起作用。誰能幫我嗎?

回答

0

您可以使用setTimeout(),如here所述。這說:

setTimeout()方法調用一個函數或在指定的毫秒數後評估表達式。 setTimeout(function(){ alert("Hello"); }, 3000);


(W3Schools的引用是不是最好的,在這裏也不好看出,但它不是一個更復雜的事情,所以這個環節應該有所幫助。)

1

像你這樣的循環說運行太快。你的想法使用間隔是一個好的步驟,但有一個問題。你使用了500的固定間隔。現在試着想象一下,循環運行速度很快,並創建了一大堆500個間隔,所以它們都會在500之後幾乎同時運行。我們沒有解決這個問題,我們只是延遲執行500.

解決方法是使用遞增間隔。將其乘以索引(請記住添加一個,因爲它基於零)。喜歡的東西:

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

你可能需要使用索引jkj的組合。我會留給你去探索,但這個答案會讓你開始。

0

我自己正在嘗試構建Simon遊戲(我剛剛開始在前端開發)。以下是我在開始之前所做的一些指示。

我需要從一個着色拼貼開始一次,然後是兩個着色拼貼,每個開始一次,以此類推你決定的關卡數量。所以,我的方法是將4個彩色瓷磚定義爲紅色,1代表黃色,3代表藍色,4代表綠色瓷磚。現在,我可以通過函數生成隨機數字(1到4)。所以,如果我使用的循環次數等於遊戲所在的級別,我將爲第1級生成一個隨機數,爲第2級生成2個隨機數等等。

對於每個隨機數,您可以使相應的彩色圖塊發出嗶嗶聲。

現在,對於彩色圖塊的嗶嗶聲之間的時間間隔,您可以使用setInterval函數在一定的毫秒數後運行,只有當需要的圖塊數量已經泄露時纔會清除。例如。在級別4上,setInterval應該運行4次,時間間隔爲1000毫秒。

現在,隨着水平的提高,你可以縮短時間差距,使遊戲更快,更具挑戰性。

另外,請記下您將如何讓用戶知道,現在輪到他們開始玩了,並且一旦用戶完成了他們的等級,您如何告訴應用程序它不應該等待更多的用戶輸入並分析這個級別的結果,並進行或不進行下一個級別。

我知道,這是所有的話,但相信我,如果你有這一切計劃,你的努力將會更少,更有成果。