javascript 实现五子棋人机PK

已于 2023-10-26 10:39:12 修改
阅读量202 收藏
点赞数
分类专栏： 算法 五子棋算法 文章标签： javascript 算法 五子棋 五子棋算法 1024程序员节
于 2023-10-23 14:42:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heshiyuan1406146854/article/details/133989871
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1 table{
            border: 0px;
            border-collapse: collapse;
            cursor: pointer;
        }

        #box1 th {
            border: 0px;
            border-collapse: collapse;
            cursor: pointer;
        }

         #box1 td{
            border: 1px solid #000;
            border-collapse: collapse;
            cursor: pointer;
         }


        #box2 table{
            border-collapse: collapse;
            border: 0px;
        }

        #box2 th {
            border-collapse: collapse;
            border: 0px;
        }

        #box2 td{
            border-collapse: collapse;
            border: 1px solid transparent;
            border-radius:20px;
        }

       .color_human{
         background-color: white;
       }

       .color_machine{
         background-color: black;
       }

        #box1{
           position: absolute;
           left: 100px;
           top: 100px;
           border: 0px;
           background-color: gray;
       }

        #box2{
           position: absolute;
           left: 110px;
           top: 110px;
           border: 0px;
       }

    </style>
</head>
<body>
<div id="box1">
</div>

<div id="box2">
</div>

