大致思路
首先作为一个棋类游戏,必不可少的就是棋盘,棋盘我们只需要用HTML5的Canvas画布来实现就行了。
而当我们的画布实现后,就是点击棋盘会在画布上面进行绘棋,绘棋的时候又需要注意到一点,那就是什么时候绘制白棋什么时候绘制黑棋?
这个好办,设定一个值,每次点击了画布顺便给他取反,如果他为1则绘制白棋,如果他他为0则绘制黑棋。(其实可以反过来)
然后棋子绘制完成后就是我们的判断了,判断前我们要先分析五子棋获胜的方法,首先,我们先大致的分成四种获胜方法;第一种就是水平的五个相邻且是同一种类型的棋子相连
这里我们又涉及到了,从左边找和从右边找。从左边找就像是在x轴上不断的减值,从右边找就像是在x轴不断加值
第二种就是垂直的五个相邻且是同一种类型的棋子相连
这里和上面一样,分成了从上面找和从下面找,从上面找就像是在y轴上不断的减值,从下边找就像y轴不断加值
第三种就是一撇的五个相邻且是同一种类型棋子的相连
这里我们又分成了朝着左下和右上方向走,朝着左下就像是x不断减值,y不断加;朝着右上走就像是x不断加,y不断减
第四种就是一捺的五个相邻且是同一种类型棋子的相连
这里和上面相反,分成朝着左上和右下,朝着左上就像是y和x不断减值,朝着右下就像是x和y不断加值
然后我们在判断的时候建立四个值,每个值代表每个方向,一共有四个值。
然后每个方向如果相邻的是同一种类型的棋子,那么就累加,直到有一个方向的值达到5了,那就证明游戏结束了。
游戏结束后,我们也要得到游戏结束的时间和黑棋白棋分别走了下了多少个。
说到这,我们的五子棋游戏的思路就已经完毕了,接下来话不多说,上代码
五子棋游戏
当前时间 : 0s
黑棋 :0 ,白棋 : 0
// 获取画布对象
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);
}
}