棋盤界面十分簡單，不怎么美觀，主要實現一下功能。
五子棋界面
首先畫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);
}
好了，可以開始游戲了。。。
