js 五子棋算法 html
js的一款五子棋算法
这个五子棋算法是从一篇博客上看的，我解决了当五子棋下到两边时，数组越界的问题。
过程：当一方棋子下到棋盘上时，判断左右，上下，左上右下，左下右上 的本方棋子个数，当为5时游戏结束，一方胜出。
function draw_board(){
var tmp=document.getElementById('canvas1');
var canva=tmp.getContext('2d');
canva.clearRect(0,0,600,600);
for(var i=0;i<=15;i++){
canva.beginPath();
canva.fillText(i,30+i*30,15);
canva.moveTo(30+i*30,30);
canva.lineTo(30+i*30,480);
canva.stroke();
if(i!=0){
canva.fillText(i,0,30+i*30);
}
canva.moveTo(30,30+i*30);
canva.lineTo(480,30+i*30);
canva.closePath();
canva.stroke();
}
}
function start(){
var over=false;
var Chessboard=[];//-1 黑，0无，1白
var chess_num=0;
var nownow=0;
document.getElementById('canvas1').setAttribute("height","500px");
document.getElementById('canvas1').setAttribute("width","500px");
var tmp=document.getElementById('canvas1');
var canva=tmp.getContext('2d');
canva.fillStyle="#000";
for(var i=0;i<=15;i++){
canva.beginPath();
canva.fillText(i,30+i*30,15);
canva.moveTo(30+i*30,30);
canva.lineTo(30+i*30,480);
canva.stroke();
if(i!=0){
canva.fillText(i,0,30+i*30);
}
canva.moveTo(30,30+i*30);
canva.lineTo(480,30+i*30);
canva.closePath();
canva.stroke();
}
//初始化棋盘信息，将二维数组所有项全部初始化为0
for (var i = -1; i <= 16; i++) {
Chessboard[i]=[];
for (var j = -1; j <= 16; j++) {
Chessboard[i][j]=0;
}
}
var now_chess=true;
var drawChess=function(i,j){
canva.beginPath();
canva.arc(30+i*30,30+j*30,13,0,2*Math.PI,true);
canva.closePath();
if(now_chess){
canva.fillStyle="#000000";
}else{
canva.fillStyle="#fff";
}
canva.fill();
}
$('#canvas1').mousemove(function(e){
// 悬浮事件
});
tmp.onclick=function(e){
if(over){
window.alert("本轮游戏已经结束了，请刷新浏览器重新开始！");
}else{
var x=e.offsetX;
var y=e.offsetY;
console.log(x+" "+y);
var i=Math.floor(x/32);
var j=Math.floor(y/30);
if(Chessboard[i][j]===0){
if(i>=0&&j>=0&&i<=15&&j<=15){
drawChess(i,j);
chess_num++;
if(now_chess){ //黑子
Chessboard[i][j]=-1;
nownow=-1;
now_chess=false;//将下一步棋的颜色进行反转
}else{
Chessboard[i][j]=1;
nownow=1;
now_chess=true;//将下一步棋的颜色进行反转
}
console.log(nownow);
//遍历是否赢
if(chess_num>9){
var count1=0;
var count2=0;
var count3=0;
var count4=0;
console.log(chess_num);
//横向，参考博客 陶伟基
for(var cc=i;cc>=0;cc--){
if(Chessboard[cc][j]!=nownow){
break;
}
count1++;
}//左
for(var dd=i+1;dd<=15;dd++){
if(Chessboard[dd][j]!=nownow){
break;
}
count1++;
}//右
console.log("横向："+count1);
for(var ee=j;ee>=0;ee--){
if(Chessboard[i][ee]!=nownow){
break;
}
count2++;
}//上
for(var ff=j+1;ff<=15;ff++){
if(Chessboard[i][ff]!=nownow){
break;
}
count2++;
}//下
console.log("竖向："+count2);
for(var gg=i,hh=j;gg>=0,hh>=0;gg--,hh--){
if(Chessboard[gg][hh]!=nownow){
break;
}
count3++;
}//左上,todo 解决越界问题？
for(var jj=i+1,kk=j+1;jj<=15,kk<=15;jj++,kk++){
if(Chessboard[jj][kk]!=nownow){
break;
}
count3++;
}//右下
console.log("左上右下："+count3);
for(var ll=i,mm=j;ll>=0,mm<=15;ll++,mm--){
if(Chessboard[ll][mm]!=nownow){
break;
}
count4++;
}
for(var nn=i-1,oo=j+1;nn<=15,oo>=0;nn--,oo++){
if(Chessboard[nn][oo]!=nownow){
break;
}
count4++;
}
console.log("右上左下："+count4);
if(count1>=5||count2>=5||count3>=5||count4>=5){
if(nownow==-1){
window.alert("黑棋赢了");
}else if(nownow==1){
window.alert("白棋赢了");
}
over=true;
}
}
}
}
}
}
}
有的地方缩进可能有点问题。写的着急了。