优化五子棋小游戏：简化算法与提升用户体验-优快云博客

本文链接：https://blog.youkuaiyun.com/clf20731/article/details/125317549

试玩

试玩网址：http://42.194.221.6:8014/

效果

在这里插入图片描述

html及js

<!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>Document</title>
        <link rel="icon" href="./img/chess.ico" />
        <link rel="stylesheet" href="./css/index.css" type="text/css" />
    </head>

    <body>
        <div class="container">
            <h2>五子棋小游戏</h2>
            <div class="panel">
                <div class="chess_board">
                    <div class="board">
                        <!-- <div class="chess white_chess"></div>
                        <div class="chess black_chess"></div> -->
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        var i = 0;
        var chessArray = new Array();
        var playing = true;
        // 初始化棋盘数组
        for (let j = 0; j < 19; j++) {
            chessArray[j] = new Array();
            for (let z = 0; z < 19; z++) {
                chessArray[j][z] = -1;
            }
        }
        const board = document.querySelector('.board');
        board.onclick = function (event) {
            if (!playing) {
                alert('游戏已经结束，请重新开始');
                return;
            }
            let x = Math.round(event.offsetX / 30);
            let y = Math.round(event.offsetY / 30);
            console.log(x, y);
            if (event.target.className !== 'board' || chessArray[x][y] !== -1) return;
            chessArray[x][y] = i % 2;
            var divEle = document.createElement('div');
            if (i % 2 === 0) {
                divEle.className = "chess white_chess";
            } else {
                divEle.className = "chess black_chess";
            }
            board.appendChild(divEle);
            divEle.style.left = x * 30 - 15 + "px";
            divEle.style.top = y * 30 - 15 + "px";
            i += 1;
            if (i > 8) {
                checkWin(x, y);
            }
        }
        // 检查是否获胜
        function checkWin(x, y) {
            let count = 1;
            let chess = (i - 1) % 2;
            let jmin = x - 4 < 0 ? 0 : x - 4;
            let zmin = y - 4 < 0 ? 0 : y - 4;
            let jmax = x + 4 > 18 ? 18 : x + 4;
            let zmax = y + 4 > 18 ? 18 : y + 4;
            // 竖向判断
            for (let j = zmin; j <= zmax; j++) {
                if (chessArray[x][j] === chess) {
                    count += 1;
                    if (count === 5) {
                        playing = false;
                        if (chess === 0) {
                            alert('游戏结束,白棋取得胜利');
                            return;
                        } else {
                            alert('游戏结束，黑棋子取得胜利');
                            return;
                        }
                    }
                } else {
                    count = 0;
                }
            }
            // 横向判断
            count = 0;
            for (let z = jmin; z <= jmax; z++) {
                if (chessArray[z][y] === chess) {
                    count += 1;
                    if (count === 5) {
                        playing = false;
                        if (chess === 0) {
                            alert('游戏结束,白棋取得胜利');
                            return;
                        } else {
                            alert('游戏结束，黑棋子取得胜利');
                            return;
                        }
                    }
                } else {
                    count = 0;
                }
            }
            // 主对角线判断
            count = 0;
            if (x > y) {
                let mius = x - y;
                let ymin = y - 4 <= 0 ? 0 : y - 4;
                let xmin = ymin + mius;
                let xmax = x + 4 >= 18 ? 18 : x + 4;
                let ymax = xmax - mius;
                for (let j = xmin; j <= xmax; j++) {
                    if (chessArray[j][j - mius] === chess) {
                        count += 1;
                        if (count === 5) {
                            playing = false;
                            if (chess === 0) {
                                alert('游戏结束,白棋取得胜利');
                                return;
                            } else {
                                alert('游戏结束，黑棋子取得胜利');
                                return;
                            }
                        }
                    } else {
                        count = 0;
                    }
                }
            } else {
                let mius = y - x;
                let xmin = x - 4 <= 0 ? 0 : x - 4;
                let ymin = xmin + mius;
                let ymax = y + 4 >= 18 ? 18 : y + 4;
                let xmax = ymax - mius;
                for (let j = xmin; j <= xmax; j++) {
                    if (chessArray[j][j + mius] === chess) {
                        count += 1;
                        if (count === 5) {
                            playing = false;
                            if (chess === 0) {
                                alert('游戏结束,白棋取得胜利');
                                return;
                            } else {
                                alert('游戏结束，黑棋子取得胜利');
                                return;
                            }
                        }
                    } else {
                        count = 0;
                    }
                }
            }
            // 副对角线判断
            count = 0;
            let total = x + y;
            if (x > y) {
                let xmax = x + 4 > 18 ? 18 : x + 4;
                let ymin = total - xmax;
                let xmin = x - 4 < 0 ? 0 : x - 4;
                for (let j = xmin; j <= xmax; j++) {
                    if (chessArray[j][total - j] === chess) {
                        count += 1;
                        if (count === 5) {
                            playing = false;
                            if (chess === 0) {
                                alert('游戏结束,白棋取得胜利');
                                return;
                            } else {
                                alert('游戏结束，黑棋子取得胜利');
                                return;
                            }
                        }
                    } else {
                        count = 0;
                    }

                }
            } else {
                // let ymax = y + 4 > 18 ? 18 : y + 4;
                // let xmin = total - ymax;
                // let ymin = x - 4 < 0 ? 0 : x - 4;
                // let xmax = total - ymin;

                let xmin = x - 4 < 0 ? 0 : x - 4;
                let ymax = total - xmin;
                let xmax = x + 4 > total ? total : x + 4;
                let ymin = total - xmax;
                for (let j = xmin; j <= xmax; j++) {
                    // var divEle = document.createElement('div');
                    // divEle.className = "chess red_chess";
                    // board.appendChild(divEle);
                    // divEle.style.left = j * 30 - 15 + "px";
                    // divEle.style.top = (total - j) * 30 - 15 + "px";
                    if (chessArray[j][total - j] === chess) {
                        count += 1;
                        if (count === 5) {
                            playing = false;
                            if (chess === 0) {
                                alert('游戏结束,白棋取得胜利');
                                return;
                            } else {
                                alert('游戏结束，黑棋子取得胜利');
                                return;
                            }
                        }
                    } else {
                        count = 0;
                    }

                }
            }
        }
    </script>

</html>

css

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#root{
    font-size: 15px;
}
.container{
    display:flex;
    flex-direction: column;
    align-items:center;
}
.container h2{
    margin:20px 0;
}
.panel{
    width:600px;
    height:600px;
    border: 3px solid #000;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
}
.chess_board{
    width:540px;
    height:540px;
    border: 2px solid #000;
}
.chess_board .board{
    width:100%;
    height:100%;
    background-size: 30px 30px;
    background-image: linear-gradient(90deg,rgba(0, 0, 0, 1) 1%,
    rgba(0, 0, 0, 0) 5%),linear-gradient(rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 5%);
    position:relative;
}
.chess_board .board .chess{
    position:absolute;
    width: 30px;
    height:30px;
    border: 1px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
}
.chess_board .board .white_chess{
    background-color: #fff;
}
.chess_board .board .black_chess{
    background-color: #000;
}