五子棋小游戏

大致思路

首先作为一个棋类游戏,必不可少的就是棋盘,棋盘我们只需要用HTML5的Canvas画布来实现就行了。
而当我们的画布实现后,就是点击棋盘会在画布上面进行绘棋,绘棋的时候又需要注意到一点,那就是什么时候绘制白棋什么时候绘制黑棋?
这个好办,设定一个值,每次点击了画布顺便给他取反,如果他为1则绘制白棋,如果他他为0则绘制黑棋。(其实可以反过来)
然后棋子绘制完成后就是我们的判断了,判断前我们要先分析五子棋获胜的方法,首先,我们先大致的分成四种获胜方法;

第一种就是水平的五个相邻且是同一种类型的棋子相连

这里我们又涉及到了,从左边找和从右边找。从左边找就像是在x轴上不断的减值,从右边找就像是在x轴不断加值

第二种就是垂直的五个相邻且是同一种类型的棋子相连

这里和上面一样,分成了从上面找和从下面找,从上面找就像是在y轴上不断的减值,从下边找就像y轴不断加值

第三种就是一撇的五个相邻且是同一种类型棋子的相连

这里我们又分成了朝着左下和右上方向走,朝着左下就像是x不断减值,y不断加;朝着右上走就像是x不断加,y不断减

第四种就是一捺的五个相邻且是同一种类型棋子的相连

这里和上面相反,分成朝着左上和右下,朝着左上就像是y和x不断减值,朝着右下就像是x和y不断加值
然后我们在判断的时候建立四个值,每个值代表每个方向,一共有四个值。
然后每个方向如果相邻的是同一种类型的棋子,那么就累加,直到有一个方向的值达到5了,那就证明游戏结束了。
游戏结束后,我们也要得到游戏结束的时间和黑棋白棋分别走了下了多少个。
说到这,我们的五子棋游戏的思路就已经完毕了,接下来话不多说,上代码

HTML代码




	五子棋游戏
	
	


	
	
	

当前时间 : 0s

黑棋 :0 ,白棋 : 0

JS代码

