五子棋

起床了
50 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情

页面布局：

        <div class="divs">
    <P>恭喜白棋赢得胜利，获得宝马一辆</P>
    <img src="./image/QQ图片20220607191156.jpg" alt="" class="imgs">
</div>
<div class="divs1">
    <P>恭喜黑棋赢得胜利，获得宝马一辆</P>
    <img src="./image/QQ图片20220607191156.jpg" alt="" class="imgs">
</div>
<div class="box_top">
    <div class="box_top_btn">
        <!-- 开始按钮 -->
        <button class="beginGameBth" id="beginGameBth" onclick="beginGameBth()"></button>
        <!-- 重新开始 -->
        <button class="restarGameBth" id="restarGameBth" onclick="restarGameBth()"></button>
    </div>
    <!-- 定义一个棋子，白棋先走 -->
    <div class="before_qz">
        执子方：
        <div class="before_qz_on" id="before_qz_on">白棋</div>
    </div>

</div>
<div class="box_down">
    <div class="box_down_tb">
        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>

页面样式：

            <style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 800px;
    }

    .box_top_btn {
        margin: 20px auto;
        width: 200px;
    }

    .box_top_btn #beginGameBth {
        background-image: url(./image/微信图片_20220606111550.jpg);
        width: 100px;
        height: 30px;
        background-size: cover;
        float: left;
    }

    .box_top_btn #restarGameBth {
        background-image: url(./image/微信图片_20220606111517.jpg);
        width: 100px;
        height: 30px;
        background-size: cover;
        /* float: right; */
    }

    .box_top>.before_qz {
        margin: 0 auto;
        width: 150px;
    }

    .box_down_tb {
        margin: 0 auto;
        width: 600px;
    }

    table {
        width: 600px;
        height: 600px;
        border: 1px solid black;
        border-collapse: collapse;
    }

    td {
        width: 50px;
        height: 50px;
        border: 1px solid black;
    }

    .divs,
    .divs1 {
        border: 1px solid black;
        width: 300px;
        position: absolute;
        display: none;
        top: 350px;
        left: 730px;
        text-align: center;
    }

    .imgs {
        width: 200px;
    }
</style>

js

<script>

    let divs = document.querySelector(".divs")
    let divs1 = document.querySelector(".divs1")

定义执子方，如果是1是白棋 0 黑棋

    let presentChess = 1
    //开始游戏，0没有开始
    let beginFlag = 0
    //执子方
    let before_qz_on;

数组记录下棋棋盘的情况

    let chessboard = new Array(10)

遍历获取每个单元格

    for (var i = 0; i < 10; i++) {
        chessboard[i] = new Array(10)
        // 初始化下棋的状态为-1，则是没有开始
        for (var j = 0; j < 10; j++) {
            chessboard[i][j] = -1
        }
    }

重新开始

    function restarGameBth() {
        //遍历让单元格清空
        for (var i = 0; i < 100; i++) {
            document.getElementsByTagName("td")[i].innerHTML = ""
        }
        //清除期盼的记录
        for (var i = 0; i < 10; i++) {
            for (var j = 0; j < 10; j++) {
                chessboard[i][j] = -1
            }
        }
    }

开始按钮游戏

    function beginGameBth() {
       //绑定棋盘格的点击事件
        for (var i = 0; i < 100; i++) {
            document.getElementsByTagName("td")[i].onclick = playChess
        }
    }

