在线五子棋双人游戏代码(HTML5双人五子棋小游戏js代码)

时间：2023-03-20 16:49:12 来源：网络发布：手游网浏览：7次

五子棋代码

源码内容如下：

<!DOCTYPEhtml><html><head><title>HTML5双人五子棋小游戏源码-上兔网</title><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><style>html,body,section,div,p{padding:0;margin:0;font-size:12px;}body{width:100%;height:100%;position:fixed;}#chessboard{width:90vmin;min-height:89vmin;margin:calc(50vh-46vmin+2px)auto;background:#f5ca69;border:2pxsolid#000;border-radius:7px;-webkit-box-shadow:.1rem.1rem.05remrgba(0,0,0,.5),-.1rem-.1rem.05remrgba(0,0,0,.5);box-shadow:.1rem.1rem.05remrgba(0,0,0,.5),-.1rem-.1rem.05remrgba(0,0,0,.5);}#chessboard::after{content:"";display:block;height:0;clear:both;visibility:hidden;}#chessboarddiv{width:calc(9vmin-2px);height:calc(9vmin-2px);float:left;border:1pxsolid#000;border-radius:5px;}#chessboarddivp{width:97%;height:97%;margin:1.5%auto;border-radius:100%;}.white{background:-webkit-radial-gradient(at35%35%,#FFF,#CCC,#FFF);background:-o-radial-gradient(at35%35%,#FFF,#CCC,#FFF);background:-moz-radial-gradient(at35%35%,#FFF,#CCC,#FFF);background:radial-gradient(at35%35%,#FFF,#CCC,#FFF);box-shadow:.1rem.1rem.05remrgba(0,0,0,.5);}.black{background:-webkit-radial-gradient(at30%30%,#999-13%,#00035%,#999200%);background:-o-radial-gradient(at30%30%,#999-13%,#00035%,#999200%);background:-moz-radial-gradient(at30%30%,#999-13%,#00035%,#999200%);background:radial-gradient(at30%30%,#999-13%,#00035%,#999200%);box-shadow:.1rem.1rem.05remrgba(0,0,0,.5);}#mask{width:100%;height:100vh;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.7);}.conBox{display:block;width:300px;height:200px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;background-color:#fff;border-radius:3px;box-shadow:.1rem.1rem.05remrgba(0,0,0,.5);}.conBoxh1{width:100%;float:left;margin:0;line-height:45px;text-align:center;}.conBoxp{display:block;width:40px;height:40px;float:left;margin-top:40px;font-size:32px;text-align:center;line-height:40px;cursor:pointer;}.conBoxp:nth-child(2){margin-left:60px;}.conBoxp:nth-child(3){width:100px;font-size:20px;cursor:initial;}.conBoxbutton{width:80px;float:left;margin-top:30px;margin-left:110px;color:#fff;font-size:14px;text-align:center;line-height:28px;background-color:#f60;border:none;outline:none;}.clear::after{content:"";display:block;height:0;clear:both;visibility:hidden;}.border,.borderTop,.borderBot{position:relative;}.border:after{content:"";width:200%;height:200%;position:absolute;top:0;left:0;border:1pxsolidrgba(0,0,0,0.2);-webkit-transform:scale(0.5);transform:scale(0.5);-webkit-transform-origin:00;transform-origin:00;box-sizing:border-box;}.borderBot:after{content:"";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1pxsolidrgba(0,0,0,0.2);-webkit-transform-origin:0100%;transform-origin:0100%;-webkit-transform:scaleY(0.5);transform:scaleY(0.5);}.borderTop:before{content:"";position:absolute;left:0;top:0;right:0;height:1px;border-top:1pxsolidrgba(0,0,0,0.2);-webkit-transform-origin:00;transform-origin:00;-webkit-transform:scaleY(0.5);transform:scaleY(0.5);}</style><script>window.onload=function(){vargrid;varchessArr=[];vartimer=0;varlineNum=parseInt(gridNum.innerHTML);varbox=document.getElementById('chessboard');varchessBox=box.getElementsByTagName('div');varsubmitBtn=document.getElementById('submitBtn');subBtn.onclick=function(){if(lineNum>8){lineNum--;}gridNum.innerHTML=lineNum;}addBtn.onclick=function(){if(lineNum<14){lineNum++;}gridNum.innerHTML=lineNum;}//棋盘初始化submitBtn.onclick=function(){varchessMaxNum=lineNum*lineNum;varchessWH=90/lineNum;for(vari=0;i<chessMaxNum;i++){grid=document.createElement('div');grid.style.width='calc('+chessWH+'vmin-2px)';grid.style.height='calc('+chessWH+'vmin-2px)';grid.id=i;box.appendChild(grid);chessArr[i]=0;grid.onclick=function(x){varindex=x.target.id||x.target.parentNode.id;returnplayChess(index);};};mask.style.display='none';}//棋子对象functionChess(){this.color='white';this.site=0;this.chessDom=function(){vardom=document.createElement('p');dom.setAttribute('class',this.color);returndom;}this.ligature=function(arr){varwhiteChess=arr.map(function(s){return(s.color=='white')?parseInt(s.site):0;});varblackChess=arr.map(function(s){return(s.color=='black')?parseInt(s.site):0;});judge(whiteChess,'白子');judge(blackChess,'黑子');functionjudge(che,color){for(vari=0;i<che.length;i++){varx=che[i]%lineNum;vary=parseInt(che[i]/lineNum);if(x<=lineNum-5&&y<=lineNum-5&&che[i]!=0){if(che[i+1*lineNum+1]!=0&&che[i+2*lineNum+2]!=0&&che[i+3*lineNum+3]!=0&&che[i+4*lineNum+4]!=0){alert(color+'获胜!');location.replace(location);returntrue;}};if(y<=lineNum-5&&che[i]!=0){if(che[i+1*lineNum]!=0&&che[i+2*lineNum]!=0&&che[i+3*lineNum]!=0&&che[i+4*lineNum]!=0){alert(color+'获胜!');location.replace(location);returntrue;}};if(x>=4&&y<=lineNum-5&&che[i]!=0){if(che[i+1*lineNum-1]!=0&&che[i+2*lineNum-2]!=0&&che[i+3*lineNum-3]!=0&&che[i+4*lineNum-4]!=0){alert(color+'获胜!');location.replace(location);returntrue;}};if(x<=lineNum-5&&che[i]!=0){if(che[i+1]!=0&&che[i+2]!=0&&che[i+3]!=0&&che[i+4]!=0){alert(color+'获胜!');location.replace(location);returntrue;}};};}}}functionplayChess(i){if(chessArr[i]==0){timer++;chessArr[i]=newChess();timer%2==0?chessArr[i].color='black':chessArr[i].color='white';chessArr[i].site=i;chessBox[i].appendChild(chessArr[i].chessDom());chessArr[i].ligature(chessArr);}else{alert('此处有子!');}}};</script></head><body><sectionid="chessboard"class="clear"></section><sectionid="mask"><asideclass="conBox"><h1class="borderBot">请选择棋盘规格！</h1><pid="subBtn"class="border">-</p><pid="gridNum"value="10"class="borderTopborderBot">10</p><pid="addBtn"class="border">+</p><buttonid="submitBtn">确认</button></aside></section></body></html>