前端实现五子棋小游戏2（AI实现人机对战）

最新推荐文章于 2024-05-13 16:07:00 发布

Gib Gas!

最新推荐文章于 2024-05-13 16:07:00 发布

阅读量9.7k

点赞数 4

分类专栏：前端学习文章标签： js canvas html css

本文链接：https://blog.csdn.net/weixin_44584059/article/details/108184625

版权

前端学习专栏收录该内容

60 篇文章 2 订阅

订阅专栏

通过一个简单的算法，来实现AI智能对弈的五子棋小游戏

AI难点解析
代码实现
整体代码

AI难点解析

赢法数组

三维数组，前两维是棋盘，第三维是赢法数组；每一种赢法对应一个二维棋盘，上面或许只有5个点是true，这5个点一定连成一条线

赢法的统计数组

是个一维数组，主要统计每一种赢法的实现程度，如5个为true的点，此时黑棋落下两个点，此时该数组会有A3=2这样一个记录。

判断胜负

基于赢法的统计数组而定

计算机的落子规则

基于赢法的统计数组而定

代码实现

赢法数组

// 赢法数组，保存五子棋所有赢法

var wins = [];
for (var i = 0; i < 15; i++) {
    wins[i] = [];
    for (j = 0; j < 15; j++) {
        wins[i][j] = [];
    }
}

赢法种类的索引

横线赢法

k循环代表赢法种类，k=0为第0种赢法；
wins[i][j + k]在棋盘上连成一条线；
比如 i=0 j=0 count=0时:
wins[0][0][0]=true;
wins[0][1][0]=true;
wins[0][2][0]=true;
wins[0][3][0]=true;
wins[0][4][0]=true;
此时00 01 02 03 04五个为ture的点连成一条线，代表第一种赢法
即count=0时:wins[][][0]=true,为第1种赢法，则可能是
在这里插入图片描述

count=1时:wins[][][1]=true,为第2种赢法，则可能是

在这里插入图片描述

// 赢法种类的索引
var count = 0;
for (var i = 0; i < 15; i++) {
    for (j = 0; j < 11; j++) {
        for (k = 0; j < 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 < 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 < 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++;
    }
}

打印count赢法统计，显示得共有572种赢法
在这里插入图片描述

赢法的统计数组

// 赢法的统计数组
var myWin = [];
var computerWin = [];

//onclick落子的时候加入
  if (over) {
        return;
    }
for (var k = 0; k < count; k++) {
            if (wins[i][j][k]) {
                // 黑棋落子
                myWin[k]++;
                // 则给AI设置一个离赢更远的异常值6,表示电脑不能再赢了
                computerWin[k] = 6;
                if (myWin[k] == 5) {
                    // 5颗都被黑棋占领，则赢法实现，黑棋赢了
                    window.alert("你赢啦");
                    over = ture;
                }
            }
        }
    }

定义函数computerAI（）实现电脑对弈

遍历棋盘与所有赢法，对黑棋/白棋落子行为进行加分

