Javascript：3次尝试游戏逻辑

Question

我正在构建一个 javascript+css 游戏，它显示 3 个心形图标，代表游戏允许用户进行的 3 次尝试。

我有 3 种类型的心：

正常的心代表未使用的尝试

突出显示的心代表成功的尝试

交叉的心代表失败的尝试

另外我还有一个名为“结果”的变量，用于存储 0（尝试失败）或 1（尝试成功） ）

你能帮我描述一下 3 次尝试的逻辑吗？这意味着根据用户操作改变屏幕上的心形图标。 我首先展示了游戏开始时必须展示的 3 个正常的红心，但我不知道如何遵循，我被卡住了！

组合可以是（O 是正常心脏，V 是成功尝试心脏，X 是失败心脏）：

OOO

XOO

VOO

XXO

VXO

XVO

VVO

XXV

XVX

VXV

VXX

VVX

XVV

XXX

VVV

感谢一百万

Answer 1

因此，在任何时候，您都可以使用 3 个数字来表示红心的状态，其中每个数字可以是 1,2 或 3。假设 1 代表正常的红心，2 代表突出显示的红心，3 代表十字红心。

所以你可以将心的状态存储为整数。在游戏开始时，所有红心都是普通红心，因此：

var state = new Array();
state[0] = 1
state[1] = 1
state[2] = 1

现在，只需使用另一个变量（例如 attemptNumber）来跟踪用户正在进行的尝试。因此，在游戏开始时，attemptNumber=1。用户完成该尝试后，如果尝试成功，只需将 state[attemptNumber] 设置为 2，如果失败，则设置为 3，然后将 attemptsNumber 加 1。现在，用户仅获得 3尝试，第三次尝试后，attemptNumber 等于 4。因此，只需将整个游戏放入 while 循环中，如 while (attemptNumber < 4)（玩游戏）。

至于 CSS，根据 state 的值更改每颗心的图标。