如何制作基于数组的Simon Js游戏

How to make a Simon Js game based on arrays?

本文关键字：Simon Js 游戏 数组 何制作 于数组      更新时间：2023-09-26

我正在写一个js简单的simon游戏，但我对如何做一无所知。

我知道：

我需要创建两个数组和一个级别（分数）变量

  • 需要添加一个从1到4（包括1到4）的随机生成的数字到第一个数组，当按下四个按钮中的一个时，值如果第二个数组不是
    与第一阵列相同大小或更大。每次添加值对于第二个数组，检查该值是否等于
    中的值第一个阵列中的相同位置，如果不是，则清除两个阵列，以及将levelvar设置为1，并提醒"gameover"这意味着如果您得到一个
    错了，你不能继续了。如果第二个数组的长度
    匹配级别变量，在数组1中添加一个随机数，清除
    数组二，递增levelvar

但是，我对代码方面一无所知。

我的Jsfidle：http://jsfiddle.net/jbWcG/2/

JS:

var x = []
var y = []
var levelvar = 1
document.getElementById("test").onclick= function() {
document.getElementById("test").innerHTML=x
};
document.getElementById("button1").onclick= function() {
x.push("Red")
};
document.getElementById("button2").onclick= function() {
x.push("Green")
};
document.getElementById("button3").onclick= function() {
x.push("Yellow")
};
document.getElementById("button4").onclick= function() {
x.push("Blue")
};

HTML:

<button id="button1">Red</button><br />
<button id="button2">Green</button><br />
<button id="button3">Yellow</button><br />
<button id="button4">Blue</button><br />
<p id="test">Click To see What you have clicked</p>

如何使两个数组看到某个值是否相同？

比方说，生成的数组是：[1,2,3,4,1,2,3]如果我在第5位，按2，我该如何检查这两个数字是否匹配？提前感谢

一次检查一个数组的位置i是x的最简单方法是

if (gen_arr[i] == x) {
  // matches
} else {
  // doesn't match
}

因此，如果你对游戏的流程进行概念化，你会想，在按下每个按钮时：

  1. 以某种方式跟踪它们所在的索引（可能有一个计数器，每次按下按钮都会递增）
  2. 检查是否为gen_arr[i] == x（如果不是，则显示游戏结束）

或者，您可以调用gen_array.shift()来获取gen_array中的第一个项，并将其从数组中删除，而不是跟踪哪个索引，其流程类似于：

var gen_array = [1,2,3,4,1];
function press_button(button_pressed) {
  var supposed_to_be = gen_array.shift();
  // at this point, on the first call,
  //   supposed_to_be = 1, and gen_array = [2,3,4,1]
  if (supposed_to_be != button_pressed) {
    // game over!
  } else {
    // you survive for now!
    if (gen_array.length() == 0) {
      // gen_array is empty, they made it through the entire array
      // game is won!
    }
  }
}

虽然这代表了每一步的一般"检查内容"，但不建议逐字逐句地使用，因为它会很快导致非结构化游戏。

我建议查看所谓的"游戏状态"图，这些图基本上是流程图，其中包含游戏的每个"状态"——在您的情况下，至少包括

  1. "显示"图案
  2. 等待按钮按下
  3. 检查按钮按下是否正确
  4. 游戏结束
  5. 赢得比赛

从每个状态中，画出"如何"从一个状态过渡到下一个状态的箭头。你可以通过谷歌搜索来查看示例。

一旦你有了一个好的游戏状态图/流程图，就更容易将你的程序分解成特定的块，并更好地组织它。。。然后你通常可以准确地看到你需要编码什么，缺少什么/没有缺少什么。

相关文章：