小游戏【益智五子棋】
前言
五子棋又名五子连珠棋，是一项有趣、益智的棋类游戏，世界上已有几十个国家开展此项活动。世界五子棋锦标赛已举办过几届，并进入世界智力体育奥林匹克比赛，它的影响越来越大。五子连珠棋易学难精，但妙趣横生。下一局棋所费时间不多，茶余饭后“杀上一盘”，开发智力，勤于动脑，调剂感情,居家必备。 我设计的益智五子棋游戏是在网址稀土掘金 (juejin.cn)中“写代码”中编写的，此网址中“写代码”是JavaScript 开发的，使用起来方便易操作。 我的游戏地址如下：
游戏规则
五子连珠棋传统五子棋的棋具与围棋大致相同，棋子分为黑白两色，棋盘为15x15、棋子放置于棋盘线交叉点上。两人对局，各执一色，轮流下一子、先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜(正规比赛中黑棋只能连成5个。6-9个一排算禁手，另外黑棋还有33和44禁手。黑棋禁手判负。白棋没有限制)。
布局
1、画棋盘
ini复制代码
var chressBord = [];//棋盘
for(var i = 0; i < 15; i++){
chressBord[i] = [];
for(var j = 0; j < 15; j++){
chressBord[i][j] = 0;
}
}
//绘画棋盘
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();
}
}
}
2、画棋子
scss复制代码
//画棋子
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();
}
ini复制代码
//赢法的统计数组
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;
}
3、悔棋
ini复制代码
// 悔棋
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;
};
下五子棋的时候，最忌讳的就是得意忘形。有时候明明看着自己只要下一步就可以赢了，却在对手连招下毫无还手之力，只是一步之差输了整盘棋。最无奈的是明明看到别人走向，也能预知对手下步会下在哪里，可是一切都是徒劳，只能眼睁睁看着对手一步一步将自己逼向绝路。人生何尝不是如此?有时候明知道是个阴谋，却总是无可奈何地步入其中无法自拔。
总结
我们都是时间手中的一枚棋子，没有什么时间去看落下之后会发生什么，当四周密密麻麻落满棋 子的时候，才知道自己在其中的意义。你可知道每一个人都是相互联系的，缺一不可的，下棋的时候，不可能说一枚棋下这边，另一枚棋下那边，彼此没有任何关联。下棋的时候，讲究的是全局，不 可急躁，先要看清棋势，再慢慢思量下步下在哪才合适，当某天能心平气和地下完一盘棋的时候，即便不能改变什么，也会发现这个世界和以前想得有些不一样了。
