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

js实现五子棋游戏代码

代码语言：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 .........完整代码请登录后点击上方下载按钮下载查看