for (var i = 0; i < 15; i++) {
            for (var j = 0; j < 15; j++) {
                // 遍历完棋盘后开始判断是否已经落子，落子后遍历所有赢法，判断黑棋白棋，进行加分，若出现多种赢法，则分数要进行累加
                if (chessBoard[i][j] == 0) {
                    for (var k = 0; k < count; k++) {
                        if (wins[i][j][k]) {
                            // 自己
                            if (myWin[k] == 1) {
                                // 黑棋实现1颗子加分
                                myScore[i][j] += 200;
                            } else if (myWin[k] == 2) {
                                // 黑棋实现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) {
                                // 白棋实现1颗子加分
                                computerScore[i][j] += 220;
                            } else if (computerWin[k] == 2) {
                                // 白棋实现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 = myScore[i][j];
                        u = i;
                        v = j;
                    } else if (computerScore[i][j] == max) {
                        if (myScore[i][j] > myScore[u][v]) {
                            u = i;
                            v = j;
                        }
                    }
 // 给计算机落子并标记
    oneStep(u, v, false);
    chessBoard[u][v] = 2;
    for (var k = 0; k < count; k++) {
        if (wins[u][v][k]) {
            // 有子
            computerWin[k]++;
            // 则给选手设置一个离赢更远的异常值6,表示选手不能再赢了
            myWin[k] = 6;
            if (computerWin[k] == 5) {
                // 5颗都被黑棋占领，则赢法实现，黑棋赢了
                window.alert("你输啦");
                over = ture;
            }
        }
    }
    if (!over) {
        // 交替颜色
        me = !me;
    }

整体代码

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋小游戏</title>
    <link rel="stylesheet" type="text/css" href="./css/css.css">
</head>

<body>
    <canvas id="chess" width="450px" height="450px"></canvas>

    <script type="text/javascript" src="./js/script.js"></script>
</body>

</html>

CSS

canvas{
    display: block;
    margin:50px auto;
    box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #bb99bb;
}

script.js

// 轮流下棋
var me = true;
var over = false;
// 赢法数组，保存五子棋所有赢法
var wins = [];
// 赢法的统计数组
var myWin = [];
var computerWin = [];
// 二维数组存储落子情况，不可重复落子
var chessBoard = [];
for (var i = 0; i < 15; i++) {
    chessBoard[i] = [];
    for (j = 0; j < 15; j++) {
        // 0为没有落子
        chessBoard[i][j] = 0;
    }
}
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[j + k][i][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[i][j + k][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++;
    }
}
console.log(count);

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

var chess = document.getElementById('chess');
var context = chess.getContext('2d');
// 变颜色
context.strokeStyle = "#BFBFBF";
// 画背景图
var logo = new Image();
logo.src = "./img/logo.jpg";
// 图片加载完之后调用方法才能显示
logo.onload = function () {
    context.drawImage(logo, 0, 0, 450, 450);
    drawChessBoard();
}

var drawChessBoard = function () {
    //画布是450*450  15个交叉点，14个间隔 每个间隔30像素两边留白15像素
    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();
    }
}
// ij是棋盘索引 me是白棋黑棋
var oneStep = function (i, j, me) {
    // 画棋子、画圆context.beginPath() context.closePath();
    context.beginPath();
    // arc画扇形 参数，起始位置 半径13 扇形弧度 0 2π
    context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
    // stroke描边
    context.stroke();
    context.closePath();
    // 设置黑子渐变 createRadialGradient参数 第一个圆原线性坐标 半径13 和第二个圆  黑旗颜色0A0A0A黑色
    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();
}
// 落棋设置
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);
    // 判断不可重复落子
    if (chessBoard[i][j] == 0) {
        oneStep(i, j, me);
        // 黑棋为1，白棋为2
        chessBoard[i][j] = 1;
        for (var k = 0; k < count; k++) {
            if (wins[i][j][k]) {
                // 黑棋落子
                myWin[k]++;
                // 则给AI设置一个离赢更远的异常值6,表示电脑不能再赢了
                computerWin[k] = 6;
                if (myWin[k] == 5) {
                    // 5颗都被黑棋占领，则赢法实现，黑棋赢了
                    window.alert("你赢啦");
                    over = ture;
                }
            }
        }
        if (!over) {
            // 交替颜色
            me = !me;
            // 实现计算机函数
            computerAI();
        }
    }

}
var computerAI = function () {
    var myScore = [];
    var computerScore = [];
    // 保存最高分数和其坐标
    var max = 0;
    var u = 0;
    var v = 0;
    for (var i = 0; i < 15; i++) {
        myScore[i] = [];
        computerScore[i] = [];
        for (var j = 0; j < 15; j++) {
            myScore[i] = [];
            computerScore[i] = [];
        }
    }
    for (var i = 0; i < 15; i++) {
        for (var j = 0; j < 15; j++) {
            // 遍历完棋盘后开始判断是否已经落子，落子后遍历所有赢法，判断黑棋白棋，进行加分，若出现多种赢法，则分数要进行累加
            if (chessBoard[i][j] == 0) {
                for (var k = 0; k < count; k++) {
                    if (wins[i][j][k]) {
                        // 自己
                        if (myWin[k] == 1) {
                            // 黑棋实现1颗子加分
                            myScore[i][j] += 200;
                        } else if (myWin[k] == 2) {
                            // 黑棋实现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) {
                            // 白棋实现1颗子加分
                            computerScore[i][j] += 220;
                        } else if (computerWin[k] == 2) {
                            // 白棋实现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;
                    }
                }

            }
        }
    }
    // 给计算机落子并标记
    oneStep(u, v, false);
    chessBoard[u][v] = 2;
    for (var k = 0; k < count; k++) {
        if (wins[u][v][k]) {
            // 有子
            computerWin[k]++;
            // 则给选手设置一个离赢更远的异常值6,表示选手不能再赢了
            myWin[k] = 6;
            if (computerWin[k] == 5) {
                // 5颗都被黑棋占领，则赢法实现，黑棋赢了
                window.alert("你输啦");
                over = ture;
            }
        }
    }
    if (!over) {
        // 交替颜色
        me = !me;
    }
}


// 对角线
// context.moveTo(0, 0);
// context.lineTo(450, 450);
// context.stroke();

Gib Gas!

关注

4
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
前端实现五子棋小游戏2（AI实现人机对战）

通过一个简单的算法，来实现AI智能对弈的五子棋小游戏AI难点解析赢法数组赢法的统计数组判断胜负计算机的落子规则代码实现赢法数组赢法种类的索引横线赢法竖线赢法横线赢法斜线赢法反斜线赢法赢法的统计数组定义函数computerAI（）实现电脑对弈遍历棋盘与所有赢法，对黑棋/白棋落子行为进行加分记录并选出最高分数，即为获胜整体代码htmlCSSscript.jsAI难点解析赢法数组三维数组，前两维是棋盘，第三维是赢法数组；每一种赢法对应一个二维棋盘，上面或许只有5个点是true，这5个点一定连成一条线赢法的
复制链接

扫一扫