Typescript井字棋的專案實現

2022-08-07 14:00:18

單元格點選

效果：點選棋盤的任意單元格，單元格顯示×(預設)
思路：
1.獲取到所有的單元格列表
2.遍歷單元格列表，給每一個單元格新增點選事件
3.給當前被點選的單元格新增類名 x

引入js
1、新建 index.ts 檔案，同時在終端中執行 tsc --watch index.ts 來生成 js 檔案
2、demo.html 中在 body 結束標籤前，引入 index.js

<script src="./index.js"></script>

編寫程式碼

/*
    單元格點選
    1.獲取到所有的單元格列表
    2.遍歷單元格列表，給每一個單元格新增點選事件
    3.給當前被點選的單元格新增類名 x
*/
let cells = document.querySelectorAll('.cell')
cells.forEach(function (item, index) {
    let cell = item as HTMLDivElement;
    cell.addEventListener('click',function (event) {
        let target = event.target as HTMLDivElement
        target.classList.add('x')
    })
})

優化
1、防止單元格重複點選，在新增事件時，使用 once 屬性，讓單元格只能被點選一次
2、使用函數宣告形式的事件處理程式（程式碼多了後，程式碼結構會更清晰)

/*
    單元格點選
    1.獲取到所有的單元格列表
    2.遍歷單元格列表，給每一個單元格新增點選事件
    3.給當前被點選的單元格新增類名 x
*/
let cells = document.querySelectorAll('.cell')
cells.forEach(function (item, index) {
    let cell = item as HTMLDivElement;
    cell.addEventListener('click', clickCell, {once: true})
})

//棋盤中單元格的click事件處理程式
function clickCell(event) {
    let target = event.target as HTMLDivElement
    target.classList.add('x')
}

切換玩家

效果：玩家(x）和玩家(o)輪流交替下棋
思路：
1.建立一個儲存當前玩家的變數(currentPlayer)，預設值為:x
2.將新增給單元格時寫死的類名x，替換為變數(currentPlayer）的值
3.切換到另一個玩家:在新增類名(下棋完成一步)後，根據當前玩家，得到另外一個玩家
4.處理下一步提示:移除遊戲面板中的x和o類名，新增下一個玩家對應的類名

let cells = document.querySelectorAll('.cell')
let currentPlayer = 'x'
let gameBoard = document.querySelector('#bord')

cells.forEach(function (item, index) {
    let cell = item as HTMLDivElement;
    cell.addEventListener('click', clickCell, {once: true})
})

//棋盤中單元格的click事件處理程式
function clickCell(event) {
    let target = event.target as HTMLDivElement
    target.classList.add(currentPlayer)
    currentPlayer = currentPlayer === 'x'?'o':'x'
    gameBoard.classList.remove('x','o')
    gameBoard.classList.add(currentPlayer)
}

使用列舉

使用變數(currentPlayer)處理當前玩家，存在的問題：
1、變數的型別是 string，它的值可以是任意字串
如果不小心寫錯了(o→0)，程式碼不會報錯，但功能就無法實現了，並且很難找錯。也就是 string 型別的變數，取值太寬泛，無法很好的限制值為 x 和 o

enum Player {
    X = 'x',
    O = 'o'
}
let cells = document.querySelectorAll('.cell')
let currentPlayer = Player.X
let gameBoard = document.querySelector('#bord')

console.log(cells)
cells.forEach(function (item, index) {
    let cell = item as HTMLDivElement;
    cell.addEventListener('click', clickCell, {once: true})
})

//棋盤中單元格的click事件處理程式
function clickCell(event) {
    let target = event.target as HTMLDivElement
    target.classList.add(currentPlayer)
    currentPlayer = currentPlayer === Player.X ? Player.O : Player.X
    gameBoard.classList.remove(Player.X, Player.O)
    gameBoard.classList.add(currentPlayer)
}

遊戲判贏

思路

判贏的思路：
判斷棋盤中，橫、豎、斜(對角線）是否存在三個相同的 x 或 o，只要有一個滿足條件，就說明 x 或 o 獲勝了
如果所有單元格都有內容，但沒有獲勝的情況，就說明是平局

我們列印頁面上的單元格，發現每個單元格都有索引

console.log(cells)

這樣我們可以使用單元格索引，來表示每種獲勝情況（使用陣列來儲存，比如:[0，1，2])

所有獲勝情況：
橫：[0,1,2]、[3,4,5]、[6,7,8]
豎：[0,3,6]、[1,4,7]、[2,5,8]
斜：[0,4,8]、[2,4,6]

所以每次判贏的時候，都需要判斷這8種情況。所以我們可以使用一個“大”陣列（外層)，來儲存這 8 種情況(因為每次判贏都要判斷所有情況)

判斷過程：
遍歷這個大陣列，分別判斷每一種情況對應的3個單元格元素，是否都是相同的 x 或 o 類名，只要有一種情況滿足，就說明獲勝了

單元格元素列表說明：

單元格元素列表（cells)，實際上是一個偽陣列（偽陣列的特徵：具有長度(length)屬性和索引），為什麼它不是一個真正的陣列呢，我們把滑鼠放到 cells 上可以看到型別是 NodeListOf<Element>

