简单实现一个网页版的三子棋(HTML+CSS+JavaScript)

最新推荐文章于 2023-07-23 22:34:17 发布

摸鱼王胖嘟嘟

最新推荐文章于 2023-07-23 22:34:17 发布

阅读量339

点赞数 1

分类专栏： JavaWeb 文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/weixin_61341342/article/details/130796261

版权

JavaWeb 专栏收录该内容

10 篇文章

订阅专栏

完整代码

三子棋.html

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8" />
    <title>九宫格</title>

    <style type="text/css">
        #square {
            position: relative;
            margin: 40px 450px;
            height: 316px;
            width: 316px;
            background-color: #f34d00;
        }

        #square div {
            float: left;
            position: relative;
            background-color: white;
            border: 2px;
            border-radius: 2px;
            height: 100px;
            width: 100px;
            margin-top: 4px;
            margin-left: 4px;
        }

        .img {
            position: relative;
            float: left;
        }
    </style>
</head>

<body bgcolor="#D7D1D1" onload="init()">
    <script type="text/javascript">
        let chessdata = new Array();
        let i, j, k = 0,
            img_num = 1;
            let myname = new Array("circle.gif", "false.gif"); //存储图片的数组
        function init() {
            let x = document.getElementById("square");
            //二层循环用来生成九个div
            for (i = 0; i < 3; i++) {
                for (j = 0; j < 3; j++) {
                    x.innerHTML += "<div οnclick=drawfigure(this," + i + "," + j + ")></div>";
                }
            }
            //建立一个与九宫格对应的数组
            for (let i = 0; i < 3; i++) {
                chessdata[i] = new Array();
                for (let j = 0; j < 3; j++) {
                    chessdata[i][j] = 0;
                }
            }
        }

        function drawfigure(obj, x, y) {
            if (chessdata[x][y] != 0) {
                alert("此处有棋子了！"); //有棋子就直接返回，什么也不做
                return;
            }
            chessdata[x][y] = img_num % 2 + 3; //画圆就给该数组元素赋值为4，画叉就给该数组元素赋值为3
            obj.innerHTML = '<img src="' + myname[img_num] + '"/>';
            img_num = (img_num + 1) % 2; //控制交替画图
            calculate(x, y);
        }

        //计算当前画图的位置是否有成一条线的
        function calculate(x, y) {
            let n = x,
                m = y,
                sum = 0,
                sum1 = 0,
                sum2 = 0,
                sum3 = 0;

            //横向
            for (let i = 0; i < 3; i++) {
                sum += chessdata[n][i];
                judge(sum);
            }

            //竖向
            for (let i = 0; i < 3; i++) {
                sum1 += chessdata[i][m];
                judge(sum1);
            }

            //左斜
            if (n + m == 2) {
                for (let i = 0; i < 3; i++) {
                    sum2 += chessdata[i][2 - i];
                    judge(sum2);
                }
            }

            //右斜
            if (n == m) {
                for (let i = 0; i < 3; i++) {
                    sum3 += chessdata[i][i];
                    judge(sum3);
                }
            }
        }

        //根据图形所带的值计算是否满足成线
        function judge(sum) {
            if (sum == 12) {
                //判断胜利后弹出对话框，点击确定刷新
                alert("X win");
                window.location.reload();
            } else if (sum == 9) {
                alert("O win");
                window.location.reload();
            }
        }
    </script>
    <div id="square">

    </div>


</html>