// 获取画布对象
var myCanvas = document.getElementById("canvas");
// 设置画布背景颜色
myCanvas.style.background = "#cecece";
// 获取画布上下文对象
var myContent = myCanvas.getContext("2d");
// 保存棋子的x轴和y轴位置
var poinX = 0,poinY = 0;
// 判断当前是否应该走黑棋或者白棋
var type = 0;
// 定时器默认值
var timer = null;
// 设置默认时间
var seconds = 0;
// 设置黑棋默认已走步数
var blackGo = 0;
// 设置白棋默认已走步数
var whiteGo = 0;
// 如果是1则表示当前游戏结束,否则代表游戏未结束
var ifWin = 0;
// 重置按钮点击事件
$("#btn").click(function () {
	// 清楚该范围内所有画出来的东西
	myContent.clearRect(0,0,740,740);
	// 调用画棋盘的方法
	draw();
	// 游戏结束的状态返回成游戏未开始
	ifWin = 0;
	// 重置黑棋白棋步骤
	type = 0;
	// 清空数组里所有有关黑棋白棋位置的值
	for(var i = 0; i < 19; i++){
		for(var j = 0; j < 19; j++){
			points[i][j] = 0;
		}
	}
	// 清除定时器
	clearInterval(timer);
	// 设置定时器默认值
	timer = null;
	// 清除时间
	seconds = 0;
	// 清除黑棋步数
	blackGo = 0;
	// 清除白棋步数
	whiteGo = 0;
	$("#infoGo").text("黑棋 :"+ blackGo +" ,白棋 : "+ whiteGo +"");
	$("#infoTimer").text("当前时间 : 0s");
});
// 画棋盘的方法
draw();
function draw() {
	myContent.beginPath();
	for(var i = 0 ; i < 19 ; i ++) {
		//x轴
		myContent.moveTo(40 * i + 10 , 10);
		myContent.lineTo(40 * i + 10 , 730);
		//y轴
		myContent.moveTo(10 , 40 * i + 10);
		myContent.lineTo(730 , 40 * i + 10);
	}
	myContent.stroke();
}
// 存储黑白棋位置的数组
var points = [
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];
// 点击画布画棋子
$("#canvas").click(function (e) {
	// 判断此次是应该画黑棋还是白棋
	type = !type;
	// 如果定时器为空则启动它
	if(timer == null) {
		timer = setInterval(function () {
			seconds++;
			$("#infoTimer").text("当前时间 : "+ seconds +"s");
		},1000);
	}
	// 判断游戏是否结束
	if(ifWin) {// 游戏结束
		alert("游戏已结束,请重新开始!");
	}
	// 游戏未结束
	myContent.beginPath();
	// 获取点击的x和y的坐标
	var x = e.offsetX;
	var y = e.offsetY;
	// 利用循环来控制棋子会在线交叉的位置
	for(var i = 0 ; i < 19 ; i ++) {
		if(Math.abs(x - (40 * i + 10)) < 20) {
			x = 40 * i + 10;
			poinX = i;
		}
		if(Math.abs(y - (40 * i + 10)) < 20) {
			y = 40 * i + 10;
			poinY = i;
		}
	}
	// 如果当前位置没有棋子则可以进行下棋
	if(points[poinX][poinY] == 0) {
		if(type) {// 此时是白棋
			myContent.arc(x,y,20,0,Math.PI * 2,false);
			myContent.fillStyle = "white";
			points[poinX][poinY] = "1";
			whiteGo++;
		} else {// 此时是黑棋
			myContent.arc(x,y,20,0,Math.PI * 2,false);
			myContent.fillStyle = "black";
			points[poinX][poinY] = "2";
			blackGo++;
		}
		myContent.fill();
		$("#infoGo").text("黑棋 :"+ blackGo +" ,白棋 : "+ whiteGo +"");
		myContent.stroke();
		// 调用函数判断输赢
		yesWin(points[poinX][poinY], poinX, poinY);
	}
});
// 判断输赢
function yesWin(num,x,y) {
	var ys1 = 0,//如果是水平方向的则在此数上进行累加
	ys2 = 0,//如果是垂直方向的则在此数上进行累加
	ys3 = 0,//如果是一捺方向的则在此数上进行累加
	ys4 = 0;//如果是一撇方向的则在此数上进行累加
	/* 水平方向 第一个是一直往左边找,第二个是一直往右边找 */
	for(var i = x; i >= 0; i --){
		if(points[i][y] != num) {
			break;
		}
		ys1++;
	}
	for(var i = x + 1; i < 19; i++){
		if(points[i][y] != num) {
			break;
		}
		ys1++;
	}
	/* 垂直方向 第一个是一直往上面找,第二个是一直往下面找 */
	for(var i = y; i >= 0; i--) {
		if(points[x][i] != num) {
			break;
		}
		ys2++;
	}
	for(var i = y + 1; i < 19; i++) {
		if(points[x][i] != num) {
			break;
		}
		ys2++;
	}
	/* 一捺方向 第一个是朝着左上方找,第二个是朝着右下方找 */
	for(var i = x, j = y; i >=0, j >= 0; i--, j--) { 
		if (i < 0 || j < 0 || points[i][j] != num) { 
			break; 
		} 
		ys3++; 
	}
	for(var i = x+1, j = y+1; i < 19, j < 19; i++, j++) {
		if (i >= 19 || j >= 19 || points[i][j] != num) {
			break; 
		}
		ys3++;
	}
	/* 一撇方向 第一个是朝着左下方向走,第二个是朝着右上的方向走 */
	for(var i = x, j = y; i >= 0, j < 19; i--, j++) { 
		if (i < 0 || j >= 19 || points[i][j] != num) { 
			break; 
		} 
		ys4++; 
	}
	for(var i = x+1, j = y-1; i < 19, j >= 0; i++, j--) {
		if (i >= 19 || j < 0 || points[i][j] != num) {
			break;
		} 
		ys4++; 
	}
	// 当四个方向有一个值累加到了5则证明游戏结束
	if (ys1 >= 5 || ys2 >= 5 || ys3 >= 5 || ys4 >= 5) { 
		if (num == 1) {//白棋
			alert("白棋赢了,游戏结束!");
		} else if (num == 2) {//黑棋
			alert("黑棋赢了,游戏结束!");
		}
		ifWin = true;
		clearInterval(timer);
	}
}

你可能感兴趣的:(前端,五子棋游戏,Canvas)