教你用Vue基礎(chǔ)語法來寫一個五子棋小游戲
更新時(shí)間：2022年06月22日 10:31:05 作者：逍丶
在布局上,五子棋相比那些目標(biāo)是隨機(jī)運(yùn)動的游戲,實(shí)現(xiàn)起來相對簡單許多,思路也很清晰,下面這篇文章主要給大家介紹了關(guān)于用Vue基礎(chǔ)語法來寫一個五子棋小游戲的相關(guān)資料,需要的朋友可以參考下
前言
在之前的文章中，用JS的基礎(chǔ)語法寫了一個五子棋小游戲# 如何使用原生JS，快速寫出一個五子棋小游戲今天用Vue的基礎(chǔ)語法來寫一個，感受一下兩者的區(qū)別。。至于怎么判斷勝負(fù)，我還是把上篇文章的方法復(fù)制粘貼過來了，如果想了解這個邏輯，可以看我之前的那篇文章。
1.繪制游戲區(qū)域和游戲元素
開始寫代碼之前，一定要記得先導(dǎo)包Vue文件。棋盤還是用二維數(shù)組來渲染，可以使用Array(15).fill(0).map(()=>Array(15).fill(0))方法來快速生成數(shù)組。
//創(chuàng)建Vue實(shí)例
let vm = new Vue({
//掛載到對應(yīng)的盒子上
el: '#app',
data: {
//快速生成用來渲染棋盤的數(shù)組,15*15，默認(rèn)值是0
list: Array(15).fill(0).map(()=>Array(15).fill(0))
},
})
數(shù)組生成之后，就可以用v-for方法對Html進(jìn)行渲染了。第一層循環(huán)生成tr標(biāo)簽，第二層循環(huán)生成td標(biāo)簽。然后將index和index02這兩個參數(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變量來判斷黑白棋順序。數(shù)組里的默認(rèn)值都是0，點(diǎn)擊下棋的原理就是改變這個值，上面td的樣式綁定中，如果值變?yōu)?，就渲染出bgc1樣式，也就是黑色。值為2就渲染出白色。在這個事件中，數(shù)組的值改變后，頁面不會重新渲染，所以需要用this.$set()方法，讓v-for強(qiáng)制更新。因?yàn)槲覀冇玫氖荲ue語法，這個事件函數(shù)要寫入methods中。
//所有黑棋數(shù)組
let blackArr = []
//所有白棋數(shù)組
let whiteArr = []
//下棋順序變量
let flag = true
//創(chuàng)建Vue實(shí)例
let vm = new Vue({
//掛載到對應(yīng)的盒子上
el: '#app',
data: {
//用來渲染棋盤的數(shù)組,15*15
list: Array(15).fill(0).map(()=>Array(15).fill(0))
},
methods: {
//點(diǎn)擊事件，參數(shù)a,b對應(yīng)td里的index,index02
doClick(a, b) {
//判斷是黑棋還是白棋
if (flag) {
//判斷格子內(nèi)是否已經(jīng)有棋子
if (this.list[a][b] == 0) {
//改變點(diǎn)擊的td對應(yīng)的數(shù)組元素的值,并且強(qiáng)制更新數(shù)組渲染頁面
this.$set(this.list[a], b, 1)
flag = !flag
//將對應(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)?。如何知道哪顆棋子是最后一顆呢，上面不是聲明了兩個全局?jǐn)?shù)組嗎，數(shù)組里的最后一個元素不就是最后一顆棋子了。值改變?yōu)?后，要把這個元素從全局?jǐn)?shù)組中刪除，因?yàn)檫@個數(shù)組不僅是悔棋的時(shí)候用到，后面判斷勝負(fù)也會用到，不刪除的話會干擾到判斷勝負(fù)?；谄迨录暮瘮?shù)同樣要寫在methods里面。
//悔棋事件
withdraw() {
//判斷前面一步下的是黑棋還是白棋
if (!flag) {
//獲取最后一顆棋子的位置
const a = blackArr[blackArr.length - 1][0]
const b = blackArr[blackArr.length - 1][1]
//將最后一刻棋子對應(yīng)的數(shù)組元素的值改為0，并且強(qiáng)制更新數(shù)組渲染頁面
this.$set(this.list[a], b, 0)
//把這個棋子從總數(shù)組里面刪除，否則會影響到輸贏判斷
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)寫過一遍了，這里我就不做贅述了。感興趣的可以去看前面一篇文章，如何用原生JS寫五子棋。這里直接把方法拿過來，在點(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)前排的所有棋子加入對應(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)) {
//如果相鄰的兩個棋子數(shù)量相差1，就將其添加至勝負(fù)邏輯數(shù)組
xWinArr.push(xAllArr[i])
} else {
//否則得清空
xWinArr = []
}
}
//獲勝條件
if (xWinArr.length == 4) {
//這里要用定時(shí)器將彈框變成異步任務(wù)，否則第五顆棋子渲染不出來就提示獲勝了
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的基礎(chǔ)語法比原生的DOM語法要便捷了不少。判斷勝負(fù)的邏輯，我還是照搬了上篇文章，感興趣的可以去看我前面的文章，# 如何使用原生JS，快速寫出一個五子棋小游戲 。
到此這篇關(guān)于教你用Vue基礎(chǔ)語法來寫一個五子棋小游戲的文章就介紹到這了,更多相關(guān)Vue寫五子棋小游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3 elementUI如何修改el-date-picker默認(rèn)時(shí)間
這篇文章主要介紹了Vue3 elementUI如何修改el-date-picker默認(rèn)時(shí)間，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue基于input實(shí)現(xiàn)密碼的顯示與隱藏功能
這篇文章主要介紹了vue基于input實(shí)現(xiàn)密碼的顯示與隱藏功能,文末給大家介紹了vue?如何實(shí)現(xiàn)切換密碼的顯示與隱藏效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-01-01
這篇文章主要為大家詳細(xì)介紹了在vue項(xiàng)目中如何加載markdown,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要介紹了vue自定義組件如何添加使用原生事件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue3無法顯示element-plus問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue.js中的綁定樣式實(shí)現(xiàn)，展開的內(nèi)容呦style綁定樣式和綁定class樣式，具體相關(guān)內(nèi)容需要的小伙伴可以參考下面文章介紹2022-05-05
這篇文章主要介紹了vue父組件異步傳遞props值,子組件接收不到解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)
本文主要介紹了基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
Vue中對iframe實(shí)現(xiàn)keep alive無刷新的方法
這篇文章主要介紹了Vue中對iframe實(shí)現(xiàn)keep alive無刷新的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue父組件調(diào)用子組件方法報(bào)錯問題及解決
這篇文章主要介紹了vue父組件調(diào)用子組件方法報(bào)錯問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09