五子棋AI算法简易实现（二）

最新推荐文章于 2024-02-21 10:24:17 发布

ZTao-z

最新推荐文章于 2024-02-21 10:24:17 发布

阅读量946

点赞数

分类专栏：五子棋AI实现文章标签：五子棋AI javascript

本文链接：https://blog.csdn.net/think_A_lot/article/details/79458344

版权

五子棋AI实现专栏收录该内容

7 篇文章 3 订阅

订阅专栏

基础篇

（2）用户交互

这一部分主要是实现交互功能，实现人和AI的对弈
这个应用是单网页的应用，因此只要使用浏览器打开这个网页即可

HTML部分（CSS部分省略，有兴趣可以到我的GitHub上查看）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>五子棋</title>
        <link rel="stylesheet" href="../css/style.css">
        <script type="text/javascript" src="../js/jquery.js"></script>
    </head>
    <body>
        <div id="chessBoard">
            <div id="chessPositioner"></div>
        </div>

        <ol id="record"></ol>

        <script type="text/javascript" src="../js/basic.js"></script>
        <script type="text/javascript" src="../js/evaluate.js"></script>
        <script type="text/javascript" src="../js/AI.js"></script>
        <script type="text/javascript" src="../js/AIController.js"></script>
        <script type="text/javascript" src="../js/winnercheck.js"></script>
    </body>
</html>

JS部分：

（1）全局变量模块

var list = document.getElementsByClassName('chess');
//棋盘
var map;
//当前执子的颜色
var black_or_white = "black"; 
//游戏结束的判定
var is_win = false;
//游戏模式(PVP || PVE)，默认PVE
var mode = "PvE";
//下棋位置记录
var chessRecord = [];
//难度设置（4-6）
var difficultLevel = 6;

（2）网页元素生成模块

//生成元素
var createMap = function() {
    map = new Array();
    for( var i = 0; i < 15; i++){
        map[i] = new Array();
        for( var j = 0; j < 15; j++){
            map[i][j] = 'e'; //'e'表示empty，即当前位置没有棋子
        }
    }
}

var chessPlace = function() {
    for( var i = 0; i < 15; i++) 
        for( var j = 0; j < 15; j++)
            placeChessPos(15+30*j, 15+30*i);
}

var placeChessPos = function(left, top) {
    var chessContainer = document.createElement("div");
    chessContainer.id = (left-15)/30 + (top-15)/30*15 + "";
    chessContainer.style.left = left + "px";
    chessContainer.style.top = top + "px";
    chessContainer.classList.add("chess");
    chessContainer.setAttribute("check", false);
    document.getElementById('chessPositioner').appendChild(chessContainer);
}

var createRecord = function(color, num) {
    var record = document.createElement("li");
    if(num != -1)
        record.textContent = color + "  :  " + ((num-num%15)/15+1) + "," + (num%15+1);
    else
        record.textContent = color + " win!";
    document.getElementById('record').appendChild(record);
}

（3）游戏模式控制模块

var playMode = {
    "PvP": {
        "player1": true,
        "player2": false
    },
    /*“PVE模式默认电脑先手，若想改为人先手，可改为
        "PvE": {
            "computer": true,
            "human": false
        }
        然后将window.onload函数中的标注部分语句注释
    */
    "PvE": {
        "computer": false,
        "human": true
    }
};

var playModeController = function(Mode, color) {
    var playingMode;
    color = color == "black" ? 1 : 0;
    if(Mode === "PvP"){
        playingMode = playMode.PvP;
        playingMode.player1 = !playingMode.player1;
        playingMode.player2 = !playingMode.player2;
    }
    if(Mode === "PvE"){
        playingMode = playMode.PvE;
        if(playingMode.human && !playingMode.computer){
            playingMode.human = !playingMode.human;
            playingMode.computer = !playingMode.computer;
            return;
        }
        if(playingMode.computer && !playingMode.human){
            var point = FunctionMaxMin(map, Math.abs(color-1), difficultLevel);
            console.log(point);
            playingMode.human = !playingMode.human;
            playingMode.computer = !playingMode.computer;
            robotClick(point);
        }
    }
};

//机器人下棋函数
var robotClick = function(point) {
    var p = (point[0]-1)*15 + (point[1]-1);
    var id = "#" + p;
    $(id).click();
};

（4）鼠标点击操作控制模块

//操作部分
window.onload = function() {
    chessPlace();
    createMap();
    for( var i = 0; i < list.length; i++){
        list[i].onclick = operate;
    }
    is_win = false;
    //'PVE'模式下，若想人先手，将下面的代码注释
    if(mode == "PvE")
        $("#112").click(); //默认初始下子位置[8,8]，黑棋
}

var operate = function() {
    //alert($(this).attr("check"));
    var num = parseInt($(this).attr("id"));

    if($(this).attr("check") === "true" || is_win)
        return;
    chessRecord.push(num); //记录当前下棋位置
    $(this).attr("check", true);

    if(black_or_white == "black"){
        createRecord("black", ModuleWinnerCheck.checkWinner(1, num));
        $("#"+chessRecord[chessRecord.length-2]).removeClass('active');
        $(this).addClass("blackChess").addClass("active");
        black_or_white = "white";
        $("#record").scrollTop(document.getElementById('record').scrollHeight);
        setTimeout('playModeController(mode, "black")', 500); //当前颜色
        return;
    }
    else{
        createRecord("white", ModuleWinnerCheck.checkWinner(0, num));
        $("#"+chessRecord[chessRecord.length-2]).removeClass('active');
        $(this).addClass("whiteChess").addClass("active");
        black_or_white = "black";
        $("#record").scrollTop(document.getElementById('record').scrollHeight);
        setTimeout('playModeController(mode, "white")', 500);
        return;
    }
}

综述

这一部分主要是实现人与人或者人与电脑AI轮流下棋的逻辑，主要是方便以后AI逻辑实现效果的测试，游戏界面相对比较简陋，只实现了基本的功能，没有实现悔棋等功能，以后会慢慢补上。这部分代码逻辑相对比较简单，因此我将不再过多地进行解释。

项目地址：https://github.com/huangzhutao/Gomoku.git

ZTao-z

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
五子棋AI算法简易实现（二）

基础篇（2）用户交互这一部分主要是实现交互功能，实现人和AI的对弈这个应用是单网页的应用，因此只要使用浏览器打开这个网页即可HTML部分（CSS部分省略，有兴趣可以到我的GitHub上查看）：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="ut...
复制链接

扫一扫