教热门-官方 
共计 6257 个字符，预计需要花费 16 分钟才能阅读完成。
效果图：
代码：
直接随意粘贴到一个.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. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！
教热门 » 一分钟自己搭建一个AI五子棋
