这里只有双人模式(程序可以直接运行,只需要三张图,都放下面了)
效果如图:
这里需要三张图(以下三张图均来源于百度):
背景图:
白子图:
黑子图:
罗辑如下:设置20X15的棋盘用300个浮动的小盒子,当用户点击要下的盒子时,改变其背景图片,通过点击次数判定要下的黑子还是白子,从而实现下棋。通过js的点击事件,每下一子都进行全局判定,判定是否有人胜利。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
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) ;
}
</style>
<body>
<div class="a"></div>
</body>
<script>
//设置棋盘大小为20X10
var aa=document.querySelector('.a');
for(var i=0;i<600;i++){
var ab=document.createElement('div');
aa.append(ab);
i++;
}
var a=document.querySelector('div').children;
var j1=0;//判定点击次数
for(var i=0;i<a.length;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<0){
return 0;
}else{
return a[e].nam;
}
}
for(var j=0;j<a.length;j++ ){
if(x(j)==1&&x(j+1)==1&&x(j+2)==1&&x(j+3)==1&&x(j+4)==1){ 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);
}
}
</script>
</html>