站長(zhǎng)資訊網(wǎng)本篇文章帶大家利用Vue基礎(chǔ)語(yǔ)法來(lái)寫(xiě)一個(gè)五子棋小游戲，希望對(duì)大家有所幫助！
在之前的文章中，用JS的基礎(chǔ)語(yǔ)法寫(xiě)了一個(gè)五子棋小游戲，今天用Vue的基礎(chǔ)語(yǔ)法來(lái)寫(xiě)一個(gè)，感受一下兩者的區(qū)別。。至于怎么判斷勝負(fù)，我還是把上篇文章的方法復(fù)制粘貼過(guò)來(lái)了，如果想了解這個(gè)邏輯，可以看我之前的那篇文章。（學(xué)習(xí)視頻分享：vuejs視頻教程）
1.繪制游戲區(qū)域和游戲元素
開(kāi)始寫(xiě)代碼之前，一定要記得先導(dǎo)包Vue文件。棋盤(pán)還是用二維數(shù)組來(lái)渲染，可以使用Array(15).fill(0).map(()=>Array(15).fill(0))方法來(lái)快速生成數(shù)組。
//創(chuàng)建Vue實(shí)例 let vm = new Vue({ //掛載到對(duì)應(yīng)的盒子上 el: '#app', data: { //快速生成用來(lái)渲染棋盤(pán)的數(shù)組,15*15，默認(rèn)值是0 list: Array(15).fill(0).map(()=>Array(15).fill(0)) }, })
數(shù)組生成之后，就可以用v-for方法對(duì)Html進(jìn)行渲染了。第一層循環(huán)生成tr標(biāo)簽，第二層循環(huán)生成td標(biāo)簽。然后將index和index02這兩個(gè)參數(shù)傳入點(diǎn)擊事件函數(shù)中，并且使用vue樣式綁定，將黑棋和白棋這兩種樣式綁定在td中。
<div id="app"> <table> <!-- 渲染tr --> <tr v-for="(item,index) in list"> <!-- 渲染td,綁定點(diǎn)擊事件，并把參數(shù)傳遞到事件中 --> <td v-for="(item02,index02) in item" @click="doClick(index,index02)" :class="{'bgc1':item02==1,'bgc2':item02==2}"></td> </tr> </table> <!-- 悔棋按鈕 --> <button @click="withdraw">悔棋</button> </div>
附上CSS樣式
<style> * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } table { position: relative; width: 730px; height: 730px; margin: 0 auto; border: 5px solid black; background: url(./src=http___pic45.nipic.com_20140804_2372131_155038114014_2.jpg&refer=http___pic45.nipic.webp) no-repeat; background-size: 100%; background-position: center; padding: 24px 12px; } td { width: 35px; height: 35px; border-radius: 50%; margin-right: 13px; margin-bottom: 11px; cursor: pointer; } .bgc1 { background-color: black; } .bgc2 { background-color: white; } button { position: absolute; width: 200px; height: 100px; bottom: 100px; right: 200px; text-align: center; line-height: 100px; font-size: 25px; } </style>
2.點(diǎn)擊事件
首先用flag變量來(lái)判斷黑白棋順序。數(shù)組里的默認(rèn)值都是0，點(diǎn)擊下棋的原理就是改變這個(gè)值，上面td的樣式綁定中，如果值變?yōu)?，就渲染出bgc1樣式，也就是黑色。值為2就渲染出白色。在這個(gè)事件中，數(shù)組的值改變后，頁(yè)面不會(huì)重新渲染，所以需要用this.$set()方法，讓v-for強(qiáng)制更新。因?yàn)槲覀冇玫氖荲ue語(yǔ)法，這個(gè)事件函數(shù)要寫(xiě)入methods中。
//所有黑棋數(shù)組 let blackArr = [] //所有白棋數(shù)組 let whiteArr = [] //下棋順序變量 let flag = true //創(chuàng)建Vue實(shí)例 let vm = new Vue({ //掛載到對(duì)應(yīng)的盒子上 el: '#app', data: { //用來(lái)渲染棋盤(pán)的數(shù)組,15*15 list: Array(15).fill(0).map(()=>Array(15).fill(0)) }, methods: { //點(diǎn)擊事件，參數(shù)a,b對(duì)應(yīng)td里的index,index02 doClick(a, b) { //判斷是黑棋還是白棋 if (flag) { //判斷格子內(nèi)是否已經(jīng)有棋子 if (this.list[a][b] == 0) { //改變點(diǎn)擊的td對(duì)應(yīng)的數(shù)組元素的值,并且強(qiáng)制更新數(shù)組渲染頁(yè)面 this.$set(this.list[a], b, 1) flag = !flag //將對(duì)應(yīng)的棋子坐標(biāo)添加至總數(shù)組中，后面判斷勝負(fù)需要用 blackArr.push([a, b]) } } else { this.$set(this.list[a], b, 2) flag = !flag whiteArr.push([a, b]) } }, }, })
3.悔棋功能
悔棋的原理就是將最后一顆棋子的值變?yōu)?。如何知道哪顆棋子是最后一顆呢，上面不是聲明了兩個(gè)全局?jǐn)?shù)組嗎，數(shù)組里的最后一個(gè)元素不就是最后一顆棋子了。值改變?yōu)?后，要把這個(gè)元素從全局?jǐn)?shù)組中刪除，因?yàn)檫@個(gè)數(shù)組不僅是悔棋的時(shí)候用到，后面判斷勝負(fù)也會(huì)用到，不刪除的話(huà)會(huì)干擾到判斷勝負(fù)。悔棋事件的函數(shù)同樣要寫(xiě)在methods里面。
//悔棋事件 withdraw() { //判斷前面一步下的是黑棋還是白棋 if (!flag) { //獲取最后一顆棋子的位置 const a = blackArr[blackArr.length - 1][0] const b = blackArr[blackArr.length - 1][1] //將最后一刻棋子對(duì)應(yīng)的數(shù)組元素的值改為0，并且強(qiáng)制更新數(shù)組渲染頁(yè)面 this.$set(this.list[a], b, 0) //把這個(gè)棋子從總數(shù)組里面刪除，否則會(huì)影響到輸贏判斷 blackArr.splice(blackArr.length - 1, 1) flag = !flag } else { const a = whiteArr[whiteArr.length - 1][0] const b = whiteArr[whiteArr.length - 1][1] this.$set(this.list[a], b, 0) whiteArr.splice(whiteArr.length - 1, 1) flag = !flag } }
4.判斷勝負(fù)
判斷勝負(fù)的邏輯我前面的文章中已經(jīng)寫(xiě)過(guò)一遍了，這里我就不做贅述了。感興趣的可以去看前面一篇文章，如何用原生JS寫(xiě)五子棋。這里直接把方法拿過(guò)來(lái)，在點(diǎn)擊事件里面調(diào)用就可以了，記得參數(shù)要傳進(jìn)去
//橫軸獲勝邏輯 function XWin(a, b) { //當(dāng)前X軸的所有棋子集合數(shù)組 let xAllArr = [] //判斷橫軸勝負(fù)邏輯的X軸棋子數(shù)組 let xWinArr = [] //判斷下的是黑棋還是白棋 if (!flag) { blackArr.map(item => { if (item[0] == a) { //將當(dāng)前排的所有棋子加入對(duì)應(yīng)數(shù)組 xAllArr.push(item[1]) } }) } else { whiteArr.map(item => { if (item[0] == a) { xAllArr.push(item[1]) } }) } //把橫排總數(shù)組排序，方便比較 xAllArr.sort((a, b) => a - b) for (let i = 1; i < xAllArr.length; i++) { if (xAllArr[i] == (+xAllArr[i - 1] + 1)) { //如果相鄰的兩個(gè)棋子數(shù)量相差1，就將其添加至勝負(fù)邏輯數(shù)組 xWinArr.push(xAllArr[i]) } else { //否則得清空 xWinArr = [] } } //獲勝條件 if (xWinArr.length == 4) { //這里要用定時(shí)器將彈框變成異步任務(wù)，否則第五顆棋子渲染不出來(lái)就提示獲勝了 if (!flag) { setTimeout(function () { alert('黑棋獲勝!') location.reload() }, 100) } else { setTimeout(function () { alert('白棋獲勝!') location.reload() }, 100) } } } //豎軸獲勝邏輯 function YWin(a, b) { let yAllArr = [] let yWinArr = [] if (!flag) { blackArr.map(item => { if (item[1] == b) { yAllArr.push(item[0]) } }) } else { whiteArr.map(item => { if (item[1] == b) { yAllArr.push(item[0]) } }) } yAllArr.sort((a, b) => a - b) for (let i = 1; i < yAllArr.length; i++) { if (yAllArr[i] == (+yAllArr[i - 1] + 1)) { yWinArr.push(yAllArr[i]) } else { yWinArr = [] } } if (yWinArr.length == 4) { if (!flag) { setTimeout(function () { alert('黑棋獲勝!') location.reload() }, 100) } else { setTimeout(function () { alert('白棋獲勝!') location.reload() }, 100) } } } //正斜軸獲勝邏輯 function X_YWin(a, b) { let x_yAllArr = [] let x_yWinArr = [] if (!flag) { blackArr.map(item => { if ((item[0] - a) == (item[1] - b)) { x_yAllArr.push(item[1]) } }) } else { whiteArr.map(item => { if ((item[0] - a) == (item[1] - b)) { x_yAllArr.push(item[1]) } }) } x_yAllArr.sort((a, b) => a - b) for (let i = 1; i < x_yAllArr.length; i++) { if (x_yAllArr[i] == (+x_yAllArr[i - 1] + 1)) { x_yWinArr.push(x_yAllArr[i]) } else { x_yWinArr = [] } } if (x_yWinArr.length == 4) { if (!flag) { setTimeout(function () { alert('黑棋獲勝!') location.reload() }, 100) } else { setTimeout(function () { alert('白棋獲勝!') location.reload() }, 100) } } } //反斜軸獲勝邏輯 function Y_XWin(a, b) { let y_xAllArr = [] let y_xWinArr = [] if (!flag) { blackArr.map(item => { if (0 - (item[0] - a) == (item[1] - b)) { y_xAllArr.push(item[1]) } }) } else { whiteArr.map(item => { if (0 - (item[0] - a) == (item[1] - b)) { y_xAllArr.push(item[1]) } }) } y_xAllArr.sort((a, b) => a - b) for (let i = 1; i < y_xAllArr.length; i++) { if (y_xAllArr[i] == (+y_xAllArr[i - 1] + 1)) { y_xWinArr.push(y_xAllArr[i]) } else { y_xWinArr = [] } } if (y_xWinArr.length == 4) { if (!flag) { setTimeout(function () { alert('黑棋獲勝!') location.reload() }, 100) } else { setTimeout(function () { alert('白棋獲勝!') location.reload() }, 100) } } }
寫(xiě)在最后
到這里五子棋的功能就寫(xiě)完了，Vue的基礎(chǔ)語(yǔ)法比原生的DOM語(yǔ)法要便捷了不少。判斷勝負(fù)的邏輯，我還是照搬了上篇文章，感興趣的可以去看我前面的文章：
《如何使用原生JS，快速寫(xiě)出一個(gè)五子棋小游戲 》
https://juejin.cn/post/7107172938062757925?share_token=83f7dc0c-3038-4310-b9b5-ba8a7c914af4
【相關(guān)視頻教程推薦：web前端】