</body>
<script type="text/javascript">
    var map_code_td = new Map();
    var map_code_color = new Map();
    var map_code_score = new Map();
    var win = false;
    var color_human = "color_human";
    var color_machine = "color_machine"

    // 辅助帮助显示横竖纹的底色棋盘，没有任何事件和业务逻辑
    function initBox1( ) {
        var table = document.createElement("table");
        // table.border = 1 ;
        table.rules  = 'all' ;
        for (var rowNum = 1; rowNum <= 15; rowNum++) {
            var tr = document.createElement("tr");
            for (var colNum = 1; colNum <= 15; colNum++) {
                var td = document.createElement("td");
                td.width = 20;
                td.height = 20;
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }
        document.getElementById( "box1" ).appendChild(table);
    }

    function initBox2( ) {
        var table = document.createElement("table");
        // table.border = 1 ;
        table.rules  = 'all' ;
        for (var rowNum = 1; rowNum <= 15; rowNum++) {
            var tr = document.createElement("tr");
            for (var colNum = 1; colNum <= 15; colNum++) {
                var td = document.createElement("td");
                td.width = 20;
                td.height = 20;
                tr.appendChild(td);

                var code = rowNum + "_" + colNum;
                map_code_td.set( code,td );
                map_code_color.set( code,"white" );
            }
            table.appendChild(tr);
        }
        document.getElementById( "box2" ).appendChild(table);
        table.addEventListener( "click", clickChess );
    }

    initBox1(  );
    initBox2(  );

    // 获取到点击的 td,如果该人类落子，则将td的颜色改为 人类棋子颜色，否则该机器落子，将颜色改为机器棋子颜色
    var shouldHumanPoint = true;
    function clickChess(){
        if( win ){
            return;
        }
        if( !shouldHumanPoint ){
            alert("稍等，机器落子后您再落子!");
            return;
        }
        var td = event.srcElement;

        // todo 判断该格子是否已经落过子
        var className = td.className;
        if( className == color_machine || className==color_human ){
            alert( "该位置已落子" );
            return;
        }
        var rowNum = td.parentElement.rowIndex + 1;
        var colNum = td.cellIndex + 1;
        var code = rowNum + "_" + colNum;
        var td = map_code_td.get( code );
        // console.log( rowNum+"行" +colNum+ "列");
        td.className = color_human;
        map_code_color.set( code,color_human );
        shouldHumanPoint = false;
        // 人类落子后检测是否胜利
        winCheck();
        if( win ){
            alert("人类胜利");
            return;
        }

         window.setTimeout(function(){
            // 机器开始落子
            machinePoint();
            // 机器落子后检测是否胜利
            winCheck();
            if( win ){
                alert("机器胜利");
                return;
            }
        },5000);
    }

    function machinePoint(){
        // 机器开始落子，需要找到一个得分最高的格子开始落子
        // 从下面 15*15 格子中找到得分最高的一个格子
        var maxScore = 0;
        var rowNum_maxScore = 0;
        var colNum_maxScore = 0;
        for( var rowNum=1;rowNum<=15;rowNum++ ){
            for( var colNum=1;colNum<=15;colNum++ ){
                // todo 如果该位置已经落子了，则不考虑
                var code = rowNum + "_" + colNum;
                var color = map_code_color.get( code );
                if( color == color_human || color == color_machine ){
                    continue;
                }
                var score = calculateScore( rowNum, colNum );
                if( score > maxScore ){
                    maxScore = score;
                    rowNum_maxScore = rowNum;
                    colNum_maxScore = colNum;
                }
            }
        }

        console.log( "机器应该落在" + rowNum_maxScore + "行" + colNum_maxScore + "列，得分：" + maxScore );
        var code = rowNum_maxScore + "_" + colNum_maxScore;
        var td = map_code_td.get( code );
        td.className = color_machine;
        map_code_color.set( code,color_machine );
        shouldHumanPoint = true;
    }

    // 得分表，该程序的精髓，其实本程序未使用任何算法，只是使用了这个得分表，写这个得分表的人比较厉害,程序厉不厉害也是取决于得分表设计的精不精妙
    function calculateScoreForForHumanMachineColorCount( count_humanColor,count_machineColor){
        if( count_humanColor > 0 && count_machineColor > 0 ){
            return 0;
        }else if( count_humanColor == 0 && count_machineColor == 0 ){
            return 7;
        }else if( count_humanColor == 0 && count_machineColor == 1 ){
            return 35;
        }else if( count_humanColor == 0 && count_machineColor == 2 ){
            return 800;
        }else if( count_humanColor == 0 && count_machineColor == 3 ){
            return 15000;
        }else if( count_humanColor == 0 && count_machineColor == 4 ){
            return 800000;
        }else if( count_humanColor == 1 && count_machineColor == 0 ){
            return 15;
        }else if( count_humanColor == 2 && count_machineColor == 0 ){
            return 400;
        }else if( count_humanColor == 3 && count_machineColor == 0 ){
            return 1800;
        }else if( count_humanColor == 4 && count_machineColor == 0 ){
            return 100000;
        }else{
            return 0;
        }
    }

    // 为该五连子计算得分
    function calculateScoreFor5Point( code1,code2,code3,code4,code5 ){
        var color1 = map_code_color.get( code1 );
        var color2 = map_code_color.get( code2 );
        var color3 = map_code_color.get( code3 );
        var color4 = map_code_color.get( code4 );
        var color5 = map_code_color.get( code5 );

        if( color1 && color2 && color3 && color4 && color5 ){
            // 计算人类棋子颜色和机器棋子颜色的个数
            var count_humanColor = 0;
            var count_machineColor = 0;

            if( color1 ==color_human ){
                count_humanColor++;
            }else if( color1 == color_machine ){
                count_machineColor++;
            }
            if( color2 ==color_human ){
                count_humanColor++;
            }else if( color2 == color_machine ){
                count_machineColor++;
            }
            if( color3 ==color_human ){
                count_humanColor++;
            }else if( color3 == color_machine ){
                count_machineColor++;
            }
            if( color4 ==color_human ){
                count_humanColor++;
            }else if( color4 == color_machine ){
                count_machineColor++;
            }
            if( color5 ==color_human ){
                count_humanColor++;
            }else if( color5 == color_machine ){
                count_machineColor++;
            }
            return calculateScoreForForHumanMachineColorCount( count_humanColor, count_machineColor );
        }else{
            // 不是一个合法的无连子，可能超出边界了
            return 0;
        }
    }

    function calculateScore(rowNum, colNum){
        var totalScore = 0;
        // 该格子所在行( 左-->右：行不变，列++ )
        // 统计该格子作为第1、2、3、4、5个子时候的五连子的得分之和
        for( var i=0; i<5; i++){
            var code1 = rowNum + "_" + ( colNum + 0 - i );//  0、-1、-2、-3、-4
            var code2 = rowNum + "_" + ( colNum + 1 - i );//  1、0、-1、-2、-3
            var code3 = rowNum + "_" + ( colNum + 2 - i );//  2、1、0、-2、-2
            var code4 = rowNum + "_" + ( colNum + 3 - i );//  3、2、1、0、-1
            var code5 = rowNum + "_" + ( colNum + 4 - i );//  4、3、2、1、0
            totalScore += calculateScoreFor5Point( code1, code2, code3, code4, code5 );
        }

        // 该格子所在列( 上->下：行++,列不变 )
        // 统计该格子作为第1、2、3、4、5个子时候的五连子的得分之和
        for( var i=0; i<5; i++){
            code1 = ( rowNum + 0 - i ) + "_" + colNum; // 0、-1、-2、-3、-4
            code2 = ( rowNum + 1 - i ) + "_" + colNum; // 1、0、-1、-2、-3
            code3 = ( rowNum + 2 - i ) + "_" + colNum; // 2、1、0、-1、-2
            code4 = ( rowNum + 3 - i ) + "_" + colNum; // 3、2、1、0、-1
            code5 = ( rowNum + 4 - i ) + "_" + colNum; // 4、3、2、1、0
            totalScore += calculateScoreFor5Point( code1, code2, code3, code4, code5 );
        }

        // 该格子所在正斜线( 左下-->右上：行--，列++ )
        // 统计该格子作为第1、2、3、4、5个子时候的五连子的得分之和
        for( var i=0; i<5; i++){
            code1 = ( rowNum + i - 0 ) + "_" + ( colNum + 0 - i );
            code2 = ( rowNum + i - 1 ) + "_" + ( colNum + 1 - i );
            code3 = ( rowNum + i - 2 ) + "_" + ( colNum + 2 - i );
            code4 = ( rowNum + i - 3 ) + "_" + ( colNum + 3 - i );
            code5 = ( rowNum + i - 4 ) + "_" + ( colNum + 4 - i );
            totalScore += calculateScoreFor5Point( code1, code2, code3, code4, code5 );
        }

        // todo 该格子所在反斜线( 左上-->右下：行++,列++ )
        // 统计该格子作为第1、2、3、4、5个子时候的五连子的得分之和
        for( var i=0; i<5; i++){
             code1 = ( rowNum + 0 - i )  + "_" + ( colNum + 0 - i );
             code2 = ( rowNum + 1 - i ) + "_" +  ( colNum + 1 - i );
             code3 = ( rowNum + 2 - i ) + "_" +  ( colNum + 2 - i );
             code4 = ( rowNum + 3 - i ) + "_" +  ( colNum + 3 - i );
             code5 = ( rowNum + 4 - i ) + "_" +  ( colNum + 4 - i );
             totalScore += calculateScoreFor5Point( code1, code2, code3, code4, code5 );
        }
        return totalScore;
    }

    function winCheck(){
        if( win ){
            return;
        }
        // 检查全部的五连子，是否存在五个全是红子或者五个全部蓝子
        // 检查全部列上的五连子
        winCheck_col()
        if( win ){
            return;
        }

        // 检查全部行上的五连子
        winCheck_row();
        if( win ){
            return;
        }

        // 检查全部正斜线上的五连子
        winCheck_zhengxiexian();
        if( win ){
            return;
        }

        // 检查全部反斜线上的五连子
        winCheck_fanxiexian();
        if( win ){
            return;
        }
        //printColors()
    }

    function printColors(){
       for( rowNum=1;rowNum<=15;rowNum++ ){
           var colors_row = "";
           for( colNum=1;colNum<=15;colNum++ ){
                var code = rowNum + "_" + colNum;
                var color = map_code_color.get( code );
                colors_row += color + " ";
           }
           console.log( colors_row );
       }
    }

    function winCheck_zhengxiexian(){
        // 列--，行++
        for( rowNum=1;rowNum<=15;rowNum++ ){
            for( colNum=1;colNum<=15;colNum++ ){
                var code1 = rowNum + "_" + colNum;
                var code2 = ( rowNum + 1 ) + "_" + ( colNum - 1 );
                var code3 = ( rowNum + 2 ) + "_" + ( colNum - 2 );
                var code4 = ( rowNum + 3 ) + "_" + ( colNum - 3 );
                var code5 = ( rowNum + 4 ) + "_" + ( colNum - 4 );
                allSameColorCheck( code1,code2,code3,code4,code5 );
                if( win ){
                    return;
                }
            }
        }
    }

    function winCheck_fanxiexian(){
         // 列++，行++
        for( rowNum=1;rowNum<=15;rowNum++ ){
            for( colNum=1;colNum<=15;colNum++ ){
                var code1 = rowNum + "_" + colNum;
                var code2 = ( rowNum + 1 ) + "_" + ( colNum + 1 );
                var code3 = ( rowNum + 2 ) + "_" + ( colNum + 2 );
                var code4 = ( rowNum + 3 ) + "_" + ( colNum + 3 );
                var code5 = ( rowNum + 4 ) + "_" + ( colNum + 4 );
                allSameColorCheck( code1,code2,code3,code4,code5 );
                if( win ){
                    return;
                }
            }
        }
    }

    function winCheck_col(){
        // 检查全部列是否存在五连子
        // 列不变，行++
        for( var colNum=1;colNum<=15;colNum++ ){
            for( var rowNum=1;rowNum<=15;rowNum++ ){
                var code1 = rowNum + "_" + colNum;
                var code2 = ( rowNum + 1 ) + "_" + colNum;
                var code3 = ( rowNum + 2 ) + "_" + colNum;
                var code4 = ( rowNum + 3 ) + "_" + colNum;
                var code5 = ( rowNum + 4 ) + "_" + colNum;
                allSameColorCheck( code1, code2, code3, code4, code5 );
                if( win ){
                    return;
                }
            }
        }
    }

    function winCheck_row(){
        // 行不变，列++
        for( var rowNum=1;rowNum<=15;rowNum++ ){
            for( var colNum=1;colNum<=15;colNum++ ){
                var code1 = rowNum + "_" + colNum;
                var code2 = rowNum + "_" + ( colNum + 1 );
                var code3 = rowNum + "_" + ( colNum + 2 );
                var code4 = rowNum + "_" + ( colNum + 3 );
                var code5 = rowNum + "_" + ( colNum + 4 );
                allSameColorCheck( code1,code2,code3,code4,code5 );
                if( win ){
                    return;
                }
            }
        }
    }

    function allSameColorCheck( code1,code2,code3,code4,code5 ){
        var color1 = map_code_color.get( code1 );
        var color2 = map_code_color.get( code2 );
        var color3 = map_code_color.get( code3 );
        var color4 = map_code_color.get( code4 );
        var color5 = map_code_color.get( code5 );
        if( isAllHumanColor( color1,color2,color3,color4,color5 ) ){
            // 该五连子全部是 人类棋子颜色
            win = true;
        }else if( isAllMachineColor( color1,color2,color3,color4,color5 ) ){
            // 该五连子全部是 机器棋子颜色
            win = true;
        }
        console.log("win=" + win);
    }

    function isAllHumanColor(color1,color2,color3,color4,color5){
        if( color1 && color2 && color3 && color4 && color5 ){

        }else{
            return false;
        }
        if( color1 ==color_human && color2 ==color_human && color3 ==color_human && color4 ==color_human && color5 ==color_human ){
            return true;
        }
        return false;
    }

    function isAllMachineColor(color1,color2,color3,color4,color5){
        if( color1 && color2 && color3 && color4 && color5 ){

        }else{
            return false;
        }
        if( color1 ==color_machine && color2 ==color_machine && color3 ==color_machine && color4 ==color_machine && color5 ==color_machine ){
            return true;
        }
        return false;
    }
</script>
</html>

效果展示：

原生js完成的五子棋人机大战
m0_64804076的博客
07-29 1508
本系统是以java作为基础实现的，利用VisualStudioCode软件开发一个页面简洁的人机对战五子棋游戏，本系统采用html语言，使用css技术对界面进行了美化，再通过JavaScript创建电脑对象、棋子对象等等一系列对象让游戏贯穿起来，使其得以运行。游戏利用红黑两色棋子，实现双方的棋子区别，在程序能够在下子处重复下子时提醒，随时保存游戏，ai根据当前形势进行判断下子，判断胜负。五子棋作为中国古代的传统黑白棋种之一，有着广泛的群众基础，是一种老少皆宜的棋类休闲游戏。...
js 实现ai五子棋人机大战
yw_hard的博客
12-01 1307
实现原理就是计算五子棋所有赢的种类，利用canvas实现五子棋排版落子。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
JavaScript 五子棋人机大战
12-23
前端 JavaScript 五子棋人机大战，三子之前机器人下子随机，三子过后，机器人带有攻击性
JS五子棋之人机对战
ccxcuixia
01-31 953
JavaScript实现人机大战五子棋9*9 文章目录 1. 效果图 2. UI篇 3. AI篇 4. 参考视频 1.效果图 先来看看最终实现的效果吧！ 胜利显示： 2.UI篇 主要是使用canvas绘制棋盘以及棋子 canvas绘制棋盘 for(var i=0;i<9;i++) { //横线 //开始一条路径，移动到位置 (24 + i *50, 24), 创建到达位置(...
JavaScript:js实现在线五子棋人机(人人)对弈
最新发布
qq_55630615的博客
04-24 1172
一个不难的小游戏,逻辑存在一定漏洞,主要是对js也不熟悉,包括对var和let的理解等等都比较欠缺,以现在的知识储备应该是改不明白了,再多学点把这个做成线上人人对战.
js实现五子棋人机对战源码
weixin_30790841的博客
07-16 851
indexhtml 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>五子棋</title> 6 <meta name="viewport" content...
html五子棋人机对战,JS+canvas实现五子棋人机大战
weixin_28749363的博客
06-15 392
1. 创建实例function Gobang () {this.over = false; // 是否结束this.player = true; // true:我 false:电脑this.allChesses = []; // 所有棋子this.existChesses = [] // 已经落下的棋子this.winsCount = 0; // 赢法总数this.wins = []; // ...
js实现AI五子棋人机大战
10-15
【JavaScript实现AI五子棋人机大战】 在JavaScript中实现AI五子棋人机大战是一项有趣且具有挑战性的任务，涉及到编程、算法以及人工智能的基本应用。以下是对这一主题的详细阐述： 1. **游戏界面与布局**：首先，...
JavaScript实现的网页五子棋人机对战游戏
"基于JavaScript的人机五子棋游戏的设计与实现" 本文主要探讨了如何利用JavaScript技术设计并实现一款网页版的人机五子棋游戏。在介绍背景时，提到了谷歌的AlphaGo在人机大战中战胜韩国围棋高手李世石，从而引发了...
js写五子棋人机版
10-16
综上所述，实现"js写五子棋人机版"需要掌握JavaScript的基本语法和高级特性，理解游戏规则，并能运用算法和数据结构来模拟游戏过程。通过这个项目，开发者不仅可以提升JavaScript技能，还能锻炼解决问题和逻辑思维的...
用js写的简便五子棋（含人机）
09-13
用js写的简便五子棋（含人机用到了三维数组）,希望对大家会有帮助！
html实现五子棋
02-10
使用html和css实现五子棋 /**五子棋 * 思路： * 1.棋盘设置：使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件：当页面被点击时，获取点击的x,y像素点,根据此像素点进行判断，再在合适位置绘制黑白棋子，黑子棋子均是使用canvas绘制的 * 3.保存落子记录：将数据存入一个二维数组，x和y表是落子坐标，1为白棋，2为黑棋，0代表此处无棋子，只有没有棋子的才能落子 * 4.判断输赢：每次落子后以此坐标分别向左右，上下，右下，右上进行判断，设参数count，遇到同色棋子+1，遇到空格或不同色棋子终止，当count=5时，游戏结束 * 20150930 */ /**全局参数初始化
五子棋html版（源码）
04-05
五子棋html5版，喜欢可以试试
基于JavaScript实现五子棋游戏
01-19
本文实例为大家分享了js实现五子棋的具体代码，供大家参考，具体内容如下 思路： 1、先用canvas画五子棋的棋盘 2、获取鼠标点击的位置 3、根据鼠标点击的位置判断，并画棋子 4、根据下的棋子判断是否赢了 代码： &...
【Web】HTML+ JS+ CSS 的五子棋（简单AI）
新青年1号
09-30 1851
声明 本文是在观看 慕课网channingbreeze 大神的教学视屏时编写的。文中代码非本人原创，只是在学习过程中跟随教学视频略作修改并加上了详细的注释，以便于理解。 原教学视频地址：https://www.imooc.com/video/11639 HTML代码 CSS代码 JS代码 ...
五子棋人机对战_原生JS+Canvas实现五子棋游戏
weixin_39654352的博客
12-18 167
原生JS+Canvas实现五子棋游戏效果图 主要功能模块为： 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二、代码详解2.1 人机对战功能实现从效果图可以看到，棋盘的横竖可以放的位置为15*15，通过canvas画棋盘： 知道格子数后，我们先看五子棋有多少种赢法： 根据赢法总数定义分别保存计算机和人赢法的数组： 然后就是人开始下棋： oneStep() 方法为落子，要在棋盘上画一个棋子： 接着...
html实现五子棋游戏
路在前方
10-31 6784
实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px
用html+js实现五子棋游戏（人机对战）【建议收藏】
小魏快起床的博客
02-22 889
在前端如何创建一个五子棋盘，并实现人机对战，不要小瞧人机，你可能还赢不了，不信你来试试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值