Нужна помощь в получении имени класса через массив

Question

Я работаю над игрой tic-tac-toe, и мне нужна помощь. Вот как моя плата устанавливается:

---

[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).

1. Сравнит lastClickedElement (b2), чтобы увидеть, если его класс соответствует значению массива
2. Если это совпадение, проверьте элементы, находящиеся выше и ниже его на доске, чтобы увидеть, если они были выбраны тот же игрок. В этом случае это будет либо a2, либо c2, либо b1 и b3.
3. Если три пространства выстраиваются вертикально или горизонтально, игра заканчивается и игрок выигрывает.

Я знаю, что это не объяснило бы диагональные победы, но я могу разобраться с этим отдельно.

Мой вопрос: Как мне получить доступ к именам классов и значениям массива вместе? Я пытаюсь понять, как это сказать, поэтому я сожалею, если это звучит как тарабарщина.

Я хочу сделать что-то вроде этого (простите, пожалуйста, любой неправильный синтаксис):

1. я нажимаю на пространстве b2, что делает его lastClickedElement.
2. Я хочу проверить его класс (.b2) на его позицию в массиве (spacesArray [4]).
3. После подтверждения того, что .b2 - это то же самое, что и spaceArray [4], я хочу проверить пробелы выше и ниже, поэтому я предполагаю, что он проверит что-то вроде spacesArray [4 + 3] и spacesArray [4-3].
4. Тогда он будет проверять пробелы в стороне от него, spaceArray [4 + 1] и spacesArray [4-1].
5. После того, как щелкнули пробел, он добавит класс «spaceTakenPlayer1» или «spaceTakenPlayer2» в зависимости от того, на чьем пути он был, поэтому он будет проверять один из этих классов.

Опять же, я не знал точно, как это фразы, и я сожалею, если это сбивает с толку.

Вот jsFiddle для тех, кто хотел бы лучше рассмотреть:

http://jsfiddle.net/hrd0h8jo/

Для этого jsFiddle, то IMG слева является X и IMG на справа O. Как только игра будет запущена, пространства игрока 1 превратятся в помидоры, а пространство игрока 2 станет голубым.

Благодарим вас за помощь и помощь.

Answer 1

В вашем посте много, но главный вопрос заключается в том, что при нажатии на элемент html с именем класса, например b2, вам необходимо каким-то образом связать это с вашим spacesArray.

Поэтому я бы включил индекс массива как часть элементов html, используя html data attributes. Так что ваш 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

Он использует угловой поэтому он не может помочь вам, что много; Я не хотел иметь дело с привязкой событий.