棋盘界面十分简单，不怎么美观，主要实现一下功能。
五子棋界面
首先画20*20的棋盘（横竖都可以放20个棋子），全部可放400颗棋子，每个棋子都对应一个位置（x,y）,可以命名一个二维数组，需注意x为列，y为行；每个位置是一个小盒子，盒子有横竖两条线，可以用before和after伪类添加；
var arr=[];
var isBlackFirst=true;
var isGameOver=false;
//画棋盘
var element=document.getElementById("content");
//找到id为content的盒子，现在是个空盒子
for(var n=0;n<400;n++){ //这个棋盘可以下400个棋子
var y=Math.floor(n/20),x=n%20;
//每个棋子都对应一个位置（x,y）,可以命名一个二维数组
//需注意x为行，y为列；
arr[x]=[];
arr[x][y]=0;
//画棋盘网格
var child=document.createElement("div"); //每个棋子位置是一个小盒子，
//给小盒子添加样式，用伪元素before和after添加横竖线
child.className="small";
element.appendChild(child); //为大盒子添加小盒子
伪类添加网格线
棋盘
(function(child,n){
child.onclick=function(){
var y=Math.floor(n/20),x=n%20;
/判断游戏是否结束
if(isGameOver)return;//如果游戏结束就直接返回；
//判断点击位置是否已落子
//没有落子：arr[x][y]=0;落黑子：arr[x][y]=1;落白子：arr[x][y]=2;
if(arr[x][y]==1||arr[x][y]==2){
alert("不能重复落子");
return; //已落子直接返回；
}
//判断是否是黑子下，是加黑子，不是就加白子
if(isBlackFirst){
arr[x][y]=1;
child.className=child.className+" small-black";
}else{
arr[x][y]=2;
child.className=child.className+" small-white";
}
//用函数checkSuccess(x,y)判断是否赢了
if(checkSuccess(x,y)){
var str=isBlackFirst?"黑子赢":"白子赢";
//是黑子赢就弹窗黑子赢，不是就弹白子赢
alert(str);
isGameOver=true;
}
isBlackFirst=!isBlackFirst;//取反；如果是真就变成假；
}
})(child,n);
落子时需要考虑的几个问题：
1、游戏是否已经结束，如果游戏结束就直接返回；
2、点击位置是否已落子：没有落子：arr[x][y]=0;落黑子：arr[x][y]=1;落白子：arr[x][y]=2; 已落子直接返回；；
3、判断是否是黑子下，是加黑子，不是就加白子；通过增加类名添样式，需要注意层级的设置要比横竖线的层级高，才可以显示在最上面；
4、输赢判断：用函数checkSuccess(x,y)判断是否赢了；是黑子赢就弹窗黑子赢，不是就弹白子赢；若还没有赢，下一次落子的颜色与当前的相反，即 isBlackFirst=!isBlackFirst;取反；如果是真就变成假。
落子位置
不能重复落子
输赢的判断
共有四种情况： 横、竖、左斜、右斜
每落一次子都要判断当前颜色的棋子是否赢了（举个横向判断的例子）：
1、横向判断的时候，当前落的子记作左1右0，向左找没有找到边界，并且向左找到的颜色与自己相同，左边的棋子数加1；
2、找到边界或不是相同颜色就向右找，向右找没到边界，并且颜色一样，右边的棋子数加1，如果向右没有找到，则跳出循环；
3、如果向左找到的同颜色的棋子数加上向右找到的同颜色棋子数等于5，说明该颜色的棋子游戏赢了，直接返回游戏结果，后面的情况不用再判断 ；否则继续判断其他三种情况，原理相同。
function checkSuccess(x,y){
var isSuccess=false;
var cur_play=isBlackFirst?1:2;
//四种情况 横、竖、左斜、右斜
//一：判横；
var leftNum=1;
var rightNum=0;
var isLeft=true;
for(var n=1;n<=5;n++){
if(isLeft){ //向左找
if(x-n>=0&&arr[x-n][y]==cur_play){
//向左找没有找到边界，并且向左找到的颜色与自己相同；
leftNum++; //左边的棋子数加1
}else{ //否则向右找
isLeft=false;
}
}else{ //如果isLeft=false,就向右找
if(x+(n-leftNum)<=19&&arr[x+(n-leftNum)][y]==cur_play){
//向右找没到边界，并且颜色一样；
rightNum++; //右边的棋子数加1
}else{ //如果向右没有找到，跳出循环
break;
}
}
if(leftNum+rightNum==5){
//如果向左找到的棋子数加上向右找到的棋子数等于5，说明该颜色游戏赢了
isSuccess=true;
return isSuccess; //直接返回游戏结果，后面的情况不用再判断
}
}
//二：判竖(判断方法同上)；
var topNum=1;
var bottomNum=0;
var isTop=true;
for(var n=1;n<=5;n++){
if(isTop){
if(y-n>=0&&arr[x][y-n]==cur_play){
topNum++;
}else{
isTop=false;
}
}else{
if(y+(n-topNum)<=19&&arr[x][y+(n-topNum)]==cur_play){
bottomNum++;
}else{
break;
}
}
if(topNum+bottomNum==5){
isSuccess=true;
return isSuccess;
}
}
//三：判左斜(判断方法同上)；
var lTopNum=1;
var rBottomNum=0;
var islTop=true;
for(var n=1;n<=5;n++){
if(islTop){
if(x-n>=0&&y-n>=0&&arr[x-n][y-n]==cur_play){
lTopNum++;
}else{
islTop=false;
}
}else{
if(x+(n-lTopNum)<=19&&y+(n-lTopNum)<=19
&&arr[x+(n-lTopNum)][y+(n-lTopNum)]==cur_play){
rBottomNum++;
}else{
break;
}
}
if(lTopNum+rBottomNum==5){
isSuccess=true;
return isSuccess;
}
}
//四：判右斜(判断方法同上)；
var rTopNum=1;
var lBottomNum=0;
var isrTop=true;
for(var n=1;n<=5;n++){
if(isrTop){
if(x+n<=19&&y-n>=0&&arr[x+n][y-n]==cur_play){
rTopNum++;
}else{
isrTop=false;
}
}else{
if(x-(n-rTopNum)>=0&&y+(n-rTopNum)<=19
&&arr[x-(n-rTopNum)][y+(n-rTopNum)]==cur_play){
lBottomNum++;
}else{
break;
}
}
if(rTopNum+lBottomNum==5){
isSuccess=true;
return isSuccess;
}
}
}
外部css样式
body {
margin:50px;
text-align:center;
background-color:#92CEA4;
}
h1{
color: rgba(23, 22, 22, 0.57);
font-weight:bold;
line-height:30px;
font-size:20px;
font-family:Arial,times;
}
#content{
width:800px;
height:800px;
border:1px solid #000;
margin:10px auto;
padding:0;
text-align:left;
overflow: hidden;
}
.small{
width:40px;
height:40px;
border:0px solid #000;
float:left;
position:relative;
display:inline-block;
}
.small:before{
left:0;
position: absolute;
top:20px;
width:40px;
height:1px;
background:#000;
content:"";
z-index:-1;
}
.small:after{
position: absolute;
top:0px;
left:20px;
width:1px;
height:40px;
background:#000;
content:"";
z-index:-1;
}
.small:hover:after, .small:hover:before {
background-color: yellow;
}
.small-white{
border-radius:20px;
background:radial-gradient(10px 10px at 10px 10px,#fff,#e2e2e2);
box-shadow:2px 2px 4px rgba(0,0,0,0.3);
}
.small-black{
border-radius:20px;
background:radial-gradient(10px 10px at 10px 10px,#fff,#333);
box-shadow:2px 2px 4px rgba(0,0,0,0.4);
}
好了，可以开始游戏了。。。