偽陣列的操作：

1、通過索引獲取元素

console. log(cells[0])
console. log (cells[1])

2、使用for迴圈遍歷（推薦使用 forEach 方法)

for ( let i = 0; i < cells.length; i++){
	console.log(cells[i])
)

封裝判贏函數

封裝函數，主要考慮：引數和返回值。
該函數的返回值是什麼? 布林值(判斷是否獲勝)
該函數的有引數嗎?是什麼?當前玩家
什麼時候判贏?玩家點選單元格下棋後

說明：判贏，就是在判斷當前玩家下棋後是否獲勝(玩家沒下棋，不可能獲勝，不需要判斷)

//宣告函數:
function checkwin (player: Player) : boolean { }
//呼叫函數:
let iswin = checkwin (currentPlayer)

下面我們按照步驟來封裝這個函數：
1、宣告函數(checkwin)，指定引數(player)，型別註解為: Player列舉
2、指定返回值：現在函數中寫死返回 true 或 false
3、在給單元格新增類名後(下棋後)，呼叫函數 checkwin，拿到函數返回值
4、判斷函數返回值是否為 true，如果是，說明當前玩家獲勝了

......

//棋盤中單元格的click事件處理程式
function clickCell(event) {
    let target = event.target as HTMLDivElement
    target.classList.add(currentPlayer)
    //呼叫判贏函數，判斷是否獲勝
    let isWin = checkWin(currentPlayer)
    if(isWin){
        console.log(currentPlayer+'贏了')
    }
    //根據當前玩家得到另一個玩家
    currentPlayer = currentPlayer === Player.X ? Player.O : Player.X
    //處理下一步提示
    ......
}
//封裝判贏函數
function checkWin(player:Player):boolean {
    return true
}

接下來實現判贏函數
思路：
1、遍歷判贏陣列，分別判斷每種情況對應的 3 個單元格元素，是否同時包含當前玩家的類名
2、在 some 方法的回撥函數中，獲取到每種獲勝情況對應的 3 個單元格元素

問題：使用哪種方式遍歷陣列呢？
只要有一種情況滿足，就表示玩家獲勝，後續的情況就沒有必要再遍歷，因此，陣列遍歷時可以終止

判贏函數的返回值是布林型別，如果玩家獲勝（有一種情況滿足)，就返回 true；否則，返回 false

陣列的 some 方法：1、遍歷陣列時可終止；2、方法返回值為 true 或 false

3、判斷這 3 個單元格元素是否同時包含當前玩家的類名

4、如果包含(玩家獲勝)，就在回撥函數中返回 true 停止迴圈;否則，返回false，繼續下一次迴圈

