這篇文章帶大家利用Vue基礎文法來寫一個五子棋小遊戲,希望對大家有幫助!
在之前的文章中,用JS的基礎語法寫了一個五子棋小遊戲,今天用Vue的基礎語法來寫一個,感受一下兩者的區別。 。至於怎麼判斷勝負,我還是把上篇文章的方法複製貼上過來了,如果想了解這個邏輯,可以看我之前的文章。 (學習影片分享:vuejs影片教學)
開始寫程式碼之前,一定要記得先導套件Vue檔。棋盤還是用二維陣列來渲染,可以使用Array(15).fill(0).map(()=>Array(15).fill(0))
方法來快速產生陣列。
//创建Vue实例 let vm = new Vue({ //挂载到对应的盒子上 el: '#app', data: { //快速生成用来渲染棋盘的数组,15*15,默认值是0 list: Array(15).fill(0).map(()=>Array(15).fill(0)) }, })
陣列產生之後,就可以用v-for方法對Html進行渲染了。第一層循環產生tr標籤,第二層循環產生td標籤。然後將index和index02這兩個參數傳入點擊事件函數中,並且使用vue樣式綁定,將黑棋和白棋這兩種樣式綁定在td中。
附上CSS樣式
#先用flag變數來判斷黑白棋順序。陣列裡的預設值都是0,點選下棋的原理就是改變這個值,上面td的樣式綁定中,如果值變成1,就渲染出bgc1樣式,也就是黑色。值為2就渲染出白色。在這個事件中,數組的值改變後,頁面不會重新渲染,所以需要用this.$set()
方法,讓v-for強制更新。因為我們用的是Vue語法,這個事件函數要寫入methods中。
//所有黑棋数组 let blackArr = [] //所有白棋数组 let whiteArr = [] //下棋顺序变量 let flag = true //创建Vue实例 let vm = new Vue({ //挂载到对应的盒子上 el: '#app', data: { //用来渲染棋盘的数组,15*15 list: Array(15).fill(0).map(()=>Array(15).fill(0)) }, methods: { //点击事件,参数a,b对应td里的index,index02 doClick(a, b) { //判断是黑棋还是白棋 if (flag) { //判断格子内是否已经有棋子 if (this.list[a][b] == 0) { //改变点击的td对应的数组元素的值,并且强制更新数组渲染页面 this.$set(this.list[a], b, 1) flag = !flag //将对应的棋子坐标添加至总数组中,后面判断胜负需要用 blackArr.push([a, b]) } } else { this.$set(this.list[a], b, 2) flag = !flag whiteArr.push([a, b]) } }, }, })
悔棋的原理就是將最後一顆棋子的值變成0。如何知道哪一顆棋子是最後一顆呢,上面不是宣告了兩個全域數組嗎,數組裡的最後一個元素不就是最後一顆棋子了。值改為0後,要把這個元素從全域數組中刪除,因為這個數組不只是悔棋的時候用到,後面判斷勝負也會用到,不刪除的話會幹擾到判斷勝負。悔棋事件的函數同樣要寫在methods裡面。
//悔棋事件 withdraw() { //判断前面一步下的是黑棋还是白棋 if (!flag) { //获取最后一颗棋子的位置 const a = blackArr[blackArr.length - 1][0] const b = blackArr[blackArr.length - 1][1] //将最后一刻棋子对应的数组元素的值改为0,并且强制更新数组渲染页面 this.$set(this.list[a], b, 0) //把这个棋子从总数组里面删除,否则会影响到输赢判断 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 } }
判斷勝負的邏輯我前面的文章中已經寫過一遍了,這裡我就不做贅述了。有興趣的可以去看前面一篇文章,如何用原生JS寫五子棋。這裡直接把方法拿過來,在點擊事件裡面呼叫就可以了,記得參數要傳進去
//横轴获胜逻辑 function XWin(a, b) { //当前X轴的所有棋子集合数组 let xAllArr = [] //判断横轴胜负逻辑的X轴棋子数组 let xWinArr = [] //判断下的是黑棋还是白棋 if (!flag) { blackArr.map(item => { if (item[0] == a) { //将当前排的所有棋子加入对应数组 xAllArr.push(item[1]) } }) } else { whiteArr.map(item => { if (item[0] == a) { xAllArr.push(item[1]) } }) } //把横排总数组排序,方便比较 xAllArr.sort((a, b) => a - b) for (let i = 1; i < xAllArr.length; i++) { if (xAllArr[i] == (+xAllArr[i - 1] + 1)) { //如果相邻的两个棋子数量相差1,就将其添加至胜负逻辑数组 xWinArr.push(xAllArr[i]) } else { //否则得清空 xWinArr = [] } } //获胜条件 if (xWinArr.length == 4) { //这里要用定时器将弹框变成异步任务,否则第五颗棋子渲染不出来就提示获胜了 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) } } }
到這裡五子棋的功能就寫完了,Vue的基礎語法比原生的DOM語法要便捷了不少。判斷勝負的邏輯,我還是照搬了上篇文章,感興趣的可以去看我前面的文章:
《如何使用原生JS,快速寫出一個五子棋小遊戲 》
https://juejin.cn/post/7107172938062757925?share_token=83f7dc0c-3038-4310-b9b5-ba8a7c914af4
以上是手把手帶你使用Vue開發一個五子棋小遊戲!的詳細內容。更多資訊請關注PHP中文網其他相關文章!