关于#javascript#的问题，请各位专家解答！js五子棋判断五子相连，求请教一下javascript

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

文盲老顾 WEB应用领新星创作者 2023-03-10 22:29

关注

斜判定你自己补吧，我懒得写了，如有帮助，还望采纳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋</title>
    <style>
        .chess {display: block;margin: 50px auto;box-shadow: 5px 5px 5px #b9b9b9, -2px -2px 2px #efefef;cursor: pointer;}
    </style>
</head>
<body>
    <canvas class="chess" style="background:#c99"></canvas>
    <input type="button" value="重新开始">
</body>
<script>
    var chess = document.getElementsByClassName('chess')[0];
    var cxt = chess.getContext("2d");
    // 所有棋子
    let chessArr = [];
    // 棋子对象
    function ches(x, y) {
        this.x = x;
        this.y = y;
    }
    var step = 0; // 记录步数
    //1黑棋 0白棋
    var color = ['black','white']
    var board_width = 19; // 设置棋盘宽度（行列）
    // 每格宽高
    var widthheight = 30;
    // 更改canvas大小
    chess.setAttribute('width',(widthheight * board_width) + 'px')
    chess.setAttribute('height',(widthheight * board_width) + 'px')
    // 生成棋盘二维列表
    var board = (function(w){
        arr = [];
        for (var i = 0; i <w ; i++ ){
            narr = []
            for (var j = 0; j < w ;j++ )
            {
                narr.push('')
            }
            arr.push(narr)
        }
        return arr
    })(board_width)
    //绘制棋盘
    function drawChessBoard() {
        for (var i = 0; i < board_width; i++) {
            cxt.moveTo(widthheight / 2, widthheight / 2 + i * widthheight);
            cxt.lineTo(widthheight * board_width - widthheight / 2, widthheight / 2 + i * widthheight);
            cxt.stroke();
            cxt.moveTo(widthheight / 2 + i * widthheight, widthheight / 2);
            cxt.lineTo(widthheight / 2 + i * widthheight, widthheight * board_width - widthheight / 2);
            cxt.stroke();
        }
    };
    //下棋
    chess.onclick = function (e) {
        var x = e.offsetX;
        var y = e.offsetY;
        let i = Math.floor(x / widthheight);
        let j = Math.floor(y / widthheight);
        // console.log(i, j);
        // 判断该坐标是否已经有棋子
        for (let index = 0; index < chessArr.length; index++) {
            const element = chessArr[index];
            if (element.x == i * widthheight && element.y == j * widthheight) {
                alert('该位置已有棋子');
                return;
            }

        }
        var c = color[step % 2].substring(0,1)
        var chesObj = new ches(i * widthheight, j * widthheight);
        chessArr.push(chesObj);
        board[i][j] = c
        // console.log(board)
        // 针对 board 进行判定
        var isVictor = (function(){
            var c = board[i][j]
            // 判定列
            // 对 i 相同，j相邻，子相同的进行数累加，够5胜利
            var col = {l:j,r:j,n:0}
            while (col.l > 0 && board[i][col.l - 1] == c)
            {
                col.n ++
                col.l --
            }
            while (col.r < board_width && board[i][col.r + 1] == c)
            {
                col.n ++
                col.r ++
            }
            if (col.n > 3) // 即左右有4个相同的子
            {
                alert('游戏结束，' + color[step % 2] + '胜利')
            }
            // 判定行
            // 对 j 相同，i相邻，子相同的进行数累加，够5胜利
            var row = {u:i,d:i,n:0}
            while (row.u > 0 && board[row.u - 1][j] == c)
            {
                row.u --
                row.n ++
            }
            while (row.d < board_width && board[row.d + 1][j] == c)
            {
                row.d ++
                row.n ++
            }
            if (row.n > 3) // 即左右有4个相同的子
            {
                alert('游戏结束，' + color[step % 2] + '胜利')
            }
            // 判定斜
            // 对 i + n,j + n，和i + n,j - n 的相邻子判断
        })(i,j)
        putChess(i,j,step % 2)
        step ++;
    }
    //绘制棋子
    function putChess(i, j, c) {
        cxt.fillStyle = color[c];
        cxt.beginPath();
        cxt.arc(widthheight / 2 + i * widthheight, widthheight / 2 + j * widthheight, widthheight / 2 - 1, 0, 2 * Math.PI);
        cxt.closePath();
        cxt.fill();
    }
    drawChessBoard();


</script>

</html>