直接随意粘贴到一个.html 文件中即可
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title> 五子棋 </title> | |
| <style type='text/css'> | |
| canvas { | |
| display: block; | |
| margin: 50px auto; | |
| box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9; | |
| cursor: pointer; | |
| } | |
| .btn-wrap { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content:center; | |
| } | |
| .btn-wrap div {margin: 0 10px;} | |
| div>span { | |
| display: inline-block; | |
| padding: 10px 20px; | |
| color: #fff; | |
| background-color: #EE82EE; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| div.unable span { | |
| background: #D6D6D4; | |
| color: #adacaa; | |
| } | |
| #result-wrap {text-align: center;} | |
| </style> | |
| </head> | |
| <body> | |
| <h3 id="result-wrap">--AI 五子棋 --</h3> | |
| <canvas id="chess" width="450px" height="450px"></canvas> | |
| <div class="btn-wrap"> | |
| <div id='restart' class="restart"> | |
| <span> 重新开始 </span> | |
| </div> | |
| <div id='goback' class="goback unable"> | |
| <span> 悔棋 </span> | |
| </div> | |
| <div id='return' class="return unable"> | |
| <span> 撤销悔棋 </span> | |
| </div> | |
| </div> | |
| <script type="text/javascript" charset="utf-8"> | |
| var over = false; | |
| var me = true; // 我 | |
| var _nowi = 0, _nowj = 0; // 记录自己下棋的坐标 | |
| var _compi = 0, _compj = 0; // 记录计算机当前下棋的坐标 | |
| var _myWin = [], _compWin = []; // 记录我，计算机赢的情况 | |
| var backAble = false, returnAble = false; | |
| var resultTxt = document.getElementById('result-wrap'); | |
| var chressBord = [];// 棋盘 | |
| for(var i = 0; i < 15; i++){chressBord[i] = []; | |
| for(var j = 0; j < 15; j++){chressBord[i][j] = 0; | |
| } | |
| } | |
| // 赢法的统计数组 | |
| var myWin = []; | |
| var computerWin = []; | |
| // 赢法数组 | |
| var wins = []; | |
| for(var i = 0; i < 15; i++){wins[i] = []; | |
| for(var j = 0; j < 15; j++){wins[i][j] = [];} | |
| } | |
| var count = 0; // 赢法总数 | |
| // 横线赢法 | |
| for(var i = 0; i < 15; i++){for(var j = 0; j < 11; j++){for(var k = 0; k < 5; k++){wins[i][j+k][count] = true; | |
| } | |
| count++; | |
| } | |
| } | |
| // 竖线赢法 | |
| for(var i = 0; i < 15; i++){for(var j = 0; j < 11; j++){for(var k = 0; k < 5; k++){wins[j+k][i][count] = true; | |
| } | |
| count++; | |
| } | |
| } | |
| // 正斜线赢法 | |
| for(var i = 0; i < 11; i++){for(var j = 0; j < 11; j++){for(var k = 0; k < 5; k++){wins[i+k][j+k][count] = true; | |
| } | |
| count++; | |
| } | |
| } | |
| // 反斜线赢法 | |
| for(var i = 0; i < 11; i++){for(var j = 14; j > 3; j--){for(var k = 0; k < 5; k++){wins[i+k][j-k][count] = true; | |
| } | |
| count++; | |
| } | |
| } | |
| // debugger; | |
| for(var i = 0; i < count; i++){myWin[i] = 0; | |
| _myWin[i] = 0; | |
| computerWin[i] = 0; | |
| _compWin[i] = 0; | |
| } | |
| var chess = document.getElementById("chess"); | |
| var context = chess.getContext('2d'); | |
| context.strokeStyle = '#bfbfbf'; // 边框颜色 | |
| var backbtn = document.getElementById("goback"); | |
| var returnbtn = document.getElementById("return"); | |
| window.onload = function(){drawChessBoard(); // 画棋盘 | |
| } | |
| document.getElementById("restart").onclick = function(){window.location.reload(); | |
| } | |
| // 我，下棋 | |
| chess.onclick = function(e){if(over){return;} | |
| if(!me){return;} | |
| // 悔棋功能可用 | |
| backbtn.className = backbtn.className.replace(new RegExp( "(\\s|^)unable(\\s|$)" )," " ); | |
| var x = e.offsetX; | |
| var y = e.offsetY; | |
| var i = Math.floor(x / 30); | |
| var j = Math.floor(y / 30); | |
| _nowi = i; | |
| _nowj = j; | |
| if(chressBord[i][j] == 0){oneStep(i,j,me); | |
| chressBord[i][j] = 1; // 我，已占位置 | |
| for(var k = 0; k < count; k++){ // 将可能赢的情况都加 1 | |
| if(wins[i][j][k]){ | |
| // debugger; | |
| myWin[k]++; | |
| _compWin[k] = computerWin[k]; | |
| computerWin[k] = 6;// 这个位置对方不可能赢了 | |
| if(myWin[k] == 5){// window.alert('你赢了'); | |
| resultTxt.innerHTML = '恭喜，你赢了！'; | |
| over = true; | |
| } | |
| } | |
| } | |
| if(!over){ | |
| me = !me; | |
| computerAI();} | |
| } | |
| } | |
| // 悔棋 | |
| backbtn.onclick = function(e){if(!backAble) {return;} | |
| over = false; | |
| me = true; | |
| // resultTxt.innerHTML = 'o(╯□╰)o，悔棋中'; | |
| // 撤销悔棋功能可用 | |
| returnbtn.className = returnbtn.className.replace(new RegExp( "(\\s|^)unable(\\s|$)" )," " ); | |
| // 我，悔棋 | |
| chressBord[_nowi][_nowj] = 0; // 我，已占位置 还原 | |
| minusStep(_nowi, _nowj); // 销毁棋子 | |
| for(var k = 0; k < count; k++){ // 将可能赢的情况都减 1 | |
| if(wins[_nowi][_nowj][k]){myWin[k]--; | |
| computerWin[k] = _compWin[k];// 这个位置对方可能赢 | |
| } | |
| } | |
| // 计算机相应的悔棋 | |
| chressBord[_compi][_compj] = 0; // 计算机，已占位置 还原 | |
| minusStep(_compi, _compj); // 销毁棋子 | |
| for(var k = 0; k < count; k++){ // 将可能赢的情况都减 1 | |
| if(wins[_compi][_compj][k]){computerWin[k]--; | |
| myWin[k] = _myWin[i];// 这个位置对方可能赢 | |
| } | |
| } | |
| resultTxt.innerHTML = '-- 益智五子棋 --'; | |
| returnAble = true; | |
| backAble = false; | |
| } | |
| // 撤销悔棋 | |
| returnbtn.onclick = function(e){if(!returnAble) {return;} | |
| // 我，撤销悔棋 | |
| chressBord[_nowi][_nowj] = 1; // 我，已占位置 | |
| oneStep(_nowi,_nowj,me); | |
| for(var k = 0; k < count; k++){if(wins[_nowi][_nowj][k]){myWin[k]++; | |
| _compWin[k] = computerWin[k]; | |
| computerWin[k] = 6;// 这个位置对方不可能赢 | |
| } | |
| if(myWin[k] == 5){ | |
| resultTxt.innerHTML = '恭喜，你赢了！'; | |
| over = true; | |
| } | |
| } | |
| // 计算机撤销相应的悔棋 | |
| chressBord[_compi][_compj] = 2; // 计算机，已占位置 | |
| oneStep(_compi,_compj,false); | |
| for(var k = 0; k < count; k++){ // 将可能赢的情况都减 1 | |
| if(wins[_compi][_compj][k]){computerWin[k]++; | |
| _myWin[k] = myWin[k]; | |
| myWin[k] = 6;// 这个位置对方不可能赢 | |
| } | |
| if(computerWin[k] == 5){resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！'; | |
| over = true; | |
| } | |
| } | |
| returnbtn.className += ''+'unable'; | |
| returnAble = false; | |
| backAble = true; | |
| } | |
| // 计算机下棋 | |
| var computerAI = function (){var myScore = []; | |
| var computerScore = []; | |
| var max = 0; | |
| var u = 0, v = 0; | |
| for(var i = 0; i < 15; i++){myScore[i] = []; | |
| computerScore[i] = []; | |
| for(var j = 0; j < 15; j++){myScore[i][j] = 0; | |
| computerScore[i][j] = 0; | |
| } | |
| } | |
| for(var i = 0; i < 15; i++){for(var j = 0; j < 15; j++){if(chressBord[i][j] == 0){for(var k = 0; k < count; k++){if(wins[i][j][k]){if(myWin[k] == 1){myScore[i][j] += 200; | |
| }else if(myWin[k] == 2){myScore[i][j] += 400; | |
| }else if(myWin[k] == 3){myScore[i][j] += 2000; | |
| }else if(myWin[k] == 4){myScore[i][j] += 10000; | |
| } | |
| if(computerWin[k] == 1){computerScore[i][j] += 220; | |
| }else if(computerWin[k] == 2){computerScore[i][j] += 420; | |
| }else if(computerWin[k] == 3){computerScore[i][j] += 2100; | |
| }else if(computerWin[k] == 4){computerScore[i][j] += 20000; | |
| } | |
| } | |
| } | |
| if(myScore[i][j] > max){max = myScore[i][j]; | |
| u = i; | |
| v = j; | |
| }else if(myScore[i][j] == max){if(computerScore[i][j] > computerScore[u][v]){ | |
| u = i; | |
| v = j; | |
| } | |
| } | |
| if(computerScore[i][j] > max){max = computerScore[i][j]; | |
| u = i; | |
| v = j; | |
| }else if(computerScore[i][j] == max){if(myScore[i][j] > myScore[u][v]){ | |
| u = i; | |
| v = j; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| _compi = u; | |
| _compj = v; | |
| oneStep(u,v,false); | |
| chressBord[u][v] = 2; // 计算机占据位置 | |
| for(var k = 0; k < count; k++){if(wins[u][v][k]){computerWin[k]++; | |
| _myWin[k] = myWin[k]; | |
| myWin[k] = 6;// 这个位置对方不可能赢了 | |
| if(computerWin[k] == 5){resultTxt.innerHTML = 'o(╯□╰)o，计算机赢了，继续加油哦！'; | |
| over = true; | |
| } | |
| } | |
| } | |
| if(!over){me = !me;} | |
| backAble = true; | |
| returnAble = false; | |
| var hasClass = new RegExp('unable').test('' + returnbtn.className +' '); | |
| if(!hasClass) {returnbtn.className += '' +'unable';} | |
| } | |
| // 绘画棋盘 | |
| var drawChessBoard = function() {for(var i = 0; i < 15; i++){context.moveTo(15 + i * 30 , 15); | |
| context.lineTo(15 + i * 30 , 435); | |
| context.stroke(); | |
| context.moveTo(15 , 15 + i * 30); | |
| context.lineTo(435 , 15 + i * 30); | |
| context.stroke();} | |
| } | |
| // 画棋子 | |
| var oneStep = function(i,j,me) {context.beginPath(); | |
| context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 画圆 | |
| context.closePath(); | |
| // 渐变 | |
| var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0); | |
| if(me){gradient.addColorStop(0,'#0a0a0a'); | |
| gradient.addColorStop(1,'#636766'); | |
| }else{gradient.addColorStop(0,'#d1d1d1'); | |
| gradient.addColorStop(1,'#f9f9f9'); | |
| } | |
| context.fillStyle = gradient; | |
| context.fill();} | |
| // 销毁棋子 | |
| var minusStep = function(i,j) { | |
| // 擦除该圆 | |
| context.clearRect((i) * 30, (j) * 30, 30, 30); | |
| // 重画该圆周围的格子 | |
| context.beginPath(); | |
| context.moveTo(15+i*30 , j*30); | |
| context.lineTo(15+i*30 , j*30 + 30); | |
| context.moveTo(i*30, j*30+15); | |
| context.lineTo((i+1)*30 , j*30+15); | |
| context.stroke();} | |
| </script> | |
| </body> | |
| </html> |
交易流程
发货方式
1、自动：在上方保障服务中标有自动发货的商品，拍下后，将会自动收到来自卖家的商品获取（下载）链接；
2、手动：未标有自动发货的的商品，拍下后，卖家会收到邮件、短信提醒，也可通过QQ或订单中的电话联系对方。
交易周期
1、源码默认交易周期：自动发货商品为1天，手动发货商品为3天，买家有1次额外延长3天交易周期的权利；
2、若上述交易周期双方依然无法完成交易，任意一方可发起追加周期（1~60天）的请求，对方同意即可延长。
退款说明
1、描述：源码描述(含标题)与实际源码不一致的（例：描述PHP实际为ASP、描述的功能实际缺少、版本不符等）；
2、演示：有演示站时，与实际源码小于95%一致的（但描述中有"不保证完全一样、有变化的可能性"类似显著声明的除外）；
3、发货：手动发货源码，在卖家未发货前，已申请退款的；
4、安装：免费提供安装服务的源码但卖家不履行的；
5、收费：额外收取其他费用的（但描述中有显著声明或双方交易前有商定的除外）；
6、其他：如质量方面的硬性常规问题等。
注：经核实符合上述任一，均支持退款，但卖家予以积极解决问题则除外。
注意事项
1、站保站会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全！
2、站保站无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别；
3、在源码同时有网站演示与图片演示，且站演与图演不一致时，默认按图演作为纠纷评判依据（特别声明或有商定除外）；
4、在没有"无任何正当退款依据"的前提下，商品写有"一旦售出，概不支持退款"等类似的声明，视为无效声明；
5、在未拍下前，双方在QQ上所商定的交易内容，亦可成为纠纷评判依据（商定与描述冲突时，商定为准）；
6、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在站保站上所留的QQ、手机号沟通，以防对方不承认自我承诺。
7、虽然交易产生纠纷的几率很小，但一定要保留如聊天记录、手机短信等这样的重要信息，以防产生纠纷时便于站保站介入快速处理。
站保站声明
1、站保站作为第三方中介平台，依据交易合同（商品描述、交易前商定的内容）来保障交易的安全及买卖双方的权益；
2、非平台线上交易的项目，出现任何后果均与站保站无关；无论卖家以何理由要求线下交易的，请联系管理举报。
信息加载中,请等待
微信客服(速回)
微信客服(慢回)
客服咨询
营业执照
鲁公网安备：37068702000078号