这几天在温习VueJs 简单写了一个井字棋小游戏 分享下思路 目前只是实现了基本的逻辑判断，还未进行服务器等等的编写 后期有时间再加
首先，我们的井字棋，主要就是要判断每一次落子的时候该颜色的棋子对应的行、列、斜向下、斜向上几个方向有无三个同色的棋子 有则胜利
游戏的基本html如下：
将content里面内容用v-for简单优化一下子：
加上css后界面效果如下图（看起来比较简陋哈，毕竟长得好看只是一时半会的事，能用才是一辈子的事情吗哈哈）：
下面就是游戏的主要方法(落子)：
在这里我用的是二维数组来控制，点击元素 当turn等于1的时候将chess数组对应的行列变为1，进而通过属性绑定的方法直接更改cell的value属性 ，当turn等于2时 反之将数组改为-1
然后就可以直接通过css的属性选择器直接给样式
下面是落子后的视觉效果（还是只停留在能实现功能的基础上 美观什么的不重要嘿嘿）
界面有了，点击对应的格子也可以落子了。接着就是胜利条件的判断了，因为前面每一次点击的时候都已经将chess数组对应白棋变为1 黑棋变为-1 所以这里只需要判断当前点击位置所在的行列 斜向上、斜向下几个数组元素相加的值 当满足这几个值相加等于3或-3也就对应的判断出了白子或者黑子占据了整行货整列列 从而实现游戏胜利条件的编写
rule(){
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
//打横
if(this.chess[i][0]+this.chess[i][1]+this.chess[i][2]==3){
this.gameOver();
return false;
}else if(this.chess[i][0]+this.chess[i][1]+this.chess[i][2]==-3){
this.gameOver();
return false;
}
//打竖
else if(this.chess[0][j]+this.chess[1][j]+this.chess[2][j]==3){
this.gameOver();
return false;
}else if(this.chess[0][j]+this.chess[1][j]+this.chess[2][j]==-3){
this.gameOver();
return false;
}
//斜向下
else if(this.chess[0][0]+this.chess[1][1]+this.chess[2][2]==3){
this.gameOver();
return false;
}else if(this.chess[0][0]+this.chess[1][1]+this.chess[2][2]==-3){
this.gameOver();
return false;
}
//斜向上
else if(this.chess[2][0]+this.chess[1][1]+this.chess[0][2]==3){
this.gameOver();
return false;
}else if(this.chess[2][0]+this.chess[1][1]+this.chess[0][2]==-3){
this.gameOver();
return false;
}
}
}
},
再加上平局的逻辑（一开始没考虑到哈哈哈）：
html平局显示判断：
date数据添加isDraw是否平局的布尔值数据：
游戏开始方法新增平局数据初始化，防止平局后无法继续游戏的情况出现：
rule方法新增判断平局情况业务代码块：
最后附上完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>井字棋</title>
<style>
.content {
position: relative;
margin: 0 auto;
width: 600px;
height: 600px;
box-sizing: border-box;
}
.cell {
position: relative;
float: left;
width: 200px;
height: 200px;
box-sizing: border-box;
border: 1px solid red;
}
.cell[value="1"] .chess {
position: absolute;
width: 180px;
height: 180px;
top: 50%;
left: 50%;
margin: -90px 0 0 -90px;
border-radius: 50%;
background: lightgray;
}
.cell[value="-1"] .chess {
position: absolute;
width: 180px;
height: 180px;
top: 50%;
left: 50%;
margin: -90px 0 0 -90px;
background: black;
border-radius: 50%;
}
.mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background: white;
}
.gameResult {
position: absolute;
bottom: 60%;
left: 50%;
width: 400px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 0 0 -200px;
}
.gameStart {
position: absolute;
top: 40%;
left: 50%;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 0 0 -100px;
}
</style>
</head>
<body>
<div id="main">
<!--遮罩层-->
<div class="mask" v-if="isDraw">
<div class="gameResult" v-if="resultshow">游戏结束,平局</div>
<div class="gameStart"><button @click="gameStart()">{{masktips}}</button></div>
</div>
<div class="mask" v-if="maskshow&&!isDraw">
<div class="gameResult" v-if="resultshow">游戏结束,{{turn==2?"白":"黑"}}方胜</div>
<div class="gameStart"><button @click="gameStart()">{{masktips}}</button></div>
</div>
<!--主代码-->
<div class="content">
<div v-for="(row,i) in chess">
<div v-for="(col,j) in row" class="cell" :value="chess[i][j]" @click="active(i,j)">
<div class="chess"></div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<script>
const vm = new Vue({
"el": "#main",
data: {
//遮罩文字显示情况
"maskshow": true,
//遮罩文字
"masktips": "游戏开始",
//结果信息显示情况
"resultshow": false,
//当前回合轮到谁
"turn:": 1,
"isDraw": false,
//棋子信息
"chess": [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
]
},
methods: {
//点击开始，遮罩消失
gameStart() {
this.maskshow = false
this.isDraw = false
},
//游戏结束，初始化游戏状态,并提示
gameOver() {
this.maskshow = true;
this.masktips = "再来一局";
this.resultshow = true;
this.chess = [
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
]
},
//游戏规则判断
rule() {
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
//打横
if (this.chess[i][0] + this.chess[i][1] + this.chess[i][2] === 3) {
this.gameOver();
return false;
} else if (this.chess[i][0] + this.chess[i][1] + this.chess[i][2] === -3) {
this.gameOver();
return false;
}
//打竖
else if (this.chess[0][j] + this.chess[1][j] + this.chess[2][j] === 3) {
this.gameOver();
return false;
} else if (this.chess[0][j] + this.chess[1][j] + this.chess[2][j] === -3) {
this.gameOver();
return false;
}
//斜向下
else if (this.chess[0][0] + this.chess[1][1] + this.chess[2][2] === 3) {
this.gameOver();
return false;
} else if (this.chess[0][0] + this.chess[1][1] + this.chess[2][2] === -3) {
this.gameOver();
return false;
}
//斜向上
else if (this.chess[2][0] + this.chess[1][1] + this.chess[0][2] === 3) {
this.gameOver();
return false;
} else if (this.chess[2][0] + this.chess[1][1] + this.chess[0][2] === -3) {
this.gameOver();
return false;
}
}
}
//平局条件判断
let flag = true
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (this.chess[i][j] === 0) {
flag = false
break;
}
}
}
if (flag) {
this.gameOver();
this.isDraw = true
}
},
//落子
active(x, y) {
if (this.chess[x][y] !== 0) {
alert("此处已有子")
} else {
if (this.turn === 1) {
this.$set(this.chess[x], y, 1)
this.rule();
this.turn = 2;
} else {
this.$set(this.chess[x], y, -1)
this.rule();
this.turn = 1;
}
}
}
}
})
</script>
</html>
