Maison > Article > interface Web > Je vais vous guider étape par étape pour développer un jeu de backgammon en utilisant Vue !
Je vais vous guider étape par étape pour développer un jeu de backgammon en utilisant Vue !
- 青灯夜游avant
- 2022-06-22 15:44:284415parcourir
Cet article vous montrera comment utiliser la syntaxe de base de Vue pour écrire un jeu de backgammon. J'espère que cela vous sera utile !
Dans l'article précédent, j'ai écrit un jeu de backgammon en utilisant la syntaxe de base de JS. Aujourd'hui, je vais en écrire un en utilisant la syntaxe de base de Vue pour ressentir la différence entre les deux. . Quant à la façon de juger du résultat, j'ai copié et collé la méthode de l'article précédent. Si vous voulez comprendre cette logique, vous pouvez lire mon article précédent. (Partage vidéo d'apprentissage : Tutoriel vidéo Vuejs)
1. Dessinez la zone de jeu et les éléments du jeu
Avant de commencer à écrire du code, vous devez vous rappeler de conditionner le fichier Vue. L'échiquier est toujours rendu à l'aide d'un tableau bidimensionnel. Vous pouvez utiliser le Array(15).fill(0).map(()=>Array(15).fill(0)). méthode pour générer rapidement un tableau. 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()
//所有黑棋数组
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])
}
},
},
})Une fois le tableau généré, vous pouvez utiliser la méthode v-for pour rendre le HTML. La boucle de premier niveau génère des balises tr et la boucle de deuxième niveau génère des balises td. Passez ensuite les deux paramètres index et index02 dans la fonction d'événement click et utilisez la liaison de style vue pour lier les styles noir et blanc dans td. //悔棋事件
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
}
}
Style CSS ci-joint //横轴获胜逻辑
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)
}
}
}
2. Cliquez sur événementUtilisez d'abord la variable flag pour déterminer l'ordre d'Othello. Les valeurs par défaut dans le tableau sont toutes 0. Le principe du clic pour jouer aux échecs est de changer cette valeur dans la liaison de style td ci-dessus, si la valeur passe à 1, le style bgc1 est rendu, qui est noir. Une valeur de 2 rend le blanc. Dans ce cas, une fois la valeur du tableau modifiée, la page ne sera pas restituée, vous devez donc utiliser la méthode this.$set() pour forcer la mise à jour de v-for. Parce que nous utilisons la syntaxe Vue, cette fonction événementielle doit être écrite dans les méthodes. rrreee
Le principe des échecs de regret est de changer la valeur de la dernière pièce d'échecs à 0. Comment savoir quelle pièce d'échecs est la dernière ? Deux tableaux globaux n'ont-ils pas été déclarés ci-dessus ? Le dernier élément du tableau est la dernière pièce d'échecs. Une fois la valeur passée à 0, cet élément doit être supprimé du tableau global, car ce tableau n'est pas seulement utilisé pour regretter le mouvement, mais également pour déterminer le résultat ultérieurement. S'il n'est pas supprimé, il interférera avec la détermination. de résultat. La fonction de l’événement regret move doit également être écrite dans les méthodes. 
Écrivez-la à la finrrreee
"Comment utiliser le JS natif pour écrire rapidement un jeu de backgammon"
https://juejin. .cn/post/7107172938062757925?share_token=83f7dc0c-3038-4310-b9b5-ba8a7c914af4🎜🎜🎜🎜🎜🎜【Tutoriels vidéo associés recommandés : 🎜front-end web🎜】🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Que dois-je faire si le projet Vue se charge lentement pour la première fois ? Deux solutions
- 9 conseils Vue pour améliorer l'efficacité et les performances du développement
- Premiers pas avec les instructions Vue : parlons des six instructions intégrées couramment utilisées
- Quelle est la différence entre jquery et ajax dans vue
- 8 projets Vue incontournables sur Github, venez les ajouter à votre collection ! !