let winsArr = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]]
//封裝判贏函數
function checkWin(player: Player): boolean {
    let isWin = winsArr.some(function (win) {
        let cellIndex1 = cells[win[0]] as HTMLDivElement;
        let cellIndex2 = cells[win[1]] as HTMLDivElement;
        let cellIndex3 = cells[win[2]] as HTMLDivElement;
        if (cellIndex1.classList.contains(player) && cellIndex2.classList.contains(player) && cellIndex3.classList.contains(player)) {
            return true
        } else {
            return false
        }
    })
    return isWin;
}

可以優化：

function checkWin(player: Player): boolean {
    return winsArr.some(function (win) {
        let cellIndex1 = cells[win[0]];
        let cellIndex2 = cells[win[1]];
        let cellIndex3 = cells[win[2]];
        if (hasClass(cellIndex1, player) && hasClass(cellIndex2, player) && hasClass(cellIndex3, player)) {
            return true
        } else {
            return false
        }
    })
}

function hasClass(el: Element, name: string): boolean {
    return el.classList.contains(name)
}

判斷平局

思路：建立變數(steps)，記錄已下棋的次數，判斷 steps 是否等於 9，如果等於說明平局

注意：
先判贏，再判平局

步驟：
1、建立變數(steps) ，預設值為 0
2、在玩家下棋後，讓 steps 加 1
3、在判贏的程式碼後面，判斷 steps 是否等於 9
4、如果等於 9 說明是平局，遊戲結束，就直接 return，不再執行後續程式碼

//記錄已下棋的步數
let steps = 0

//棋盤中單元格的click事件處理程式
function clickCell(event) {
    let target = event.target as HTMLDivElement
    target.classList.add(currentPlayer)
    steps++
    //呼叫判贏函數，判斷是否獲勝
    let isWin = checkWin(currentPlayer)
    if (isWin) {
        console.log(currentPlayer + '贏了')
        return;
    }
    //判斷平局
    if (steps === 9) {
        console.log('平局了')
        return
    }
    //根據當前玩家得到另一個玩家
    ......
}

展示獲勝資訊

效果：在獲勝或平局時，展示相應資訊
步驟：
1、獲取到與獲勝資訊相關的兩個DOM元素：①#message ② #winner
2、顯示獲勝資訊面板(通過style屬性實現)
3、展示獲勝資訊：如果獲勝，展示“x贏了!” 或 “o贏了!”；如果是平局，展示“平局”

let messageDiv = document.querySelector('#message') as HTMLDivElement
let winner = document.querySelector('#winner') as HTMLParagraphElement

//棋盤中單元格的click事件處理程式
function clickCell(event) {
    ......
    if (isWin) {
        messageDiv.style.display = "block"
        winner.innerText = currentPlayer + '贏了'
        return;
    }
    //判斷平局
    if (steps === 9) {
        messageDiv.style.display = "block"
        winner.innerText = '平局了'
        return
    }
   	......
}

重新開始遊戲

效果：點選重新開始按鈕，重新開始下棋遊戲

說明：重新開始遊戲，實際上就是要重置遊戲中的所有資料，恢復到初始狀態。比如：隱藏獲勝資訊、重置下棋次數、清空棋盤等等

步驟：
1、獲取到重新開始按鈕（#restart)，並繫結點選事件
2、在點選事件中，重置遊戲資料
3、隱藏獲勝資訊、清空棋盤、移除單元格點選事件、重新給單元格繫結點選事件
4、重置下棋次數、重置預設玩家為 x、重置下棋提示為 x

//獲取重新開始按鈕
let restart = document.querySelector('#restart') as HTMLButtonElement
restart.addEventListener('click',startGame)

