|
这里只有双人模式（程序可以直接运行，只需要三张图，都放下面了） 效果如图：  这里需要三张图（以下三张图均来源于百度）： 背景图：  白子图：  黑子图： 罗辑如下：设置20X15的棋盘用300个浮动的小盒子，当用户点击要下的盒子时，改变其背景图片，通过点击次数判定要下的黑子还是白子，从而实现下棋。通过js的点击事件，每下一子都进行全局判定，判定是否有人胜利。
Document
*{
margin: 0;
padding: 0;
}
.a{
width: 1000px;
height: 1000px;
margin: 100px auto 0;
}
.a div{
float: left;
width: 50px;
height: 50px;
background-image: url(../img/QQ截图20210527120353.png) ;
}
//设置棋盘大小为20X10
var aa=document.querySelector('.a');
for(var i=0;i
a[i].setAttribute('nam',i);
a[i].nam=0;
a[i].addEventListener('click',fn);
//点击后换图
function fn(){
if(j1%2==0){
this.style.backgroundImage="url(../img/QQ截图20210527120333.png)";
this.nam=1;
}else{
this.style.backgroundImage="url(../img/QQ截图20210527120312.png)";
this.nam=2;
}
j1++;
//点击后判定是否胜利
function x(e){
if(e>299||e
return a[e].nam;
}
}
for(var j=0;j alert('黑方胜利');}
else if (x(j)==1&&x(j+20)==1&&x(j+40)==1&&x(j+60)==1&&x(j+80)==1){alert('黑方胜利');}
else if (x(j)==1&&x(j+21)==1&&x(j+42)==1&&x(j+63)==1&&x(j+84)==1){alert('黑方胜利');}
else if (x(j)==1&&x(j-19)==1&&x(j-38)==1&&x(j-57)==1&&x(j-76)==1){alert('黑方胜利');}
else if (x(j)==2&&x(j+1)==2&&x(j+2)==2&&x(j+3)==2&&x(j+4)==2){ alert('白方胜利');}
else if (x(j)==2&&x(j+20)==2&&x(j+40)==2&&x(j+60)==2&&x(j+80)==2){alert('白方胜利');}
else if (x(j)==2&&x(j+21)==2&&x(j+42)==2&&x(j+63)==2&&x(j+84)==2){alert('白方胜利');}
else if (x(j)==2&&x(j-19)==2&&x(j-38)==2&&x(j-57)==2&&x(j-76)==2){alert('白方胜利');}
}
this.removeEventListener('click',fn);
}
}
|