共计 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、手动:未标有自动发货的的商品,拍下后,卖家会收到邮件、短信提醒,也可通过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、非平台线上交易的项目,出现任何后果均与站保站无关;无论卖家以何理由要求线下交易的,请联系管理举报。
信息加载中,请等待
微信客服(速回)
微信客服(慢回)