好资源导航 » 文章资讯 » 原生js实现五子棋游戏

原生js实现五子棋游戏

2023-07-24 02:13:04 78

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

html:


五子棋游戏

haha

css:


*{
margin:0;
padding:0;
}
body{
/*overflow:hidden;*/
margin-top:10px;
text-align:center;
background-color:#C7C7C7;
}
#box{
position:relative;
border:1pxsolid;
margin:20pxauto;
width:546px;
height:546px;
background-color:#C7C7C7;
}
#box.squre{
width:40px;
height:40px;
border:1pxsolid;
float:left;
}
#box01.squre:hover{
background-color:pink;
}
#box01{
position:absolute;
/*border:1pxsolid;*/
margin:0auto;
width:588px;
height:588px;
/*background-color:pink;*/
/*opacity:0.5;*/
top:-20px;
left:-20px;
}
#box01.qz{
width:30px;
height:30px;
border:1pxsolid#C7C7C7;
float:left;
border-radius:50%;
margin:5px;
}
#box01.qz:hover{
background-color:pink;
}
#box02{
position:absolute;
line-height:546px;
font-size:50px;
color:black;
width:100%;
background-color:pink;
display:none;
opacity:0.6;
}

script:


window.onload=function(){
letbox=document.getElementById("box");
letbox01=document.getElementById("box01");
//画棋盘
letarr=newArray();
for(leti=0;i<13;i++){
arr[i]=newArray();
for(letj=0;j<13;j++){
arr[i][j]=document.createElement("div");
arr[i][j].className="squre";
box.appendChild(arr[i][j]);
}
}
//画棋子
letarr01=newArray();
for(leti=0;i<14;i++){
arr01[i]=newArray();
for(letj=0;j<14;j++){
arr01[i][j]=document.createElement("div");
arr01[i][j].className="qz";
box01.appendChild(arr01[i][j]);
}
}
for(letm=0;m<14;m++){
for(letn=0;n<14;n++){
arr01[m][n].onclick=function(){
//下棋之前统计一下黑白棋的个数，以便黑白交换下棋
letcount=0;
for(letl=0;l<14;l++){
for(letk=0;k<14;k++){
if(arr01[l][k].style.backgroundColor!=""){
count++;
}
}
}
//console.log(count);
if(this.className=="qz"&&count%2==0&&this.style.backgroundColor==""){
//下棋
this.style.backgroundColor="black";
//引入判断函数
//console.log(m,n);
checkGame(m,n);

}elseif(this.className=="qz"&&count%2!=0&&this.style.backgroundColor==""){
//下棋
this.style.backgroundColor="white";
//引入判断函数
checkGame(m,n);
}
}
}
}

//判断哪方输赢,四个方向（横向、纵向、左斜、右斜）
//m是y轴，n是x轴
leta,b;
letflag=0;
letbox02=document.getElementById("box02");
functioncheckGame(a,b){
//判断横向
letqzColor=arr01[a][b].style.backgroundColor;
//console.log(qzColor);
for(letk=(b-4);k<=(b+4);k++){
if(k>=0&&k<14){
if(qzColor==arr01[a][k].style.backgroundColor&&arr01[a][k].style.backgroundColor!=""){
flag++;
if(flag==5){
//alert(qzColor+"win!!");
box02.innerHTML=qzColor+"win!!";
box02.style.display="block";
}
}else{
flag=0;
}
}else{
flag=0;
}
}

//判断纵向
for(letk=(a-4);k<=(a+4);k++){
if(k>=0&&k<14){
if(qzColor==arr01[k][b].style.backgroundColor&&arr01[k][b].style.backgroundColor!=""){
flag++;
if(flag==5){
//alert(qzColor+"win!!");
box02.innerHTML=qzColor+"win!!";
box02.style.display="block";
}
}else{
flag=0;
}
}else{
flag=0;
}
}

//判断左斜
letax=(a-4);//ax用来记录横坐标的变化
for(letk=(b-4);k<=(b+4);k++){
if(k>=0&&k<14&&ax>=0&&ax<14){
if(qzColor==arr01[ax][k].style.backgroundColor&&arr01[ax][k].style.backgroundColor!=""){
flag++;
if(flag==5){
//alert(qzColor+"win!!");
box02.innerHTML=qzColor+"win!!";
box02.style.display="block";
}
}else{
flag=0;
}
}else{
flag=0;
}
ax++;
}

//判断右斜
bx=a-4;
for(letk=(b+4);k>=(b-4);k--){
if(k>=0&&k<14&&bx>=0&&bx<14){
if(qzColor==arr01[bx][k].style.backgroundColor&&arr01[bx][k].style.backgroundColor!=""){
flag++;
if(flag==5){
//alert(qzColor+"win!!");
box02.innerHTML=qzColor+"win!!";
box02.style.display="block";
}
}else{
flag=0;
}
}else{
flag=0;
}
bx++;
}
}
}

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

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏玩不停

javascript经典小游戏汇总

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

返回顶部
514930285
czq8825@qq.com