五子棋游戏是一款大家耳熟能详的益智类游戏，本文给大家讲解使用js编写一款属于自己的五子棋的思路及代码，并在最后附上代码
工具/原料
js
方法/步骤
1、初始化棋盘：使用js画出一个20*20的棋盘。
2、完成玩家落子逻辑：给棋盘的坡庥汩赴每个单元格td添加一个点击事件，传入参数为自己的id，轮到玩家一落子的时候，将其点击的单元格的值设置为O，轮到玩家二落子的时候，将其点击的单元格设置为X
3、落子重复检测：将已经落子的id信息存入到一个数组ids，每次落子前，检验落子的位置在ids是否已经存在，存在则说明该单元格已经落子，提示玩家。
4、横路输赢逻辑判断：遍历所有水平线上连在一起的五个单元格信息，若全为O表示玩家一获胜，若全为X表示玩家二获胜，并将获胜信息写入div
5、纵路及斜线上的输赢逻辑判断：属于留给大家自己的功课，根据已有的代码，加入对应的输赢逻辑并不是困难的事。
6、全部代码：<丝群闻栝html><head><title>game</title&爿讥旌护gt;</head><body><divid="table_content"style="width:550px;margin:0auto;"></div></body><scripttype="text/javascript"> vardiv1=document.getElementById("table_content"); varcode='<tableborder=\"1px\"'+ 'style=\"border-collapse:collapse;\">'; vari,j; for(i=0;i<20;i++) { code+="<tr>" for(j=0;j<20;j++) { varid=i*20+j; code+="<tdwidth=\"20px\"height=\"20px\"id=\"" +id+"\"onclick='clickBorder("+id+");'>"; code+="</td>"; } code+="</tr>" } code+="</table>"; div1.innerHTML=code; varwhich=0; varids=newArray(); functionclickBorder(id) { if(which==0) { for(vari=0;i<ids.length;i++) { if(ids[i]==id){ alert("该单元格已经落子，请勿重复落子！"); return; } } document.getElementById(id).innerHTML='O'; ids.push(id); which=1; }elseif(which==1) { for(vari=0;i<ids.length;i++) { if(ids[i]==id){ alert("该单元格已经落子，请勿重复落子！"); return; } } document.getElementById(id).innerHTML='X'; ids.push(id); which=0; } varwin=isWin(); if(win==-1) { document.getElementById("table_content").innerHTML+="玩家一获胜"; return; }elseif(win==1){ document.getElementById("table_content").innerHTML+="玩家二获胜"; return; } } functionisWin(){ for(vari=0;i<20;i++){ for(varj=0;j<=15;j++){ if(document.getElementById(i*20+j).innerHTML=='O' &&document.getElementById(i*20+j+1).innerHTML=='O' &&document.getElementById(i*20+j+2).innerHTML=='O' &&document.getElementById(i*20+j+3).innerHTML=='O' &&document.getElementById(i*20+j+4).innerHTML=='O'){ return-1; }elseif(document.getElementById(i*20+j).innerHTML=='X' &&document.getElementById(i*20+j+1).innerHTML=='X' &&document.getElementById(i*20+j+2).innerHTML=='X' &&document.getElementById(i*20+j+3).innerHTML=='X' &&document.getElementById(i*20+j+4).innerHTML=='X'){ return1; } } } return0; }</script></html>