javascript 实现五子棋人机PK-v2

已于 2023-10-27 16:43:55 修改
阅读量261 收藏 1
点赞数
分类专栏： 算法 五子棋算法 博弈算法 文章标签： javascript 算法 五子棋算法 博弈算法 数据结构
于 2023-10-27 16:21:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heshiyuan1406146854/article/details/134079015
版权 
<!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;
       }

       .color_machine_win{
            background-color: red;
       }

        .color_human_win{
            background-color: green;
       }

        #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"
    var codes_win = [];
    var color_blank = "xxx";
    var row_count = 20;
    var col_count = 20;

    // 辅助帮助显示横竖纹的底色棋盘，没有任何事件和业务逻辑
    function initBox1( ) {
        var table = document.createElement("table");
        table.rules  = 'all' ;
        for (var rowNum = 1; rowNum <= row_count; rowNum++) {
            var tr = document.createElement("tr");
            for (var colNum = 1; colNum <= col_count; 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.rules  = 'all' ;
        for (var rowNum = 1; rowNum <= row_count; rowNum++) {
            var tr = document.createElement("tr");
            for (var colNum = 1; colNum <= col_count; 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,color_blank );
            }
            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;
        var rowNum = td.parentElement.rowIndex + 1;
        var colNum = td.cellIndex + 1;
        if( isAlreadyFillPoint( rowNum,colNum ) ){
            alert( "该位置已落子" );
            return;
        }

        // 执行人类落子操作
        td.className = color_human;
        var code = rowNum + "_" + colNum;
        map_code_color.set( code,color_human );
        shouldHumanPoint = false;

        // 人类落子后检测是否胜利
        winCheck();
        if( win ){
            highlightFiveWinCodes( true );
            alert("人类胜利");
            return;
        }

        window.setTimeout(function(){
            // 机器开始落子
            machinePoint();

            // 机器落子后检测是否胜利
            winCheck();
            if( win ){
                highlightFiveWinCodes( false );
                alert("机器胜利");
            }
        },1000);
    }

    // 高亮5个连成线的棋子
    function highlightFiveWinCodes( humanWin ){
        for(var i=0;i<5;i++){
            var td = map_code_td.get(  codes_win[i] );
            if( humanWin ){
                td.className = "color_human_win";
            }else{
                td.className = "color_machine_win";
            }
        }
    }

    // 机器落子操作
    function machinePoint(){
        // 首先检查人类是否存在机器不拦则人类必胜的情况，比如存在人类的 "空白白白空空"两端的 空的数量满足一端>=1 ,一端>1,则机器必须落在 "白白白"的两端
        // 空白白白空空、空空白白白空
        // 人类必胜检测
        // 人类必胜的六连子，检测到有，则机器落在六连子的最后一个子上
        var sixCodes = humanMustWinCheck();
        if( sixCodes ){
            console.log("检测到存在人类的必胜六连子，试图拦截:");
            console.log(sixCodes);
            var code = sixCodes[5];
            var td = map_code_td.get( code );
            td.className = color_machine;
            map_code_color.set( code,color_machine );
            shouldHumanPoint = true;
            return;
        }

        // 机器开始落子，需要找到一个得分最高的格子开始落子
        // 从下面 row_count * col_count 格子中找到得分最高的一个格子
        var maxScore = 0;
        var rowNum_maxScore = 0;
        var colNum_maxScore = 0;
        for( var rowNum = 1;rowNum <= row_count;rowNum++ ){
            for( var colNum = 1;colNum <= col_count;colNum++ ){
                if( isAlreadyFillPoint( rowNum,colNum ) ){
                    // 该位置已经落子了，不考虑
                    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 isAlreadyFillPoint( rowNum,colNum ){
        var code = rowNum + "_" + colNum;
        var color = map_code_color.get( code );
        if( color == color_human || color == color_machine ){
            return true;
        }
        return false;
    }

    // 得分表，该程序的精髓，其实本程序未使用任何算法，只是使用了这个得分表，写这个得分表的人比较厉害,程序厉不厉害也是取决于得分表设计的精不精妙
    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 calculateScoreForFiveCodes( fiveCodes ){
        // 统计人类棋子和机器棋子的个数
        var count_humanColor = 0;
        var count_machineColor = 0;
        for( var i=0;i<5;i++ ){
            var code = fiveCodes[i];
            var color = map_code_color.get( code );
            if( !color ){
                // 可能由于传递的 fiveCodes 不是有效的五连子导致的，比如 "16_1"、"-1_2"等，因为前面未进行最大最小合法角标的限制
                return 0;
            }
            if( color == color_human ){
                count_humanColor++;
            }else if( color == color_machine ){
                count_machineColor++;
            }
        }
        return calculateScoreForForHumanMachineColorCount( count_humanColor, count_machineColor );
    }

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

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

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

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

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

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

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

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

    function winCheck_forwardSlash(){
        // 列--，行++
        for( rowNum=1;rowNum<=row_count;rowNum++ ){
            for( colNum=1;colNum<=col_count;colNum++ ){
                var codes = [];
                codes.push( rowNum + "_" + colNum );
                codes.push( ( rowNum + 1 ) + "_" + ( colNum - 1 ) );
                codes.push( ( rowNum + 2 ) + "_" + ( colNum - 2 ) );
                codes.push( ( rowNum + 3 ) + "_" + ( colNum - 3 ) );
                codes.push( ( rowNum + 4 ) + "_" + ( colNum - 4 ) );
                if( isAllTargetColor( codes,color_human ) || isAllTargetColor( codes,color_machine ) ){
                    win = true;
                }
                if( win ){
                    for(var i=0;i<5;i++){
                        codes_win.push( codes[i] );
                    }
                    return;
                }
            }
        }
    }

    function winCheck_backSlash(){
         // 列++，行++
        for( rowNum=1;rowNum<=row_count;rowNum++ ){
            for( colNum=1;colNum<=col_count;colNum++ ){
                var fiveCodes = [];
                fiveCodes.push( rowNum + "_" + colNum );
                fiveCodes.push( ( rowNum + 1 ) + "_" + ( colNum + 1 ) );
                fiveCodes.push( ( rowNum + 2 ) + "_" + ( colNum + 2 ) );
                fiveCodes.push( ( rowNum + 3 ) + "_" + ( colNum + 3 ) );
                fiveCodes.push( ( rowNum + 4 ) + "_" + ( colNum + 4 ) );
                if( isAllTargetColor( fiveCodes,color_human ) || isAllTargetColor( fiveCodes,color_machine ) ){
                    // 都是人类棋子 或者 机器棋子，表示已经分出胜负了
                    win = true;
                }
                if( win ){
                    for( var i=0;i<5;i++ ){
                        codes_win.push( fiveCodes[i] );
                    }
                    return;
                }
            }
        }
    }

    function winCheck_col(){
        // 检查全部列是否存在五连子
        // 列不变，行++
        for( var colNum=1;colNum<=col_count;colNum++ ){
            for( var rowNum=1;rowNum<=row_count;rowNum++ ){
                var fiveCodes = [];
                fiveCodes.push( rowNum + "_" + colNum );
                fiveCodes.push( ( rowNum + 1 ) + "_" + colNum );
                fiveCodes.push( ( rowNum + 2 ) + "_" + colNum );
                fiveCodes.push( ( rowNum + 3 ) + "_" + colNum );
                fiveCodes.push( ( rowNum + 4 ) + "_" + colNum );
                if( isAllTargetColor( fiveCodes,color_human ) || isAllTargetColor( fiveCodes,color_machine ) ){
                    // 已经分出胜负了
                    win = true;
                }
                if( win ){
                    for( var i=0;i<5;i++ ){
                        codes_win.push( fiveCodes[i] );
                    }
                    return;
                }
            }
        }
    }

    function winCheck_row(){
        // 行不变，列++
        for( var rowNum=1;rowNum<=row_count;rowNum++ ){
            for( var colNum=1;colNum<=col_count;colNum++ ){
                var codes = [];
                codes.push( rowNum + "_" + colNum );
                codes.push( rowNum + "_" + ( colNum + 1 ) );
                codes.push( rowNum + "_" + ( colNum + 2 ) );
                codes.push( rowNum + "_" + ( colNum + 3 ) );
                codes.push( rowNum + "_" + ( colNum + 4 ) );
                if( isAllTargetColor( codes,color_human ) || isAllTargetColor( codes,color_machine ) ){
                    // 已经分出胜负了
                    win = true;
                }
                if( win ){
                    for( var i=0;i<5;i++ ){
                        codes_win.push( codes[i] );
                    }
                    return;
                }
            }
        }
    }

    // 检查五连子是否都是指定的颜色
    function  isAllTargetColor( fiveCodes,targetColor ){
        for( var i = 0;i<5;i++ ){
            var code = fiveCodes[i];
            var color = map_code_color.get( code );
            if( !color || color != targetColor ){
                return false;
            }
        }
        return true;
    }

     // 人类必胜检测
    // 检查人类是否存在机器不拦则人类必胜的情况，比如存在人类的 "空白白白空空"两端的 空的数量满足一端>=1 ,一端>1,则机器必须落在 "白白白"的两端
    function humanMustWinCheck(){
        // 全部行的 人类必胜检测
        var sixCodes = humanMustWinCheck_allRow();
        if( sixCodes ){
            return sixCodes;
        }

        // 全部列的 人类必胜检测
        sixCodes = humanMustWinCheck_allCol();
        if( sixCodes ){
            return sixCodes;
        }

        // 全部正斜线的 人类必胜检测
        sixCodes = humanMustWinCheck_allForwardSlash();
        if( sixCodes ){
            return sixCodes;
        }

        // 全部反斜线的 人类必胜检测
        sixCodes = humanMustWinCheck_allBackSlash();
        if( sixCodes ){
            return sixCodes;
        }
    }

     // 全部行的 人类必胜检测
    function humanMustWinCheck_allRow(){
        for( var rowNum=1;rowNum<=row_count;rowNum++ ){
            // 对当前行进行 人类必胜检测
            var sixCodes = humanMustWinCheck_row( rowNum );
            if( sixCodes ){
                return sixCodes;
            }
        }
        return null;
    }

     // 对当前行进行人类必胜检测
    function humanMustWinCheck_row( rowNum ){
        // 遍历当前行的全部六连子，检测是否存在 "空白白白空空"、"空空白白白空"
        for( var colNum=1;colNum<=col_count;colNum++ ){
            var codes = [];
            codes.push( rowNum + "_" + colNum );
            codes.push( rowNum + "_" + ( colNum + 1 ) );
            codes.push( rowNum + "_" + ( colNum + 2 ) );
            codes.push( rowNum + "_" + ( colNum + 3 ) );
            codes.push( rowNum + "_" + ( colNum + 4 ) );
            codes.push( rowNum + "_" + ( colNum + 5 ) );
            if( isHumanMushWinSixCodes( codes ) ){
                return codes;
            }
        }
        return null;
    }

     // 检查是否是人类必胜六连子
    function isHumanMushWinSixCodes(  sixCodes ){
        var color1 = map_code_color.get( sixCodes[0] );
        var color2 = map_code_color.get( sixCodes[1] );
        var color3 = map_code_color.get( sixCodes[2] );
        var color4 = map_code_color.get( sixCodes[3] );
        var color5 = map_code_color.get( sixCodes[4] );
        var color6 = map_code_color.get( sixCodes[5] );
        if( !( color1 && color2 && color3 && color4 && color5 && color6 ) ){
            return false;
        }
        if( ( color1 == color_blank &&
                color2 == color_blank &&
                color3 == color_human &&
                color4 == color_human &&
                color5 == color_human &&
                color6 == color_blank ) ||
            ( color1 == color_blank &&
                color2 == color_human &&
                color3 == color_human &&
                color4 == color_human &&
                color5 == color_blank &&
                color6 == color_blank ) ){
            return true;
        }else{
            return false;
        }
    }

     // 当前列的人类必胜六连子检测
    function humanMustWinCheck_allCol(colNum){
        for( var rowNum=1;rowNum<=row_count;rowNum++ ){
            var codes = [];
            codes.push( rowNum + "_" + colNum );
            codes.push( ( rowNum + 1 ) + "_" + colNum );
            codes.push( ( rowNum + 2 ) + "_" + colNum );
            codes.push( ( rowNum + 3 ) + "_" + colNum );
            codes.push( ( rowNum + 4 ) + "_" + colNum );
            codes.push( ( rowNum + 5 ) + "_" + colNum );
            if( isHumanMushWinSixCodes( codes ) ){
                return codes;
            }
        }
        return null;
    }

     // 全部正斜线的 人类必胜检测
    function humanMustWinCheck_allForwardSlash(){
       for(var rowNum=1;rowNum<=row_count;rowNum++){
            // 当前正斜线的 人类必胜检测
            var sixCodes = humanMustWinCheck_forwardSlash(rowNum,1);
            if( sixCodes ){
                return sixCodes;
            }
       }
       for(var colNum=1;colNum<=col_count;colNum++){
            // 当前正斜线的 人类必胜检测
            var sixCodes = humanMustWinCheck_forwardSlash(row_count,colNum);
            if( sixCodes ){
                return sixCodes;
            }
       }
       return null;
    }

     //  当前正斜线的 人类必胜检测
    function humanMustWinCheck_forwardSlash( fromRowNum,fromColNum ){
        var large = row_count;
        if( col_count > large ){
            large = col_count;
        }
        for(var i=0;i<large;i++){
            var codes = [];
            codes.push( ( fromRowNum - i ) + "_" + ( fromColNum + i ) );
            codes.push( ( fromRowNum - i - 1 ) + "_" + ( fromColNum + i + 1 ) );
            codes.push( ( fromRowNum - i - 2 ) + "_" + ( fromColNum + i + 2 ) );
            codes.push( ( fromRowNum - i - 3 ) + "_" + ( fromColNum + i + 3 ) );
            codes.push( ( fromRowNum - i - 4 ) + "_" + ( fromColNum + i + 4 ) );
            codes.push( ( fromRowNum - i - 5 ) + "_" + ( fromColNum + i + 5 ) );
            if( isHumanMushWinSixCodes( codes ) ){
                return codes;
            }
        }
        return null;
    }

      // 全部反斜线的 人类必胜检测
    function humanMustWinCheck_allBackSlash(){
        for(var colNum=1;colNum<=col_count;colNum++){
            // 当前反斜线的 人类必胜检测
            var sixCodes = humanMustWinCheck_backSlash( 1,colNum );
            if( sixCodes ){
                return sixCodes;
            }
        }
        for(var rowNum=1;rowNum<=row_count;rowNum++){
            // 当前反斜线的 人类必胜检测
            var sixCodes = humanMustWinCheck_backSlash( rowNum,1 );
            if( sixCodes ){
                return sixCodes;
            }
        }
        return null;
    }

    // 行、列、正斜线、反斜线上的几个子的行号、列号增长的趋势规则(即++、--)可以添加到一个数组中，每次从数组中取
    // 当前反斜线的 人类必胜检测
    function humanMustWinCheck_backSlash(fromRowNum,fromColNum){
        var large = row_count;
        if( col_count > large ){
            large = col_count;
        }
        for( var i=0;i<large;i++ ){
            var codes = [];
            codes.push( ( fromRowNum + i ) + "_" + ( fromColNum + i ) );
            codes.push( ( fromRowNum + i + 1 ) + "_" + ( fromColNum + i + 1 ) );
            codes.push( ( fromRowNum + i + 2 ) + "_" + ( fromColNum + i + 2 ) );
            codes.push( ( fromRowNum + i + 3 ) + "_" + ( fromColNum + i + 3 ) );
            codes.push( ( fromRowNum + i + 4 ) + "_" + ( fromColNum + i + 4 ) );
            codes.push( ( fromRowNum + i + 5 ) + "_" + ( fromColNum + i + 5 ) );
            if( isHumanMushWinSixCodes( codes ) ){
                return codes;
            }
        }
        return null;
    }
</script>
</html>

JavaScript:js实现在线五子棋人机(人人)对弈
qq_55630615的博客
04-24 1389
一个不难的小游戏,逻辑存在一定漏洞,主要是对js也不熟悉,包括对var和let的理解等等都比较欠缺,以现在的知识储备应该是改不明白了,再多学点把这个做成线上人人对战.
js 实现ai五子棋人机大战
yw_hard的博客
12-01 1346
实现原理就是计算五子棋所有赢的种类，利用canvas实现五子棋排版落子。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
html五子棋人机对战,JS+canvas实现五子棋人机大战
weixin_28749363的博客
06-15 404
1. 创建实例function Gobang () {this.over = false; // 是否结束this.player = true; // true:我 false:电脑this.allChesses = []; // 所有棋子this.existChesses = [] // 已经落下的棋子this.winsCount = 0; // 赢法总数this.wins = []; // ...
五子棋html版（源码）
04-05
五子棋html5版，喜欢可以试试
javascript 实现五子棋人机PK
heshiyuan1406146854的博客
10-23 222
【代码】javascript 实现五子棋人机PK。
javascript实现的五子棋人机对战游戏源码
01-19
javascript实现的五子棋人机对战游戏源码
JavaScript实现五子棋人机对战游戏
通过上述的分析，可以看出一个前端JavaScript五子棋人机大战项目，不仅涉及到前端技术栈的运用，还包括了游戏规则的实现、人机策略的编写、文件管理等方面。在前端开发过程中，开发者需要综合运用HTML、CSS和...
Javascript实现简单人机五子棋
04-10
JavaScript实现的简单人机五子棋游戏是一种基于Web的互动娱乐程序，主要利用HTML、CSS和JavaScript技术构建。在这个游戏中，玩家可以与计算机AI进行对弈，体验五子棋的乐趣。下面将详细介绍JavaScript在实现五子棋...
用JavaScript实现的五子棋人机对战游戏
根据提供的文件信息，我们来详细介绍在JavaScript中实现五子棋人机版的知识点。 ### 标题知识点：js写五子棋人机版 **JavaScript五子棋人机版实现** - **基础概念**：五子棋是一种两人对弈的策略棋类游戏，双方...
JavaScript五子棋AI人机对战实战效果分析
### 标题知识点：《JavaScript五子棋人机对战》 1. **五子棋游戏规则**： - 五子棋是一种两人对弈的纯策略型棋类游戏，规则简单，双方轮流在棋盘上放置自己的棋子，通常使用黑白两色的棋子。 - 首先在横线、竖线...
用html+js实现五子棋游戏（人机对战）【建议收藏】
小魏快起床的博客
02-22 1000
在前端如何创建一个五子棋盘，并实现人机对战，不要小瞧人机，你可能还赢不了，不信你来试试。
js实现AI五子棋人机大战
10-15
主要为大家详细介绍了js实现AI五子棋人机大战，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript 实现飞机大战
qqrrjj2011的博客
03-09 1823
JavaScript实现飞机大战示例
打对钩的方式做人机验证(vue+javascript)
最新发布
servepeople的博客
06-05 924
以上示例展示了一个基础的人机验证流程，其中包含前端 Vue.js 组件和后端验证逻辑。通过动态生成问题和选项，以及在后端进行验证，可以有效地增加人机验证的难度，从而防止简单的脚本破解。实际应用中，还可以结合其他安全机制，如使用 HTTPS、增加图像和文字混合验证、增加随机噪音等，进一步提高验证的安全性。
HTML五子棋 JS实现人机对战
qq_28371343的博客
12-03 1727
该页面实现可变棋盘大小、人人对战、人机对战、机机对战，有权值算法日志，可继续调整算法
前端实现五子棋小游戏2（AI实现人机对战）
热门推荐
weixin_44584059的博客
08-23 1万+
通过一个简单的算法，来实现AI智能对弈的五子棋小游戏AI难点解析赢法数组赢法的统计数组判断胜负计算机的落子规则代码实现赢法数组赢法种类的索引横线赢法竖线赢法横线赢法斜线赢法反斜线赢法赢法的统计数组定义函数computerAI（）实现电脑对弈遍历棋盘与所有赢法，对黑棋/白棋落子行为进行加分记录并选出最高分数，即为获胜整体代码htmlCSSscript.js AI难点解析 赢法数组 三维数组，前两维是棋盘，第三维是赢法数组；每一种赢法对应一个二维棋盘，上面或许只有5个点是true，这5个点一定连成一条线 赢法的
JavaScript实现简单人机五子棋
starstasts的博客
04-10 1501
稍微给自己总结一下上周做的事情： first,根据视频和资料学习了bootstrap,现在回想起来，只记得 响应式 布局 这点了，这周打算找些网页和实例来巩固一下. then, 正在学习jQuery… Last，在慕课网上按照教学视频 完成了稍有趣的一个游戏，五子棋。 主要用到和学到的知识点有： 简单的html和css；html5中的canvas; javascript和一点算法； 以
【Web】HTML+ JS+ CSS 的五子棋（简单AI）
新青年1号
09-30 1955
声明 本文是在观看 慕课网channingbreeze 大神的教学视屏时编写的。文中代码非本人原创，只是在学习过程中跟随教学视频略作修改并加上了详细的注释，以便于理解。 原教学视频地址：https://www.imooc.com/video/11639 HTML代码 CSS代码 JS代码 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值