基于VueJs实现的井字棋小游戏

这几天在温习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.