好资源导航 » 文章资讯 » JavaScript实现五子棋小游戏

JavaScript实现五子棋小游戏

2023-07-13 07:39:03 73

本文实例为大家分享了JavaScript实现五子棋小游戏的具体代码，供大家参考，具体内容如下

HTML部分





五子棋

悔棋

JavaSrcipt

window.onload=function(){

varbusz=newArray();

//div单击事件
varansj=function(){

constx=this.getAttribute("col");
consty=this.getAttribute("row");
//console.log(x,y,nowPlayer)

if(nowPlayer){
qjck[this.getAttribute("row")][this.getAttribute("col")]=1;
this.classList.add("col-actionA");
nowPlayer=!nowPlayer;
}else{
qjck[this.getAttribute("row")][this.getAttribute("col")]=2;
this.classList.add("col-actionB");
nowPlayer=!nowPlayer;
}

busz.push(this);

varjs=pdsl(y,x);

if(js)
{
setTimeout(function(){
alert("游戏结束");
location.reload();//刷新浏览器

},50);

}

this.onclick=null;

}

//判断是否结束
varpdsl=function(x,y){

varsx=1,zy=1,zs=1,ys=1,t=1;

//上
for(t=1;t<=5;t++){

if(x-t<0)
break;

console.log("上"+zy);
if(qjck[x-t][y]==qjck[x][y]&&qjck[x-t][y]!=0)
sx++;
else
break;
}

//下
for(t=1;t<=5;t++){

if(Number(x)+t>=10)
break;

console.log("下"+zy);
if(qjck[Number(x)+t][y]==qjck[Number(x)][y]&&qjck[Number(x)+t][y]!=0)
sx++;
else
break;
}

//左
for(t=1;t<=5;t++){

if(y-t<0)
break;

console.log("左"+zy);
if(qjck[x][y-t]==qjck[x][y]&&qjck[x][y-t]!=0)
zy++;
else
break;
}

//右
for(t=1;t<=5;t++){

if(Number(y)+t>=10)
break;

console.log("右"+zy);
if(qjck[x][Number(y)+t]==qjck[x][y]&&qjck[x][Number(y)+t]!=0)
zy++;
else
break;
}

//上左
for(t=1;t<=5;t++){

if(x-t<0)
break;

console.log("上左"+zy);
if(qjck[x-t][y-t]==qjck[x][y]&&qjck[x-t][y-t]!=0)
zs++;
else
break;
}

//下右
for(t=1;t<=5;t++){

if(Number(x)+t>=10||Number(y)+t>=10)
break;

console.log("下右"+zy);
if(qjck[Number(x)+t][Number(y)+t]==qjck[x][y]&&qjck[Number(x)+t][Number(y)+t]!=0)
zs++;
else
break;
}

//上右
for(t=1;t<=5;t++){

if(x-t<0||Number(y)+t>=10)
break;

console.log("上右"+zy);
if(qjck[x-t][Number(y)+t]==qjck[x][y]&&qjck[x-t][Number(y)+t]!=0)
ys++;
else
break;
}

//下左
for(t=1;t<=5;t++){

if(Number(x)+t>=10||y-t<0)
break;

console.log("下右"+zy);
if(qjck[Number(x)+t][y-t]==qjck[x][y]&&qjck[Number(x)+t][y-t]!=0)
ys++;
else
break;
}


console.log(sx+""+zy+""+zs+""+ys);

if(sx==5||zy==5||zs==5||ys==5)
returntrue;
else
returnfalse;

}

varnowPlayer=0;

//棋盘数组
varqjck=Array();

//div
varpiece=document.createElement("div");
piece.id="piece";

//得到div
varqipan=document.getElementById("qipan");

//生成棋盘
for(letr=0;r<15;r++){
letnewrow=document.createElement("div");
newrow.id="row"+r;
newrow.classList.add("row")

letarrCol=Array()
qjck.push(arrCol)

for(letc=0;c<15;c++){
arrCol.push(0)
letnewcol=document.createElement("div");

newcol.id="col"+c;

newcol.classList.add("col");

newcol.setAttribute("row",r);
newcol.setAttribute("col",c)
newrow.appendChild(newcol)

newcol.onclick=ansj;

}


//console.log(newrow)
qipan.appendChild(newrow)
}

//悔棋
varhq=document.getElementById("hq");

hq.onclick=function(){

if(busz.length<=0)
return;

vardivt=busz.pop();
divt.onclick=ansj;

divt.classList.remove("col-actionA");
divt.classList.remove("col-actionB");

qjck[divt.getAttribute("row")][divt.getAttribute("col")]=0;

nowPlayer=!nowPlayer;

//console.log(qjck);
console.log(divt);
}


}

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏玩不停

javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com