基于vue框架使用canvas实现井字棋小游戏

引言：最近实现了一个图片上传压缩的功能，使用了canvas，所以学习一下canvas的语法，实现一个井字棋小游戏，这个小游戏可以人人对弈，如果大家有兴趣，可以对代码进行迭代，比如采用极大值极小值搜索法来实现人机对弈或者机机对弈。

• 废话少说，先看演示效果:点击此处预览效果

---

1. 创建画布

<div id="app" >
			<div style="border: solid 1px #000000 ;width: 600px;height: 600px;" @click="getLocation">
				<canvas id="mycanvas" width="600px" height="600px"></canvas>
			</div>
			<div style="margin: 15px;">
				<button type="button" @click="drawBoard()" >清空棋盘</button>
			</div>
			
		</div>

2. 初始画棋盘
首先需要画出四条线，我定义的棋盘大小为600，

drawBoard(){
						this.clearAll();
						this.context.beginPath();
						this.context.moveTo(0, 200);
						this.context.lineTo(600, 200);
						this.context.moveTo(0, 400);
						this.context.lineTo(600, 400);
						this.context.moveTo(200, 0);
						this.context.lineTo(200, 600);
						this.context.moveTo(400, 0);
						this.context.lineTo(400, 600);
						this.context.strokeStyle = 'pink';
						this.context.closePath();
						this.context.stroke();
					},

3. 画O

drawO(x,y){
						this.context.beginPath();
						this.context.arc(x, y, 60, 0, Math.PI * 2, true);
						this.context.fillStyle = 'rgba(0,255,0,0.25)'
						this.context.fill();
						this.context.closePath();
						this.context.stroke();
					},

4. 画X

drawX(x,y){
						 this.context.beginPath();
						 this.context.moveTo(x-40, y-40);
						 this.context.lineTo(x+40, y+40);
						 this.context.moveTo(x+40, y-40);
						 this.context.lineTo(x-40, y+40);
						 this.context.strokeStyle = 'orange';
						 this.context.closePath();
						 this.context.stroke();
					},

5.将棋子画到棋盘
那么如何将O和X画到每个格子的中心位置呢，我是这样解决的：首先获取鼠标点击位置的坐标，设我的棋盘步长为step=200，这样就可以算出点击任意一个格子的中心点（x,y）：

			let arr_x = parseInt(e.clientX/this.step);
			let arr_y = parseInt(e.clientY/this.step);
			let x = arr_x * this.step+(this.step/2);
			let y = arr_y * this.step+(this.step/2);

例如：鼠标点击坐标为（158,120），那么arr_x=0,arr_y=0，这就代表他点击了第一个格子，第一个格子中心点就为（100,100），以此类推。

6. 判断输赢
如何判断输赢呢，我们都知道三个相同的连成一条线就代表赢，我这里初始化了一个二维数组，二维数组的每一项的值都为零。

//棋盘初始化
					initBoard() {
						this.arr = ''
						let t = new Array()
						for(let p = 0;p<3;p++){
							t[p] = new Array()
						}
						for(let i=0;i<3;i++){
							for(let j=0;j<3;j++){
								t[i][j] = 0
							}
						}
					},

当下棋的时候，这个数组的位置就设置为1或者2，当三个1连成一条线这就代表一方赢，我这里给出一种情况判断输赢，其他情况可以自行完善。

if(this.arr[0][0] == 1 && this.arr[0][1] == 1&& this.arr[0][2] == 1){
		alert("O方获胜")
		return
	}

7. 交换下棋方
如何判断哪一方下棋呢，我定义了一个flag，初始值为true，当一方下完，就将flag设置为false，以此类推，判断一下就可以了。

8. 下完棋后，需要清空棋盘

clearAll(){
				this.initBoard()//初始化棋盘数组
				this.context.clearRect(0,0,600,600)//清空画布
				//重设高度也可以清空画布
				this.mycanvas.height = 600;
				this.mycanvas.width = 600;
			},

---

此代码仅仅是练习使用，有好多处可以优化的地方，欢迎大家来谈论~