手把手帶你使用Vue開發一個五子棋小遊戲！
這篇文章帶大家利用Vue基礎文法來寫一個五子棋小遊戲，希望對大家有幫助！
在之前的文章中，用JS的基礎語法寫了一個五子棋小遊戲，今天用Vue的基礎語法來寫一個，感受一下兩者的區別。 。至於怎麼判斷勝負，我還是把上篇文章的方法複製貼上過來了，如果想了解這個邏輯，可以看我之前的文章。 （學習影片分享：vuejs影片教學）
1.在繪製遊戲區域和遊戲元素
開始寫程式碼之前，一定要記得先導套件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中。
<div id="app">
<table>
<!-- 渲染tr -->
<tr v-for="(item,index) in list">
<!-- 渲染td,绑定点击事件，并把参数传递到事件中 -->
<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.點選事件
#先用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])
}
},
},
})3.悔棋功能
悔棋的原理就是將最後一顆棋子的值變成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
}
}4.判斷勝負
判斷勝負的邏輯我前面的文章中已經寫過一遍了，這裡我就不做贅述了。有興趣的可以去看前面一篇文章，如何用原生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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
vue.js vs.反應：特定於項目的考慮因素
Apr 09, 2025 am 12:01 AM
Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。
vue怎麼給按鈕添加函數
Apr 08, 2025 am 08:51 AM
可以通過以下步驟為 Vue 按鈕添加函數：將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
vue.js怎麼引用js文件
Apr 07, 2025 pm 11:27 PM
在 Vue.js 中引用 JS 文件的方法有三種：直接使用 <script> 標籤指定路徑；利用 mounted() 生命週期鉤子動態導入；通過 Vuex 狀態管理庫進行導入。
vue中的watch怎麼用
Apr 07, 2025 pm 11:36 PM
Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時，watch 會觸發一個回調函數，用於執行更新視圖或其他任務。其配置選項包括 immediate，用於指定是否立即執行回調，以及 deep，用於指定是否遞歸監聽對像或數組的更改。
vue返回上一頁的方法
Apr 07, 2025 pm 11:30 PM
Vue.js 返回上一頁有四種方法：$router.go(-1)$router.back()使用 <router-link to="/"> 組件window.history.back()，方法選擇取決於場景。
vue多頁面開發是啥意思
Apr 07, 2025 pm 11:57 PM
Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法，其中應用程序被劃分為獨立的頁面：代碼維護性：將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化：每個頁面都可以作為獨立的模塊，便於重用和替換。路由簡單：頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化：每個頁面都有自己的 URL，這有助於搜索引擎優化。
怎樣查詢vue的版本
Apr 07, 2025 pm 11:24 PM
可以通過以下方法查詢 Vue 版本：使用 Vue Devtools 在瀏覽器的控制台中查看“Vue”選項卡。使用 npm 運行“npm list -g vue”命令。在 package.json 文件的“dependencies”對像中查找 Vue 項。對於 Vue CLI 項目，運行“vue --version”命令。檢查 HTML 文件中引用 Vue 文件的 <script> 標籤中的版本信息。
