棋盤界面十分簡單慕嚷，不怎么美觀监嗜，主要實(shí)現(xiàn)一下功能。
五子棋界面
首先畫20*20的棋盤（橫豎都可以放20個(gè)棋子）惩歉，全部可放400顆棋子等脂，每個(gè)棋子都對應(yīng)一個(gè)位置（x,y）,可以命名一個(gè)二維數(shù)組俏蛮，需注意x為列，y為行上遥；每個(gè)位置是一個(gè)小盒子搏屑，盒子有橫豎兩條線，可以用before和after偽類添加粉楚；
var arr=[];
var isBlackFirst=true;
var isGameOver=false;
//畫棋盤
var element=document.getElementById("content");
//找到id為content的盒子辣恋，現(xiàn)在是個(gè)空盒子
for(var n=0;n<400;n++){ //這個(gè)棋盤可以下400個(gè)棋子
var y=Math.floor(n/20),x=n%20;
//每個(gè)棋子都對應(yīng)一個(gè)位置（x,y）,可以命名一個(gè)二維數(shù)組
//需注意x為行，y為列模软；
arr[x]=[];
arr[x][y]=0;
//畫棋盤網(wǎng)格
var child=document.createElement("div"); //每個(gè)棋子位置是一個(gè)小盒子伟骨，
//給小盒子添加樣式，用偽元素before和after添加橫豎線
child.className="small";
element.appendChild(child); //為大盒子添加小盒子
偽類添加網(wǎng)格線
棋盤
(function(child,n){
child.onclick=function(){
var y=Math.floor(n/20),x=n%20;
/判斷游戲是否結(jié)束
if(isGameOver)return;//如果游戲結(jié)束就直接返回燃异；
//判斷點(diǎn)擊位置是否已落子
//沒有落子：arr[x][y]=0;落黑子：arr[x][y]=1;落白子：arr[x][y]=2;
if(arr[x][y]==1||arr[x][y]==2){
alert("不能重復(fù)落子");
return; //已落子直接返回底靠；
}
//判斷是否是黑子下，是加黑子特铝，不是就加白子
if(isBlackFirst){
arr[x][y]=1;
child.className=child.className+" small-black";
}else{
arr[x][y]=2;
child.className=child.className+" small-white";
}
//用函數(shù)checkSuccess(x,y)判斷是否贏了
if(checkSuccess(x,y)){
var str=isBlackFirst?"黑子贏":"白子贏";
//是黑子贏就彈窗黑子贏暑中，不是就彈白子贏
alert(str);
isGameOver=true;
}
isBlackFirst=!isBlackFirst;//取反；如果是真就變成假鲫剿；
}
})(child,n);
落子時(shí)需要考慮的幾個(gè)問題：
1鳄逾、游戲是否已經(jīng)結(jié)束，如果游戲結(jié)束就直接返回灵莲；
2雕凹、點(diǎn)擊位置是否已落子：沒有落子：arr[x][y]=0;落黑子：arr[x][y]=1;落白子：arr[x][y]=2; 已落子直接返回；政冻；
3枚抵、判斷是否是黑子下，是加黑子明场，不是就加白子汽摹；通過增加類名添樣式，需要注意層級的設(shè)置要比橫豎線的層級高苦锨，才可以顯示在最上面逼泣；
4、輸贏判斷：用函數(shù)checkSuccess(x,y)判斷是否贏了舟舒；是黑子贏就彈窗黑子贏拉庶，不是就彈白子贏；若還沒有贏秃励，下一次落子的顏色與當(dāng)前的相反氏仗，即 isBlackFirst=!isBlackFirst;取反；如果是真就變成假夺鲜。
落子位置
不能重復(fù)落子
輸贏的判斷
共有四種情況： 橫皆尔、豎帚稠、左斜、右斜
每落一次子都要判斷當(dāng)前顏色的棋子是否贏了（舉個(gè)橫向判斷的例子）：
1床佳、橫向判斷的時(shí)候滋早，當(dāng)前落的子記作左1右0，向左找沒有找到邊界砌们，并且向左找到的顏色與自己相同杆麸，左邊的棋子數(shù)加1；
2浪感、找到邊界或不是相同顏色就向右找昔头，向右找沒到邊界，并且顏色一樣影兽，右邊的棋子數(shù)加1揭斧，如果向右沒有找到，則跳出循環(huán)峻堰；
3讹开、如果向左找到的同顏色的棋子數(shù)加上向右找到的同顏色棋子數(shù)等于5，說明該顏色的棋子游戲贏了捐名，直接返回游戲結(jié)果旦万，后面的情況不用再判斷 ；否則繼續(xù)判斷其他三種情況镶蹋，原理相同成艘。
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++; //左邊的棋子數(shù)加1
}else{ //否則向右找
isLeft=false;
}
}else{ //如果isLeft=false,就向右找
if(x+(n-leftNum)<=19&&arr[x+(n-leftNum)][y]==cur_play){
//向右找沒到邊界，并且顏色一樣踱葛；
rightNum++; //右邊的棋子數(shù)加1
}else{ //如果向右沒有找到丹莲，跳出循環(huán)
break;
}
}
if(leftNum+rightNum==5){
//如果向左找到的棋子數(shù)加上向右找到的棋子數(shù)等于5，說明該顏色游戲贏了
isSuccess=true;
return isSuccess; //直接返回游戲結(jié)果尸诽，后面的情況不用再判斷
}
}
//二：判豎(判斷方法同上)；
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);
}
好了，可以開始游戲了鸳惯。商蕴。叠萍。