获取执子方

    before_qz_on = document.getElementById("before_qz_on")
    // 点击开始按钮后，开始下棋
    function playChess() {
        //先判断单元格是否为空，如果是则下棋，否则不操作
        let text = this.innerHTML
        if (text != "") {
            return
        }

放棋子图片

        let bqstr = '<img src="./image/微信图片_20220606111457.jpg" width="100%" height="100%">'
        let hqstr = '<img src="./image/微信图片_20220606111523.jpg" width="100%" height="100%">'

        // let bqstr = '<span>八嘎</span>'
        // let hqstr = '<span>拜登</span>'

1是白棋 0是黑棋

        if (presentChess == 1) {
            this.innerHTML = bqstr
            // rowIndex 返回表格中行的序号（只读）
            // cellIndex 返回单元格在行中的位置（只读）
            // 点击后获取棋子在数组中的位置
            chessboard[this.parentNode.rowIndex][this.cellIndex] = 1
            if (ifWin(this.parentNode.rowIndex, this.cellIndex)) {
                if (presentChess == 1) {

                    let tds = document.getElementsByTagName("td")
                    for (let i in tds) {
                        tds[i].innerHTML = ""
                    }
                    restarGameBth()
                    divs.style.display = "block"
                   setTimeout(function(){
                    divs.style.display = "none"
                   },1000)
                    // alert("白棋赢")
                } else {
                    alert("黑棋获胜")
                }
            }
            presentChess = 0
            before_qz_on.innerHTML = "黑棋"
        } else {
            this.innerHTML = hqstr
            chessboard[this.parentNode.rowIndex][this.cellIndex] = 0
            if (ifWin(this.parentNode.rowIndex, this.cellIndex)) {
                if (presentChess == 0) {
                    let tds = document.getElementsByTagName("td")
                    for (let i in tds) {
                        tds[i].innerHTML = ""
                    }
                    restarGameBth()
                    divs1.style.display = "block"
                
                   setTimeout(function(){
                    divs1.style.display = "none"
                   },1000)
                    // alert("黑棋获胜")
                } else {
                    alert("白棋获胜")
                }
            }
            presentChess = 1
            before_qz_on.innerHTML = "白棋"
        }
    }

判断是否胜利，h(行)，l(列)

    function ifWin(h, l) {
        //s表示棋子相连的个数
        let s = 1;

初步判断有四条轴可以赢，上下左右

每条轴上加上下的棋子可以有九个棋子

当我们某种颜色棋子连续达到五个可以赢

4条轴上每个点的坐标是x,y 以我们下的棋子为中心，左上方的坐标为(x-1,y-1),右下角坐标(x+1,y+1) 所以说每个方向都是x,y 和1，-1，0，两两搭配

        // 竖直方向
        //判断棋子上方链接的数量
        for (var i = 1; i <= (h > 4 ? 4 : h); i++) {
            if (chessboard[h - i][l] == presentChess) {
                s++
            } else {
                break;
            }
        }

判断棋子下方链接的数量

        for (var i = 1; i <= (9 - h > 4 ? 4 : 9 - h); i++) {
            if (chessboard[h + i][l] == presentChess) {
                s++
            } else {
                break;
            }
        }
        if (s >= 5) {
            return 1;
        }

判断水平方向

        s = 1;
        for (var i = 1; i <= (l > 4 ? 4 : l); i++) {
            if (chessboard[h][l - i] == presentChess) {
                s++
            } else {
                break
            }
        }
        for (var i = 1; i <= (9 - l > 4 ? 4 : 9 - l); i++) {
            if (chessboard[h][l + i] == presentChess) {
                s++
            } else {
                break
            }
        }
        if (s >= 5) {
            return 1
        }

左上到右下斜线方向

        s = 1
        //封装返回最小值
        function min(x, y, z) {
            return (x > y ? y : x) > z ? z : (x > y ? y : x)
        }

左上角连续的棋子数

        //一般可以指考虑较小的那个棋子半径
        // min取值，最小值如果是0，则元素没有左上角，就不执行
        for (var i = 1; i <= min(4, l, h); i++) {
            if (chessboard[h - i][l - i] == presentChess) {
                s++
            } else {
                break
            }
        }

右下角连续的棋子数

        for (var i = 1; i <= min(4, 9 - l, 9 - h); i++) {
            if (chessboard[h + i][l + i] == presentChess) {
                s++
            } else {
                break
            }
        }
        if (s >= 5) {
            return 1
        }

        // 右上到左下
        s = 1
        for (vari = 1; i <= min(4, 9 - l, h); i++) {
            if (chessboard[h - i][l + i] == presentChess) {
                s++
            } else {
                break;
            }
        }
        for (var i = 1; i <= min(4, l, 9 - h); i++) {
            if (chessboard[h + i][l - i] == presentChess) {
                s++
            } else {
                break
            }
        }
        if (s >= 5) {
            return 1
        }
        return 0
    }
</script>

QQ截图20220625170312.png 当棋子连在一起可以提示，并且所有棋子消失 QQ截图20220625170323.png

avatar
文章
阅读
粉丝