益智小游戏【五子连珠棋】

1,228 阅读2分钟

我正在参加掘金社区游戏创意投稿大赛个人赛,详情请看:游戏创意投稿大赛

前言

五子棋又名五子连珠棋,是一项有趣、益智的棋类游戏,世界上已有几十个国家开展此项活动。世界五子棋锦标赛已举办过几届,并进入世界智力体育奥林匹克比赛,它的影响越来越大。五子连珠棋易学难精,但妙趣横生。下一局棋所费时间不多,茶余饭后“杀上一盘”,开发智力,勤于动脑,调剂感情,有利于开发智力,居家必备。

-

线条没了 ε(┬┬﹏┬┬)3

游戏规则

五子连珠棋传统五子棋的棋具与围棋大致相同,棋子分为黑白两色,棋盘为15x15、棋子放置于棋盘线交叉点上。两人对局,各执一色,轮流下一子、先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜(正规比赛中黑棋只能连成5个。6-9个一排算禁手,另外黑棋还有33和44禁手。黑棋禁手判负。白棋没有限制)。

image.png

布局

画棋盘

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();
                }
            }            
        

画棋子

 //画棋子
            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 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;
            }

悔棋

image.png

// 悔棋
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;
};

微信截图_20220412162617.png

下五子棋的时候,最忌讳的就是得意忘形。有时候明明看着自己只要下一步就可以赢了,却在对手连招下毫无还手之力,只是一步之差输了整盘棋。最无奈的是明明看到别人走向,也能预知对手下步会下在哪里,可是一切都是徒劳,只能眼睁睁看着对手一步一步将自己逼向绝路。人生何尝不是如此?有时候明知道是个阴谋,却总是无可奈何地步入其中无法自拔。

总结

我们都是时间手中的一枚棋子,没有什么时间去看落下之后会发生什么,当四周密密麻麻落满棋 子的时候,才知道自己在其中的意义。你可知道每一个人都是相互联系的,缺一不可的,下棋的时候,不可能说一枚棋下这边,另一枚棋下那边,彼此没有任何关联。下棋的时候,讲究的是全局,不 可急躁,先要看清棋势,再慢慢思量下步下在哪才合适,当某天能心平气和地下完一盘棋的时候,即便不能改变什么,也会发现这个世界和以前想得有些不一样了。