原生JS+Canvas实现五子棋游戏

Joyven 发布于2019-08-20 17:21 / 2455人阅读

摘要：撤销悔棋功能悔棋过后，再撤销，相当于还原悔棋之前的状态。三总结五子棋游戏的核心关键点是弄清楚有多少种赢法怎么判断是否已经赢了计算机下棋算法。

一、功能模块

先看下现在做完的效果：

线上体验：https://wj704.github.io/five_...
主要功能模块为：
1.人机对战功能
2.悔棋功能
3.撤销悔棋功能

二、代码详解 2.1 人机对战功能实现

从效果图可以看到，棋盘的横竖可以放的位置为15*15，通过canvas画棋盘：

        //绘画棋盘
        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 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++;
                }
            }

根据赢法总数定义分别保存计算机和人赢法的数组：

    for(var i = 0; i < count; i++){
                myWin[i] = 0;
                _myWin[i] = 0;
                computerWin[i] = 0;
                _compWin[i] = 0;
     }

然后就是人开始下棋：

    // 我，下棋
    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);
        _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]){
                    myWin[k]++;
                    _compWin[k] = computerWin[k]; // 为悔棋做准备
                    computerWin[k] = 6;//这个位置对方不可能赢了
                    if(myWin[k] == 5){
                        resultTxt.innerHTML = "恭喜，你赢了！";
                        over = true;
                    }
                }
            }
            if(!over){
                me = !me;
                computerAI();
            }
        }
        // 悔棋功能可用
        backbtn.className = backbtn.className.replace( new RegExp( "(s|^)unable(s|$)" )," " );          
    }

oneStep() 方法为落子，要在棋盘上画一个棋子：

        //画棋子
        var oneStep = function(i,j,me){
            // debugger;
            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();
        }

接着看计算机怎么下棋，具体看computerAI()方法：

        // 计算机下棋
        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;
            }
        }

根据相应的权重，计算出计算机应该落子的位置。

2.2 悔棋功能

要提的是，这里暂时只能悔一步棋。悔棋功能主要关键点是：1、销毁刚刚下的棋子；2、将之前不可能赢的状态还原；看下具体的代码：

            // 悔棋
            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]--;
                        myWin[k] = _myWin[i];//这个位置对方可能赢
                    }
                }
                resultTxt.innerHTML = "--益智五子棋--";
                returnAble = true;
                backAble = false;
                 // 撤销悔棋功能可用
                returnbtn.className = returnbtn.className.replace( new RegExp( "(s|^)unable(s|$)" )," " ); 
            }

minusStep()为销毁棋子的方法，我们看下是怎么销毁的。

         //销毁棋子
         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();
        }

首先通过clearRect()擦掉该圆，然后再重新画该圆周围的格子，注意相应的位置，这里花了些时间折腾。

2.3 撤销悔棋功能

悔棋过后，再撤销，相当于还原悔棋之前的状态。代码比较简单：

        // 撤销悔棋
        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++){ 
                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;
        }

至此，比较简单的完成了这三个功能。

三、总结

五子棋游戏的核心关键点是：1、弄清楚有多少种赢法；2、怎么判断是否已经赢了；3、计算机下棋算法。这里巧妙地运用数组存储赢法，判断是否赢了，通过权重比较，计算出计算机该下棋的位置。
过程中用到canvas，之前有学习过，虽然很久没用，查了些资料，复习了怎么画线，画圆，学会了怎么如何清除一个圆等。
然后要注意的是，用原生Js怎么为元素添加、删除class。
最后代码放到github上了，地址：https://github.com/wj704/wj70...
参考资料：
http://www.cnblogs.com/gdcgy/...

GPU云服务器云服务器原生js实现 ajax原生js实现原生js实现addclass 原生js实现ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83520.html

canvas 五子棋游戏

摘要：输赢判断使用遍历即可重复落棋用判断保存的数组的位置是否已经有棋子即可落在交叉线和附近的点判断，如果相差小于一定数值进行落棋。效果 showImg(https://segmentfault.com/img/remote/1460000018120970?w=1089&h=596); 代码五子棋 (function () { //...

Airy 2019-08-23 15:09 评论0 收藏0
2017-06-19 前端日报

摘要：前端日报精选京东如何配合业务打造三端融合开发平台第期聊聊组件开发的边界把握和状态驱动插件拾趣网站开发微信小程序实战二全家桶开发的一个跨三端的应用掘金原生实现五子棋游戏前端学习中文译年你应该了解的函数式编程个人文章的设 2017-06-19 前端日报精选京东618：如何配合业务打造JDReact三端融合开发平台？【第970期】聊聊vue组件开发的边界把握和状态驱动webpack 插件...

alighters 2019-08-20 17:23 评论0 收藏0
JS+canvas实现五子棋人机大战

摘要：五子棋人机大战创建实例是否结束我电脑所有棋子已经落下的棋子赢法总数所有赢法统计我的赢法统计电脑赢法统计初始化初始化生成棋盘棋盘初始化鼠标移动聚焦功能实现算法初始化落子功能实现生成棋盘初始化生成不是的倍数棋盘列初始化棋盘棋盘初始化画棋盘画 JS+canvas五子棋人机大战 1. 创建实例 function Gobang () { this.over = false; // 是否结...

sutaking 2019-08-21 17:50 评论0 收藏0