2017-07-06 44 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毫秒。

现在,随着水平的提高,你可以缩短时间差距,使游戏更快,更具挑战性。

另外,请记下您将如何让用户知道,现在轮到他们开始玩了,并且一旦用户完成了他们的等级,您如何告诉应用程序它不应该等待更多的用户输入并分析这个级别的结果,并进行或不进行下一个级别。

我知道,这是所有的话,但相信我,如果你有这一切计划,你的努力将会更少,更有成果。