js实现五子棋游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：js实现五子棋游戏代码，可开启调试模式
代码标签：游戏
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
        margin: 0px;
        padding: 0px;
    }
    #chess {
        position: relative;
        width: 762px;
        height: 762px;
        margin: 50px auto 0px auto;
        background-image: url("//repo.bfw.wiki/bfwrepo/images/game/wuziqi/timg.jpg");
        background-size: 100% 100%;
    }
    
    .grid {
        width: 50px;
        height: 50px;
        position: absolute;
        padding: 5px;
        box-sizing: border-box;
        border-radius: 25px;
        background-origin: content-box;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        line-height: 50px;
        text-align: center;
        color: aqua;
    }
    </style>
</head>

<body>
    <div id="chess"></div>

<script>
    var chess;//棋盘对象
var grid;//二维数组，记录棋盘点是否有棋子，什么棋子
var chessWidth = 15;//棋盘格数
var count = 0;//棋子数，根据棋子数判定当前该是白棋还是黑棋
var block = false;//点击时间锁
var AI = false;//AI开关
function createGrid(x, y) {//创建棋盘节点div
    var temp = document.createElement("div");
    temp.classList.add("grid");
    temp.style.left = (7 + x * 50) + "px";
    temp.style.top = (7 + y * 50) + "px";
    temp.x = x;
    temp.y = y;
    temp.value = 0;//0为空位，1为黑子，2为白子
    return temp;
}
function checkLine(x, y) {//检查是否横向，纵向，斜上，斜下构成五子
    var result1 = 3, result2 = 3, result3 = 3, result4 = 3;
    for (var i = 0; i < 5; i++) {
        // 按位与
        result1 &= y + i > 14 ? 0 : grid[x][y + i].value;//判断横向五子
        result2 &= x + i > 14 ? 0 : grid[x + i][y].value;//判断纵向五子
        result3 &= x + i > 14 || y - i < 0 ? 0 : grid[x + i][y - i].value;//判断斜上五子
        result4 &= x + i > 14 || y + i > 14 ? 0 : grid[x + i][y + i].value;//判断斜下五子
    }
    // 按位或
    return result1 | result2 | result3 | result4;
}
function checkFinish() {//检查是否有获胜的一方
    for (var i = 0; i < grid.length; i++) {
        for (var j = 0; j < grid[i].length; j++) {
            if (grid[i][j].value == 0) {
                continue;
            }
            var result = checkLine(i, j);
            if (result > 0) {
                return result;
            }
        }
    }
    return 0;
}
function init() {//初始化方法
    grid = new Array(chessWidth);
    for (var i = 0; i < grid.length; i++) {//初始化二维棋盘
        grid[i] = new Array(chessWidth);
        for (var j = 0; j < grid[i].length; j++) {
            // 创建dom节点
            grid[i][j] = createGrid(j, i);
            grid[i][j].onclick = function () {//棋盘节点点击事件
                if (this.value > 0 || block) {//被锁住时或者已有棋子时直接return
                    return;
                }
                block = true;//开启锁
                this.style.backgroundImage = "url('//repo.bfw.wiki/bfwrepo/images/game/wuziqi/" + (count % 2 + 1) + ".png')";//将节点背景更换，根据count计算当前时白子还是黑子。
                this.value = count % 2 + 1;//设置节点的value
                count += 1;//棋盘棋子数+1
                var result = checkFinish();//检查是否结束
                // console.log(result);
                if (result == 0) {//没结束
                    if (AI && count % 2 == 1) {//判断是否有AI
                        block = false;//关闭锁
                        aiAction();//AI落子
                    }
                    block = false;//关闭锁
                } else {//结束了
                    setTimeout(function () {
                        alert(result == 1 ? "黑棋胜" : "白棋胜");//弹出获胜方
                    }, 200);
                }
            }
            chess.appendChild(grid[i][j]);
        }
    }
}
window.onload = function () {
    chess = document.getElementById("chess");
    init();
}
</script>
<script>
    AI = true;
var debug = false;

function analysisScore(arr) {
    var greater3 = 0;
    var equal3 = 0;
    var greater2 = 0;
    var equal2 = 0;
    var greater1 = 0;
    var equal1 = 0;
    for (var i = 0 ; i < arr.length ; i ++) {
        if (arr[i] >= 4) {
            return 100;
        }
        if (arr[i] > 3) {
            greater3 += 1;
        } else if (arr[i] == 3) {
            equal3 += 1;
        } else if (arr[i] > 2) {
            greater2 += 1;
        } else if (arr[i] == 2) {
            equal2 += 1;
        } else if (arr[i] > 1) {
            greater1 += 1;
        } else if (arr[i] == 1) {
            equal1 += 1;
        }
    }
    if (greater3 + equal3 > 1) {//双四
        return 95;
    }
    if (greater3 > 0) {//活四
        return 90;
    }
    if (equal3 > 0 && greater2 > 0) {//四三，下一手上活四
        return 85;
    }
    if (greater2 > 1) {//双三
        return 80;
    }
    if (equal3 > 0) {//冲四
        return 60;
    }
    if (greater2 > 0 && equal2 > 0) {//活三 + 眠三
        return 50;
    }
    if (greater2 > 0 && greater1 > 0) {//活三，可继续连招
        return 30;
    }
    if (greater2 > 0) {//活三
        return 25;
    }
    if (greater1 > 1) {//活二
        return 20;
    }
    if (greater1 > 0) {//活二
        return 15;
    }
    if (equal2 > 1) {//多眠三
        return 10;
    }
    if (equal2 > 0) {//眠三
        return 5;
    }
    if (equal1 > 1) {//绝地
        return -1;
    }
    if (equal1 > 0) {//勉强连着
        return 1;
    }
    return 0;
}

function getRealScore(leftRow, leftCol, rightRow, rightCol, val) {
    if (leftRow < 0 || leftRow > 14 || leftCol < 0 || leftCol > 14 || rightRow < 0 || rightRow > 14 || rightCol < 0 || rightCol > 14) {
        return false;
    }
    if ((grid[leftRow][leftCol].value == 0 || grid[leftRow][leftCol].value == val) && (grid[rightRow][rightCol].value == 0 || grid[rightRow][rightCol].value == val)) {
        return true;
    } else {
        return false;
    }
}

function getScore(arr, val) {
    var result = 0;
    for (var i = 0 ; i < arr.length ; i ++) {
        if (arr[i].value == 0) {
            continue;
        } else if (arr[i].value == val) {
            result += 1;
        } else {
            return 0;
        }
    }
    return result;
}

function analysisObliUpLine(row ,col, val) {//斜上方向分析
    var maxScore = 0;
    for (var i = 0 ; i < 5 ; i ++) {
        if (row + 4 - i > 14 || row + 4 - i < 4 || col - 4 + i < 0 || col - 4 + i > 10) {
            continue;
        }
        var arr = [];
        for (var j = 0 ; j < 5 ; j ++) {
            arr.push(grid[row + 4 - i - j][col - 4 + i + j]);
        }
        var score = getScore(arr, val);
        var realPower = getRealScore(row + 5 - i, col - 5 + i, row - i + 1, col + i + 1, val);
        var total = score * (realPower ? 1.1 : 1);
        maxScore = maxScore > total ? maxScore : total;
    }
    return maxScore;
}

function analysisObliDownLine(row ,col, val) {//斜下方向分析
    var maxScore = 0;
    for (var i = 0 ; i < 5 ; i ++) {
        if (row - i + 4 > 14 || row - i < 0 || col - i + 4 > 14 || col.........完整代码请登录后点击上方下载按钮下载查看