网页版JS游戏五子棋单机版也可以改版成网络版
2个文件，界面wuziqi.html 脚本wuziqi.js
新手可以去我下载中心下，
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>五子棋</title><style>* {padding: 0;margin: 0;}body{padding-top: 100px;}.main {width: 600px;height: 600px;margin: 0 auto;background-color: burlywood;}.col {position: relative;width: 40px;height: 40px;box-sizing: border-box;border: 1px solid #000;border-collapse: collapse;/*border-radius: 20px;*/}.row {position: relative;display: flex;height: 40px;/*background-color: brown;*/}.col-action {background-color: blue;}.col-actionA {/*background-color: white;*/}.col-actionB {/*background-color: black;*/}.col-actionA::before{content: "";position: absolute;width: 30px;height: 30px;background-color: white;border-radius: 99px;top:4.5px;left:4.5px;box-shadow: 0 0 2px rgba(0,0,0,0.5);}.col-actionB::before{content: "";width: 30px;height: 30px;background-color: black;border-radius: 99px;position: absolute;top:4.5px;left:4.5px;box-shadow: 0 0 2px rgba(128,128,128,0.5);}.hq{width: 600px;height: 600px;margin: 0 auto;}</style><script type="text/javascript" src="wuziqi.js" ></script></head><body><div class="main"><div class="qipan" id="qipan"></div><div>黑棋玩家：<input id="heiqi"/>。白棋玩家：<input id="baiqi"/>。<button onclick="setUserName()">开始</button></div><div id="username"></div><div class="hq"><button id="hq">悔棋</button></div></div></body></html>
var heiqi = "";var baiqi = "";function setUserName(){heiqi = document.getElementById("heiqi").value;baiqi = document.getElementById("baiqi").value;document.getElementById("username").innerHTML = "黑棋-"+heiqi +"。" +"白棋-"+baiqi;;}window.onload = function(){var busz = new Array();//div单击事件var ansj = function () {var jiaose = "黑棋-"+heiqi;const x = this.getAttribute("col");const y = this.getAttribute("row");// console.log(x, y, nowPlayer)if (nowPlayer) {qjck[this.getAttribute("row")][this.getAttribute("col")] = 1;this.classList.add("col-actionA");jiaose = "白棋-"+baiqi;nowPlayer = !nowPlayer;} else {qjck[this.getAttribute("row")][this.getAttribute("col")] = 2;this.classList.add("col-actionB");jiaose = "黑棋-"+heiqi;nowPlayer = !nowPlayer;}busz.push(this);var js = pdsl(y,x);if(js){setTimeout(function(){alert(jiaose+"胜利，游戏结束");location.reload(); //刷新浏览器},50);}this.onclick = null;}//判断是否结束var pdsl = function(x,y){var sx=1,zy=1,zs=1,ys=1,t=1;//上for(t=1;t<=5;t++){if(x-t < 0)break; console.log("上"+zy);if(qjck[x-t][y]==qjck[x][y] && qjck[x-t][y]!=0)sx++;elsebreak;}//下for(t=1;t<=5;t++){if(Number(x)+t >= 10)break;console.log("下"+zy);if(qjck[Number(x)+t][y]==qjck[Number(x)][y] && qjck[Number(x)+t][y]!=0)sx++;elsebreak;}//左for(t=1;t<=5;t++){if(y-t < 0)break; console.log("左"+zy);if(qjck[x][y-t]==qjck[x][y] && qjck[x][y-t]!=0)zy++;elsebreak;}//右for(t=1;t<=5;t++){if(Number(y)+t >= 10)break;console.log("右"+zy);if(qjck[x][Number(y)+t]==qjck[x][y] && qjck[x][Number(y)+t]!=0)zy++;elsebreak;}//上左for(t=1;t<=5;t++){if(x-t < 0)break; console.log("上左"+zy);if(qjck[x-t][y-t]==qjck[x][y] && qjck[x-t][y-t]!=0)zs++;elsebreak;} //下右for(t=1;t<=5;t++){if(Number(x)+t >= 10 || Number(y)+t >= 10)break; console.log("下右"+zy);if(qjck[Number(x)+t][Number(y)+t]==qjck[x][y] && qjck[Number(x)+t][Number(y)+t]!=0)zs++;elsebreak;}//上右for(t=1;t<=5;t++){if(x-t < 0 || Number(y)+t >= 10)break; console.log("上右"+zy);if(qjck[x-t][Number(y)+t]==qjck[x][y] && qjck[x-t][Number(y)+t]!=0)ys++;elsebreak;} //下左for(t=1;t<=5;t++){if(Number(x)+t >= 10 || y-t < 0)break; console.log("下右"+zy);if(qjck[Number(x)+t][y-t]==qjck[x][y] && qjck[Number(x)+t][y-t]!=0)ys++;elsebreak;}console.log(sx + " " + zy + " " + zs + " " + ys);if(sx == 5 || zy==5 || zs==5 || ys==5)return true;elsereturn false;}var nowPlayer = 0;//棋盘数组var qjck = Array();//divvar piece = document.createElement("div");piece.id = "piece";//得到divvar qipan = document.getElementById("qipan");//生成棋盘for (let r = 0; r < 15; r++) {let newrow = document.createElement("div");newrow.id = "row" + r;newrow.classList.add("row")let arrCol = Array()qjck.push(arrCol)for (let c = 0; c < 15; c++) {arrCol.push(0)let newcol = document.createElement("div");newcol.id = "col" + c;newcol.classList.add("col");newcol.setAttribute("row", r);newcol.setAttribute("col", c)newrow.appendChild(newcol)newcol.onclick = ansj;}// console.log(newrow)qipan.appendChild(newrow)}//悔棋var hq = document.getElementById("hq");hq.onclick = function(){if(busz.length <= 0)return;var divt = busz.pop();divt.onclick = ansj;divt.classList.remove("col-actionA");divt.classList.remove("col-actionB");qjck[divt.getAttribute("row")][divt.getAttribute("col")] = 0;nowPlayer = !nowPlayer;// console.log(qjck);console.log(divt);}}
