vue井字小游戏
井字游戏样式
vue-cli脚手架引入jQuery Less
npm i jquery -S
npm il -D less-loader less
import $ from ‘jquery’
template部分
<template>
<div class="jing">
<div class="gamas" v-show="showGame">
<br />
<div class="top">
<div :class="isFalse ? active : ''">X</div>
<div :class="isFalse ? '' : active">O</div>
</div>
<div class="bottom">
<div class="row">
<div @click="add(1)" value="1"></div>
<div @click="add(2)" value="2"></div>
<div @click="add(3)" value="3"></div>
</div>
<div class="row">
<div @click="add(4)" value="4"></div>
<div @click="add(5)" value="5"></div>
<div @click="add(6)" value="6"></div>
</div>
<div class="row">
<div @click="add(7)" value="7"></div>
<div @click="add(8)" value="8"></div>
<div @click="add(9)" value="9"></div>
</div>
</div>
</div>
<div class="winX" v-show="showX">
<p>玩家 X 胜利</p>
</div>
<div class="winY" v-show="showY">
<p>玩家 Y 胜利</p>
</div>
<div class="pingju" v-show="true"><p>平局</p></div>
</div>
</template>
css部分
<style lang="less">
body,
html {
background: rgb(12, 158, 243);
}
.jing {
width: 800px;
height: 650px;
border-radius: 10px;
margin: auto;
margin-top: 50px;
}
.top {
display: flex;
align-items: center;
justify-content: center;
background: rgba(225, 225, 225, 0.8);
border-radius: 10px;
width: 300px;
margin: 10px auto;
div {
margin: 5px 10px;
padding: 10px 50px;
font-size: 30px;
font-weight: bold;
transition: all 0.5s;
}
.actives {
background: orange;
color: #fff;
border-radius: 5px;
}
}
.bottom {
.row {
display: flex;
justify-content: center;
align-items: center;
div {
width: 180px;
height: 180px;
box-shadow: 0 0 10px #ccc;
background: rgba(225, 225, 225, 0.7);
font-size: 140px;
display: flex;
border-radius: 10px;
justify-content: center;
align-items: center;
color: rgb(12, 158, 243);
margin: 5px;
}
}
}
.winX,
.winY,
.pingju {
font-size: 33px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-shadow: 0 0 10px #fff;
p {
border: 1px solid rgba(225, 225, 225, 0.3);
padding: 15px 30px;
border-radius: 10px;
}
}
</style>
script部分
<script>
export default {
data() {
return {
active: 'actives',
isFalse: true,
showGame: true,
showX: false,
showY: false,
pingju: false,
arrX: [],
arrY: [],
emags: '',
}
},
computed: {},
methods: {
add(val) {
//改变isFalse
this.isFalse = !this.isFalse
if (this.isFalse == false) {
$('#app .row div')
.eq(val - 1)
.html('X') //显示X
this.arrX.push(val)
// 判断条件
if (
(this.arrX.includes(1) &&
this.arrX.includes(2) &&
this.arrX.includes(3)) ||
(this.arrX.includes(4) &&
this.arrX.includes(5) &&
this.arrX.includes(6)) ||
(this.arrX.includes(7) &&
this.arrX.includes(8) &&
this.arrX.includes(9)) ||
(this.arrX.includes(1) &&
this.arrX.includes(4) &&
this.arrX.includes(7)) ||
(this.arrX.includes(2) &&
this.arrX.includes(5) &&
this.arrX.includes(8)) ||
(this.arrX.includes(3) &&
this.arrX.includes(6) &&
this.arrX.includes(9)) ||
(this.arrX.includes(1) &&
this.arrX.includes(5) &&
this.arrX.includes(9)) ||
(this.arrX.includes(3) &&
this.arrX.includes(5) &&
this.arrX.includes(7))
) {
//显示隐藏
setTimeout(() => {
this.showGame = false
this.showX = true
}, 500)
// alert('Xwin')
//胜利禁止点击
$('#app .row div').css({
pointerEvents: 'none',
})
}
} else {
$('#app .row div')
.eq(val - 1)
.html('O')
this.arrY.push(val)
if (
(this.arrY.includes(1) &&
this.arrY.includes(2) &&
this.arrY.includes(3)) ||
(this.arrY.includes(4) &&
this.arrY.includes(5) &&
this.arrY.includes(6)) ||
(this.arrY.includes(7) &&
this.arrY.includes(8) &&
this.arrY.includes(9)) ||
(this.arrY.includes(1) &&
this.arrY.includes(4) &&
this.arrY.includes(7)) ||
(this.arrY.includes(2) &&
this.arrY.includes(5) &&
this.arrY.includes(8)) ||
(this.arrY.includes(3) &&
this.arrY.includes(6) &&
this.arrY.includes(9)) ||
(this.arrY.includes(1) &&
this.arrY.includes(5) &&
this.arrY.includes(9)) ||
(this.arrY.includes(3) &&
this.arrY.includes(5) &&
this.arrY.includes(7))
) {
//胜利禁止点击
$('#app .row div').css({
pointerEvents: 'none',
})
setTimeout(() => {
this.showGame = false
this.showY = true
}, 500)
}
}
$('#app .row div')[val - 1].style.pointerEvents = 'none'
if (this.arrX.length + this.arrY.length >= 9) {
setTimeout(() => {
this.showGame = false
this.pingju = true
}, 500)
}
},
},
}
</script>