Typescript井字棋的項目實現
單元格點擊
效果:點擊棋盤的任意單元格,單元格顯示×(默認)
思路:
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 井字棋內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- WinForm使用DataGridView實現類似Excel表格的查找替換功能
- C#中word導出功能的騷操作詳解
- JS實現時間軸自動播放
- 關於對TypeScript泛型參數的默認值理解
- vue完美實現el-table列寬自適應