JS五子棋游戏

最新推荐文章于 2024-06-27 10:26:13 发布

恬歆羽

最新推荐文章于 2024-06-27 10:26:13 发布

阅读量256

点赞数 1

分类专栏： HTML CSS js 文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_45921597/article/details/127288739

版权

js 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

CSS

17 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

效果如图：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            padding-top: 100px;

        }

        .main {
            width: 600px;
            height: 600px;
            margin: 0 auto;
            background-color: burlywood;
        }

        .col {
            position: relative;

            width: 40px;
            height: 40px;
            box-sizing: border-box;
            border: 1px solid #000;
            border-collapse: collapse;
            /*border-radius: 20px;*/

        }

        .row {
            position: relative;
            display: flex;
            height: 40px;
            /*background-color: brown;*/
        }

        .col-action {
            background-color: blue;
        }

        /* .col-actionA {
            background-color: white;

        }

        .col-actionB {
            background-color: black;

        } */

        .col-actionA::before {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: white;
            border-radius: 99px;
            top: 4.5px;
            left: 4.5px;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

        }

        .col-actionB::before {
            content: "";
            width: 30px;
            height: 30px;
            background-color: black;
            border-radius: 99px;
            position: absolute;
            top: 4.5px;
            left: 4.5px;
            box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
        }

        .hq {
            width: 600px;
            height: 600px;
            margin: 0 auto;
        }
    </style>

    <script type="text/javascript" src="js/demo03.js"></script>

</head>

<body>

    <div class="main">

        <div class="qipan" id="qipan">


        </div>
        <div class="hq"><button id="hq">悔棋</button></div>
    </div>

</body>
<script>
    window.onload = function () {

        var busz = new Array();

        //div单击事件
        var ansj = function () {

            const x = this.getAttribute("col");
            const y = this.getAttribute("row");
            //  console.log(x, y, nowPlayer)

            if (nowPlayer) {
                qjck[this.getAttribute("row")][this.getAttribute("col")] = 1;
                this.classList.add("col-actionA");
                nowPlayer = !nowPlayer;
            } else {
                qjck[this.getAttribute("row")][this.getAttribute("col")] = 2;
                this.classList.add("col-actionB");
                nowPlayer = !nowPlayer;
            }

            busz.push(this);

            var js = pdsl(y, x);

            if (js) {
                setTimeout(function () {
                    alert("游戏结束");
                    location.reload(); //刷新浏览器

                }, 50);

            }

            this.onclick = null;

        }

        //判断是否结束
        var pdsl = function (x, y) {

            var sx = 1, zy = 1, zs = 1, ys = 1, t = 1;

            //上
            for (t = 1; t <= 5; t++) {

                if (x - t < 0)
                    break;

                console.log("上" + zy);
                if (qjck[x - t][y] == qjck[x][y] && qjck[x - t][y] != 0)
                    sx++;
                else
                    break;
            }

            //下
            for (t = 1; t <= 5; t++) {

                if (Number(x) + t >= 10)
                    break;

                console.log("下" + zy);
                if (qjck[Number(x) + t][y] == qjck[Number(x)][y] && qjck[Number(x) + t][y] != 0)
                    sx++;
                else
                    break;
            }

            //左
            for (t = 1; t <= 5; t++) {

                if (y - t < 0)
                    break;

                console.log("左" + zy);
                if (qjck[x][y - t] == qjck[x][y] && qjck[x][y - t] != 0)
                    zy++;
                else
                    break;
            }

            //右
            for (t = 1; t <= 5; t++) {

                if (Number(y) + t >= 10)
                    break;

                console.log("右" + zy);
                if (qjck[x][Number(y) + t] == qjck[x][y] && qjck[x][Number(y) + t] != 0)
                    zy++;
                else
                    break;
            }

            //上左
            for (t = 1; t <= 5; t++) {

                if (x - t < 0)
                    break;

                console.log("上左" + zy);
                if (qjck[x - t][y - t] == qjck[x][y] && qjck[x - t][y - t] != 0)
                    zs++;
                else
                    break;
            }

            //下右
            for (t = 1; t <= 5; t++) {

                if (Number(x) + t >= 10 || Number(y) + t >= 10)
                    break;

                console.log("下右" + zy);
                if (qjck[Number(x) + t][Number(y) + t] == qjck[x][y] && qjck[Number(x) + t][Number(y) + t] != 0)
                    zs++;
                else
                    break;
            }

            //上右
            for (t = 1; t <= 5; t++) {

                if (x - t < 0 || Number(y) + t >= 10)
                    break;

                console.log("上右" + zy);
                if (qjck[x - t][Number(y) + t] == qjck[x][y] && qjck[x - t][Number(y) + t] != 0)
                    ys++;
                else
                    break;
            }

            //下左
            for (t = 1; t <= 5; t++) {

                if (Number(x) + t >= 10 || y - t < 0)
                    break;

                console.log("下右" + zy);
                if (qjck[Number(x) + t][y - t] == qjck[x][y] && qjck[Number(x) + t][y - t] != 0)
                    ys++;
                else
                    break;
            }


            console.log(sx + " " + zy + " " + zs + " " + ys);

            if (sx == 5 || zy == 5 || zs == 5 || ys == 5)
                return true;
            else
                return false;

        }

        var nowPlayer = 0;

        //棋盘数组
        var qjck = Array();

        //div
        var piece = document.createElement("div");
        piece.id = "piece";

        //得到div
        var qipan = document.getElementById("qipan");

        //生成棋盘
        for (let r = 0; r < 15; r++) {
            let newrow = document.createElement("div");
            newrow.id = "row" + r;
            newrow.classList.add("row")

            let arrCol = Array()
            qjck.push(arrCol)

            for (let c = 0; c < 15; c++) {
                arrCol.push(0)
                let newcol = document.createElement("div");

                newcol.id = "col" + c;

                newcol.classList.add("col");

                newcol.setAttribute("row", r);
                newcol.setAttribute("col", c)
                newrow.appendChild(newcol)

                newcol.onclick = ansj;

            }


            // console.log(newrow)
            qipan.appendChild(newrow)
        }

        //悔棋
        var hq = document.getElementById("hq");

        hq.onclick = function () {

            if (busz.length <= 0)
                return;

            var divt = busz.pop();
            divt.onclick = ansj;

            divt.classList.remove("col-actionA");
            divt.classList.remove("col-actionB");

            qjck[divt.getAttribute("row")][divt.getAttribute("col")] = 0;

            nowPlayer = !nowPlayer;

            // console.log(qjck);
            console.log(divt);
        }


    }
</script>

</html>