需要幫助通過數組獲取課程名稱

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）。

1. 比較lastClickedElement（b2）中，確定其類別的數組值
2. 匹配如果它不匹配，檢查它上面和下面是電路板上的元件，看他們是否已被選擇的同一名球員。在這種情況下，它可能是a2和c2或b1和b3。
3. 如果三個空格垂直或水平排列，則遊戲結束，玩家贏了。

我知道這不會對角線勝利，但我可以單獨處理。

我的問題是：如何一起訪問類名和數組值？我試圖弄清楚如何說出這些，所以我很抱歉，如果這聽起來像是亂碼。

我想要做這樣的事情（請原諒任何錯誤的語法）：

1. 我點擊空間B2，使其成爲lastClickedElement。
2. 我想檢查它的類（.b2）與它在數組中的位置（spacesArray [4]）。
3. 在確認.b2與spacesArray [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

您的帖子中有很多，但似乎主要的問題是，當點擊類名爲b2的html元素時，您需要某種方式將其與您的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

所以它可能不會幫你這麼多它採用了棱角分明;我不想處理事件綁定。