//重新開始遊戲
function startGame() {
    //隱藏獲勝資訊
    messageDiv.style.display = "none"
    cells.forEach(function (item,index) {
        let cell = item as HTMLDivElement
        //清空棋盤
        cell.classList.remove(Player.X, Player.O)
        //移除點選事件
        cell.removeEventListener('click',clickCell)
        //重新給單元格繫結事件
        cell.addEventListener('click', clickCell, {once: true})
    })
    //重置下棋次數
    steps = 0
    //預設玩家x
    currentPlayer = Player.X
    //重置下一步提示為x
    gameBoard.classList.remove(Player.X,Player.O)
    gameBoard.classList.add(currentPlayer)
}

優化重新遊戲功能：
原來，下棋分為：①第—次遊戲②重新開始遊戲
現在，將第一次遊戲，也看做是“重新開始遊戲”，就可以去掉第一次遊戲時重複的初始化操作了

優化步驟：
1、直接呼叫函數(startGame) ，來開始遊戲
2、移除變數 steps、currentPlayer 的預設值，並新增明確的型別註解
3、移除給單元格繫結事件的程式碼

完整程式碼如下：

enum Player {
    X = 'x',
    O = 'o'
}
//獲取所有單元格
let cells = document.querySelectorAll('.cell')
//預設玩家
let currentPlayer:Player
//遊戲棋盤dom
let gameBoard = document.querySelector('#bord')
//所有獲勝可能性
let winsArr = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]]
//記錄已下棋的步數
let steps:number
//獲勝資訊展示相關dom
let messageDiv = document.querySelector('#message') as HTMLDivElement
let winner = document.querySelector('#winner') as HTMLParagraphElement
//獲取重新開始按鈕
let restart = document.querySelector('#restart') as HTMLButtonElement
restart.addEventListener('click',startGame)

//呼叫該函數來初始化遊戲，開始遊戲
startGame()

//棋盤中單元格的click事件處理程式
function clickCell(event) {
    let target = event.target as HTMLDivElement
    target.classList.add(currentPlayer)
    steps++
    //呼叫判贏函數，判斷是否獲勝
    let isWin = checkWin(currentPlayer)
    if (isWin) {
        messageDiv.style.display = "block"
        winner.innerText = currentPlayer + '贏了'
        return;
    }
    //判斷平局
    if (steps === 9) {
        messageDiv.style.display = "block"
        winner.innerText = '平局了'
        return
    }
    //根據當前玩家得到另一個玩家
    currentPlayer = currentPlayer === Player.X ? Player.O : Player.X
    //下一步提示
    gameBoard.classList.remove(Player.X,Player.O)
    gameBoard.classList.add(currentPlayer)
}

//封裝判贏函數
function checkWin(player: Player): boolean {
    return winsArr.some(function (win) {
        let cellIndex1 = cells[win[0]];
        let cellIndex2 = cells[win[1]];
        let cellIndex3 = cells[win[2]];
        if (hasClass(cellIndex1, player) && hasClass(cellIndex2, player) && hasClass(cellIndex3, player)) {
            return true
        } else {
            return false
        }
    })
}
//是否包含某一樣式方法
function hasClass(el: Element, name: string): boolean {
    return el.classList.contains(name)
}

//重新開始遊戲
function startGame() {
    //隱藏獲勝資訊
    messageDiv.style.display = "none"
    //重置下棋次數
    steps = 0
    //預設玩家x
    currentPlayer = Player.X
    //重置下一步提示為x
    gameBoard.classList.remove(Player.X,Player.O)
    gameBoard.classList.add(currentPlayer)

    cells.forEach(function (item, index) {
        let cell = item as HTMLDivElement
        //清空棋盤
        cell.classList.remove(Player.X, Player.O)
        //移除點選事件
        cell.removeEventListener('click',clickCell)
        //重新給單元格繫結事件
        cell.addEventListener('click', clickCell, {once: true})
    })
}

到此這篇關於Typescript井字棋的專案實現的文章就介紹到這了,更多相關Typescript 井字棋內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！