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

这几天在温习VueJs 简单写了一个井字棋小游戏 分享下思路 目前只是实现了基本的逻辑判断，还未进行服务器等等的编写 后期有时间再加

首先，我们的井字棋，主要就是要判断每一次落子的时候该颜色的棋子对应的行、列、斜向下、斜向上几个方向有无三个同色的棋子 有则胜利

游戏的基本html如下：

加上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;
							}
						}
					}
				},

 

最后附上完整的代码，顺便求一下人机互动AI的思路

	
		
		
		
	
	
		
		
		
		

			
			

				
游戏结束,{{turn==2?"白":"黑"}}方胜
				
{{masktips}}
			
			
			

				

				

				

				

				

				

				

				

				

			
			
		
		
		
		
	
	
	

 

 

PS：本文纯属本人原创，如有更优做法 欢迎指点   互相学习