五子棋 源码
Posted 流星蝴蝶没有剑
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了五子棋 源码相关的知识，希望对你有一定的参考价值。
JS 五子棋 带成绩排名
自己看着重新写吧，下面代码只是一个思路，也有bug。。。
1. 源码
html
<div class="row">
<h3 id="result-wrap" style="color: red;"><img src="http://wx0725.top/image/black_qizi.png" alt=""></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>
</div>
javascript
代码中有注释啊啊啊
var fail_text = '👏，计算机赢了，继续加油哦！';
var win_text = '恭喜，你赢了！😱';
var back_text = '只能撤销一步哦😂';
var winner = ""; // 假设胜利者是计算机
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");
document.getElementById("restart").onclick = function()
window.location.reload();
function save_chess() // 发送棋谱截图
// 截图发送
var chessSrc = chess.toDataURL("image/png");
var data =
function: "gobangSave",
base64: chessSrc,
city: address, // 地址和IP自己找，不需要可以去掉，记得后台代码做对应的修改，可以使用时间戳命名保存的图片名称
ip: ip,
;
$.ajax( // 提交截图
url: "gobangSave.php", // 填写后台php的链接
type: "post",
data: data,
async: true,
success: function(e)
,
error: function(e)
)
function win_f() // 我赢了
resultTxt.innerHTML = win_text;
over = true;
var me_com = [0, 0, 0]; // 地图中 默认、我、计算机 分别占位的个数
for (var i = 0; i < 15; i++)
for (var j = 0; j < 15; j++)
me_com[chressBord[i][j]]++;
if (me_com[1] != me_com[2] + 1)
setTimeout(function()
alert("下棋成绩异常，如有问题请联系管理员或留言");
, 500);
return;
winner = "me";
setTimeout(function()
alert(win_text + " 您可以选择【重新开始】继续游戏！");
, 1000)
function fail_f() // 计算机赢了
resultTxt.innerHTML = fail_text;
over = true;
winner = "computer";
setTimeout(function()
alert(fail_text + " 您可以选择【重新开始】继续游戏！");
, 1000)
function able_back() // 允许悔棋
backAble = true;
backbtn.className = backbtn.className.replace(new RegExp("(\\\\s|^)unable(\\\\s|$)"), " ");
function unable_back() // 不允许悔棋
backAble = false;
var hasClass = new RegExp('unable').test(' ' + backbtn.className + ' ');
if (!hasClass)
backbtn.className += ' ' + 'unable';
function able_return() // 允许撤销悔棋
returnAble = true;
returnbtn.className = returnbtn.className.replace(new RegExp("(\\\\s|^)unable(\\\\s|$)"), " ");
function unable_return() // 不允许撤销悔棋
returnAble = false;
var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');
if (!hasClass)
returnbtn.className += ' ' + 'unable';
// 我，下棋
chess.onclick = function(e)
if (over)
return;
if (!me)
return;
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
if (chressBord[i][j] == 0)
_nowi = i; // 源码中的BUG，这两行更新现在的位置需要放在if中，否则会在撤销的时候出现问题
_nowj = j;
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)
win_f();
if (!over) // 没结束计算机下棋
me = !me;
computerAI();
else
if (winner == "me")
unable_back();
save_chess();
// 悔棋
backbtn.onclick = function(e)
if (!backAble)
return;
over = false;
me = true;
// 我，悔棋
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]--;
// 源代码中的BUG **** _myWin[k]中 i 改为 k
myWin[k] = _myWin[k]; //这个位置对方可能赢
resultTxt.innerHTML = back_text;
able_return(); // 允许撤销悔棋
unable_back(); // 不允许悔棋
// 撤销悔棋
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; //这个位置对方不可能赢
// 计算机撤销相应的悔棋
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; //这个位置对方不可能赢
able_back(); // 允许悔棋
unable_return(); // 不允许撤销悔棋
// 计算机下棋
var computerAI = function()
var myScore = [];
var computerScore = [];
var max = 0;
var u = 0,
v = 0;
for (以上是关于五子棋 源码的主要内容，如果未能解决你的问题，请参考以下文章