Question

我正在进行一个井字游戏，我需要一些帮助。以下是我的电路板设置方式：

[a1] [a2] [a3]  
[b1] [b2] [b3]  
[c1] [c2] [c3]

这些值是我为这些特定空间分配的类。在jQuery中，我将这些类设置为等于数组值，如下所示：

var spacesArray = [
    "a1", "a2", "a3",
    "b1", "b2", "b3",
    "c1", "c2", "c3"
]

所以spacesArray [0]等于左上角空格，spacesArray [4]等于中间空格，依此类推。

我正在尝试创建一个函数，用于确定行或列中三个空格的对齐方式。为了做到这一点，我为最后点击的空格包含了一个变量，我将其命名为lastClickedElement。

理想情况下，我希望此功能可以做到这一点。对于此示例，假设我单击的最后一个空格是中间空格（b2）。

比较lastClickedElement（b2）以查看其类是否与数组值匹配
如果匹配，请检查棋盘上方和下方的元素，看看它们是否已被同一玩家选中。在这种情况下，它将是a2和c2或b1和b3。
如果三个空格垂直或水平排列，则游戏结束并且玩家赢了。

我知道这不会说明对角线的胜利，但我可以单独处理。

我的问题是：如何一起访问类名和数组值？我想知道怎么说这个，所以如果这听起来像胡言乱语，我很抱歉。

我想做这样的事情（请原谅任何错误的语法）：

我点击空格b2，使其成为lastClickedElement。
我想检查它的类（.b2）与它在数组中的位置（spacesArray [4]）。
在确认.b2与spacesArray [4]相同之后，我想检查它上面和下面的空格，所以我猜它会检查像spacesArray [4 + 3]和spacesArray [4-3]这样的东西。
然后它会检查它旁边的空格，spacesArray [4 + 1]和spacesArray [4-1]。
一旦点击了一个空格，它就会根据轮到它来添加“spaceTakenPlayer1”或“spaceTakenPlayer2”这个类，所以它会检查其中一个类。

同样，我不确切地知道如何用这句话来表达，如果它令人困惑，我很抱歉。

对于那些想要更好看的人来说，这是一个jsFiddle：

http://jsfiddle.net/hrd0h8jo/

为了这个jsFiddle的目的，左边的img是X，右边的img是O.一旦游戏开始，玩家1的空间将变成番茄，玩家2的空间将变为青色。 / p>

感谢您的帮助。

Answer 1

您的帖子中有很多内容，但似乎主要的问题是，当点击类似b2类名称的html元素时，您需要一些方法将其与spacesArray相关联。

所以我会使用html data attributes将数组索引作为html元素的一部分包含在内。所以你的HTML会是这样的：

<div class="b2 gamespace gamespace-bg unselected" data-index="4"></div>

然后在您的点击处理程序中，您可以使用以下内容：

var index = $(this).attr('data-index');   // this would equal 4

这就是你问的问题吗？

Answer 2

假设您创建了当前游戏状态的地图，其中每个单元格包含0（未占用），1（玩家1）或2（玩家2）：

New Game:
[0] [0] [0]  
[0] [0] [0]  
[0] [0] [0]  

Player 1 wins diagonal:
[1] [2] [2]  
[0] [1] [0]  
[0] [0] [1]

只有8种胜利组合。它们可以很容易地明确列出。这是一个checkWin函数，用于处理如上定义的游戏状态映射：

function checkWin() {
    var v = 0,
        stateMap = getGameStateMap();


    // diagonal top-left to bottom-right
    v = stateMap[0];
    if (v > 0 && v === stateMap[4] && v === stateMap[8]) {
      $scope.winner = v;
      $scope.gameOver = true;
      return;
    }
    // diagonal top-right to bottom-left
    v = stateMap[2];
    if (v > 0 && v === stateMap[4] && v === stateMap[6]) {
      $scope.winner = v;
      $scope.gameOver = true;
      return;
    }

    for (var x = 0; x < 3; x++) {

      // Horizontal  
      v = stateMap[(x * 3) + 0];
      if (v > 0 && v === stateMap[(x * 3) + 1] && v === stateMap[(x * 3) + 2]) {
        $scope.winner = v;
        $scope.gameOver = true;
        return;
      }

      // Vertical  
      v = stateMap[x];
      if (v > 0 && v === stateMap[x + (1 * 3)] && v === stateMap[x + (2 * 3)]) {
        $scope.winner = v;
        $scope.gameOver = true;
        return;
      }

    }

  }

这是一个演示：http://plnkr.co/edit/NWubDTTVkpAhgrCCM2Ha?p=preview

的插图

它正在使用棱角分叉，所以它可能对你没有多大帮助;我不想处理事件绑定。

需要帮助通过数组获取类名

2 个答案: