Typescript井字棋的項(xiàng)目實(shí)現(xiàn)
單元格點(diǎn)擊
效果：點(diǎn)擊棋盤的任意單元格，單元格顯示×(默認(rèn))
思路：
1.獲取到所有的單元格列表
2.遍歷單元格列表，給每一個單元格添加點(diǎn)擊事件
3.給當(dāng)前被點(diǎn)擊的單元格添加類名 x
引入js
1、新建 index.ts 文件，同時在終端中執(zhí)行 tsc --watch index.ts 來生成 js 文件
2、demo.html 中在 body 結(jié)束標(biāo)簽前，引入 index.js
<script src="./index.js"></script>
編寫代碼
/*
單元格點(diǎn)擊
1.獲取到所有的單元格列表
2.遍歷單元格列表，給每一個單元格添加點(diǎn)擊事件
3.給當(dāng)前被點(diǎn)擊的單元格添加類名 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')
})
})
優(yōu)化
1、防止單元格重復(fù)點(diǎn)擊，在添加事件時，使用 once 屬性，讓單元格只能被點(diǎn)擊一次
2、使用函數(shù)聲明形式的事件處理程序（代碼多了后，代碼結(jié)構(gòu)會更清晰)
/*
單元格點(diǎn)擊
1.獲取到所有的單元格列表
2.遍歷單元格列表，給每一個單元格添加點(diǎn)擊事件
3.給當(dāng)前被點(diǎn)擊的單元格添加類名 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.創(chuàng)建一個存儲當(dāng)前玩家的變量(currentPlayer)，默認(rèn)值為:x
2.將添加給單元格時寫死的類名x，替換為變量(currentPlayer）的值
3.切換到另一個玩家:在添加類名(下棋完成一步)后，根據(jù)當(dāng)前玩家，得到另外一個玩家
4.處理下一步提示:移除游戲面板中的x和o類名，添加下一個玩家對應(yīng)的類名
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)處理當(dāng)前玩家，存在的問題：
1、變量的類型是 string，它的值可以是任意字符串
如果不小心寫錯了(o→0)，代碼不會報(bào)錯，但功能就無法實(shí)現(xiàn)了，并且很難找錯。也就是 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 獲勝了
如果所有單元格都有內(nèi)容，但沒有獲勝的情況，就說明是平局
我們打印頁面上的單元格，發(fā)現(xiàn)每個單元格都有索引
console.log(cells)
這樣我們可以使用單元格索引，來表示每種獲勝情況（使用數(shù)組來存儲，比如:[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種情況。所以我們可以使用一個“大”數(shù)組（外層)，來存儲這 8 種情況(因?yàn)槊看闻汹A都要判斷所有情況)
判斷過程：
遍歷這個大數(shù)組，分別判斷每一種情況對應(yīng)的3個單元格元素，是否都是相同的 x 或 o 類名，只要有一種情況滿足，就說明獲勝了
單元格元素列表說明：
單元格元素列表（cells)，實(shí)際上是一個偽數(shù)組（偽數(shù)組的特征：具有長度(length)屬性和索引），為什么它不是一個真正的數(shù)組呢，我們把鼠標(biāo)放到 cells 上可以看到類型是 NodeListOf<Element>
偽數(shù)組的操作：
1、通過索引獲取元素
console. log(cells[0]) console. log (cells[1])
2、使用for循環(huán)遍歷（推薦使用 forEach 方法)
for ( let i = 0; i < cells.length; i++){
console.log(cells[i])
)
封裝判贏函數(shù)
封裝函數(shù)，主要考慮：參數(shù)和返回值。
該函數(shù)的返回值是什么? 布爾值(判斷是否獲勝)
該函數(shù)的有參數(shù)嗎?是什么?當(dāng)前玩家
什么時候判贏?玩家點(diǎn)擊單元格下棋后
說明：判贏，就是在判斷當(dāng)前玩家下棋后是否獲勝(玩家沒下棋，不可能獲勝，不需要判斷)
//聲明函數(shù):
function checkwin (player: Player) : boolean { }
//調(diào)用函數(shù):
let iswin = checkwin (currentPlayer)
下面我們按照步驟來封裝這個函數(shù)：
1、聲明函數(shù)(checkwin)，指定參數(shù)(player)，類型注解為: Player枚舉
2、指定返回值：現(xiàn)在函數(shù)中寫死返回 true 或 false
3、在給單元格添加類名后(下棋后)，調(diào)用函數(shù) checkwin，拿到函數(shù)返回值
4、判斷函數(shù)返回值是否為 true，如果是，說明當(dāng)前玩家獲勝了
......
//棋盤中單元格的click事件處理程序
function clickCell(event) {
let target = event.target as HTMLDivElement
target.classList.add(currentPlayer)
//調(diào)用判贏函數(shù)，判斷是否獲勝
let isWin = checkWin(currentPlayer)
if(isWin){
console.log(currentPlayer+'贏了')
}
//根據(jù)當(dāng)前玩家得到另一個玩家
currentPlayer = currentPlayer === Player.X ? Player.O : Player.X
//處理下一步提示
......
}
//封裝判贏函數(shù)
function checkWin(player:Player):boolean {
return true
}
接下來實(shí)現(xiàn)判贏函數(shù)
思路：
1、遍歷判贏數(shù)組，分別判斷每種情況對應(yīng)的 3 個單元格元素，是否同時包含當(dāng)前玩家的類名
2、在 some 方法的回調(diào)函數(shù)中，獲取到每種獲勝情況對應(yīng)的 3 個單元格元素
問題：使用哪種方式遍歷數(shù)組呢？
只要有一種情況滿足，就表示玩家獲勝，后續(xù)的情況就沒有必要再遍歷，因此，數(shù)組遍歷時可以終止
判贏函數(shù)的返回值是布爾類型，如果玩家獲勝（有一種情況滿足)，就返回 true；否則，返回 false
數(shù)組的 some 方法：1、遍歷數(shù)組時可終止；2、方法返回值為 true 或 false
3、判斷這 3 個單元格元素是否同時包含當(dāng)前玩家的類名
4、如果包含(玩家獲勝)，就在回調(diào)函數(shù)中返回 true 停止循環(huán);否則，返回false，繼續(xù)下一次循環(huán)
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]]
//封裝判贏函數(shù)
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;
}
可以優(yōu)化：
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)
}
判斷平局
思路：創(chuàng)建變量(steps)，記錄已下棋的次數(shù)，判斷 steps 是否等于 9，如果等于說明平局
注意：
先判贏，再判平局
步驟：
1、創(chuàng)建變量(steps) ，默認(rèn)值為 0
2、在玩家下棋后，讓 steps 加 1
3、在判贏的代碼后面，判斷 steps 是否等于 9
4、如果等于 9 說明是平局，游戲結(jié)束，就直接 return，不再執(zhí)行后續(xù)代碼
//記錄已下棋的步數(shù)
let steps = 0
//棋盤中單元格的click事件處理程序
function clickCell(event) {
let target = event.target as HTMLDivElement
target.classList.add(currentPlayer)
steps++
//調(diào)用判贏函數(shù)，判斷是否獲勝
let isWin = checkWin(currentPlayer)
if (isWin) {
console.log(currentPlayer + '贏了')
return;
}
//判斷平局
if (steps === 9) {
console.log('平局了')
return
}
//根據(jù)當(dāng)前玩家得到另一個玩家
......
}
展示獲勝信息
效果：在獲勝或平局時，展示相應(yīng)信息
步驟：
1、獲取到與獲勝信息相關(guān)的兩個DOM元素：①#message ② #winner
2、顯示獲勝信息面板(通過style屬性實(shí)現(xiàn))
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
}
......
}
重新開始游戲
效果：點(diǎn)擊重新開始按鈕，重新開始下棋游戲
說明：重新開始游戲，實(shí)際上就是要重置游戲中的所有數(shù)據(jù)，恢復(fù)到初始狀態(tài)。比如：隱藏獲勝信息、重置下棋次數(shù)、清空棋盤等等
步驟：
1、獲取到重新開始按鈕（#restart)，并綁定點(diǎn)擊事件
2、在點(diǎn)擊事件中，重置游戲數(shù)據(jù)
3、隱藏獲勝信息、清空棋盤、移除單元格點(diǎn)擊事件、重新給單元格綁定點(diǎn)擊事件
4、重置下棋次數(shù)、重置默認(rèn)玩家為 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)
//移除點(diǎn)擊事件
cell.removeEventListener('click',clickCell)
//重新給單元格綁定事件
cell.addEventListener('click', clickCell, {once: true})
})
//重置下棋次數(shù)
steps = 0
//默認(rèn)玩家x
currentPlayer = Player.X
//重置下一步提示為x
gameBoard.classList.remove(Player.X,Player.O)
gameBoard.classList.add(currentPlayer)
}
優(yōu)化重新游戲功能：
原來，下棋分為：①第—次游戲②重新開始游戲
現(xiàn)在，將第一次游戲，也看做是“重新開始游戲”，就可以去掉第一次游戲時重復(fù)的初始化操作了
優(yōu)化步驟：
1、直接調(diào)用函數(shù)(startGame) ，來開始游戲
2、移除變量 steps、currentPlayer 的默認(rèn)值，并添加明確的類型注解
3、移除給單元格綁定事件的代碼
完整代碼如下：
enum Player {
X = 'x',
O = 'o'
}
//獲取所有單元格
let cells = document.querySelectorAll('.cell')
//默認(rèn)玩家
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]]
//記錄已下棋的步數(shù)
let steps:number
//獲勝信息展示相關(guān)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)
//調(diào)用該函數(shù)來初始化游戲，開始游戲
startGame()
//棋盤中單元格的click事件處理程序
function clickCell(event) {
let target = event.target as HTMLDivElement
target.classList.add(currentPlayer)
steps++
//調(diào)用判贏函數(shù)，判斷是否獲勝
let isWin = checkWin(currentPlayer)
if (isWin) {
messageDiv.style.display = "block"
winner.innerText = currentPlayer + '贏了'
return;
}
//判斷平局
if (steps === 9) {
messageDiv.style.display = "block"
winner.innerText = '平局了'
return
}
//根據(jù)當(dāng)前玩家得到另一個玩家
currentPlayer = currentPlayer === Player.X ? Player.O : Player.X
//下一步提示
gameBoard.classList.remove(Player.X,Player.O)
gameBoard.classList.add(currentPlayer)
}
//封裝判贏函數(shù)
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"
//重置下棋次數(shù)
steps = 0
//默認(rèn)玩家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)
//移除點(diǎn)擊事件
cell.removeEventListener('click',clickCell)
//重新給單元格綁定事件
cell.addEventListener('click', clickCell, {once: true})
})
}
到此這篇關(guān)于Typescript井字棋的項(xiàng)目實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Typescript 井字棋內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS原生數(shù)據(jù)雙向綁定實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了JS原生數(shù)據(jù)雙向綁定問題，代碼簡單易懂，非常不錯，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
前面文章里寫過一個彈出層對話框，但ie6下有bug，根本沒有實(shí)現(xiàn)position:fixed的效果，當(dāng)時沒有真實(shí)ie6環(huán)境，測試疏忽，匆匆放到博客上，還讓一些讀者看到甚至使用，在這里表示萬分抱歉啊2011-05-05
淺析JS中常用類型轉(zhuǎn)換及運(yùn)算符表達(dá)式
這篇文章主要介紹了關(guān)于JS中涉及的常用類型轉(zhuǎn)換及運(yùn)算符表達(dá)式 ,包括js中常用類型轉(zhuǎn)換，及常用的運(yùn)算符表達(dá)式，需要的朋友可以參考下2017-07-07
這篇文章主要向大家推薦一個原生js實(shí)現(xiàn)淘寶購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Js實(shí)現(xiàn)當(dāng)前點(diǎn)擊a標(biāo)簽變色突出顯示其他a標(biāo)簽回復(fù)原色
當(dāng)一個頁面有多個a標(biāo)簽，實(shí)現(xiàn)當(dāng)前點(diǎn)擊a標(biāo)簽變色，其他a標(biāo)簽回復(fù)原色，具體實(shí)現(xiàn)如下，喜歡的朋友可以參考下2013-11-11
JS中mouseover和mouseout多次觸發(fā)問題如何解決
這篇文章主要介紹了JS中mouseover和mouseout多次觸發(fā)問題如何解決的相關(guān)資料,非常不錯具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
uniapp微信小程序訂閱消息發(fā)送服務(wù)通知超詳細(xì)教程
在使用或開發(fā)小程序過程中,我們會發(fā)現(xiàn)消息通知是非常重要的一個環(huán)節(jié),下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序訂閱消息發(fā)送服務(wù)通知的相關(guān)資料,需要的朋友可以參考下2023-06-06
淺析微信小程序modal彈窗關(guān)閉默認(rèn)會執(zhí)行cancel問題
這篇文章主要介紹了小程序modal彈窗關(guān)閉默認(rèn)會執(zhí)行cancel方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
下面小編就為大家?guī)硪黄獪\談原型對象的常用開發(fā)模式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了js 去掉字符串前后空格實(shí)現(xiàn)代碼集合,需要的朋友可以參考下2017-03-03