js源码之五子棋

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: url(../images/1.jpg) no-repeat;
    background-size: cover;
}

.qipan {
    position: relative;
    width: 640px;
    height: 640px;
    margin: 0 auto;
    background-color: #fdc065;
}

.qiju {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 600px;
    height: 600px;
    z-index: 1;
}

.qiju div {
    float: left;
    width: 40px;
    height: 40px;
    border: solid 2px #8a510a;
}

.qizi {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 640px;
    height: 640px;
    /* background-color: purple; */
    z-index: 2;
}

.qizi div {
    position: relative;
    float: left;
    width: 40px;
    height: 40px;
    /* background-color: red; */
}

.hei::after {
    position: absolute;
    top: 5px;
    left: 5px;
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #000;
}

.bai::after {
    position: absolute;
    top: 5px;
    left: 5px;
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
}

/* 失败样式 */

#over {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 500px;
    width: 300px;
    height: 200px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 20px;
    z-index: 666;
    overflow: hidden;
}

#steps {
    width: 100%;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 24px;
    color: red;
}

#msg {
    color: red;
    font-weight: 700;
    width: 100%;
    font-size: 36px;
    text-align: center;
}

#recome {
    position: fixed;
    top: 400px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 460px;
    width: 200px;
    height: 40px;
    /* background-color: red; */
}

#recome input {
    width: 100%;
    height: 100%;
    background-color: hsl(0, 0%, 50%, .4);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
    font-size: 20px;
    color: red;
    border: solid 1px red;
    cursor: pointer;
}

#btn:hover {
    background-color: hsl(0, 0%, 50%);
}

window.onload = function () {
    const btn = document.querySelector("#btn");
    const over = this.document.querySelector("#over");
    const steps = this.document.querySelector("#steps");
    const qiju = this.document.querySelector(".qiju");
    for (let i = 0; i < 225; i++) {
        let div = this.document.createElement("div");
        qiju.appendChild(div);
    };
    const qizi = this.document.querySelector(".qizi");
    for (let i = 0; i < 256; i++) {
        let div = this.document.createElement("div");
        qizi.appendChild(div);
    };
    let count = -1;
    const qipan = this.document.querySelector(".qipan");
    let arr = [];
    let mx = qipan.offsetLeft;
    const points = this.document.querySelectorAll(".qizi div");
    qipan.addEventListener("click", function (e) {
        let x = Math.ceil((e.pageX - mx) / 40);
        let y = Math.floor(e.pageY / 40);
        const index = y * 16 + x;
        if (arr.indexOf(index) == -1) {
            count++;
            arr.push(index);
            if (count % 2 == 0) {
                points[index - 1].className = ‘hei‘;
                points[index - 1].setAttribute("color", "hei");
            } else {
                points[index - 1].className = ‘bai‘;
                points[index - 1].setAttribute("color", "bai");
            }
            let result = success(index);
            if (result) {
                if (points[index - 1].getAttribute("color") == "hei") {
                    setTimeout(function () {
                        alert("黑子胜利");
                        over.style = "display:block;";
                        let step = count - 0 + 1;
                        steps.innerHTML = "黑子胜利,总共走了" + step + "步";
                    }, 1)
                } else {
                    setTimeout(function () {
                        alert("白子胜利");
                        over.style = "display:block;";
                        let step = count - 0 + 1;
                        steps.innerHTML = "白子胜利,总共走了" + step + "步";
                    }, 1)
                }

            }
        } else {
            alert("不能重复落子!");
            return;
        }
    });
    function success(index) {
        let left = 0;
        if (index % 16 == 1) {
            left = 0;
        }
        else if (index % 16 == 2) {
            points[index - 2].getAttribute("color") == points[index - 1].getAttribute("color") && left++;
        }
        else if (index % 16 == 3) {
            points[index - 2].getAttribute("color") == points[index - 1].getAttribute("color") && left++;
            if (left > 0) {      //大于零说明左边第一个是相同颜色的棋子
                points[index - 3].getAttribute("color") == points[index - 1].getAttribute("color") && left++;
            }
        }
        else if (index % 16 == 4) {
            points[index - 2].getAttribute("color") == points[index - 1].getAttribute("color") && left++;
            if (left > 0) {
                points[index - 3].getAttribute("color") == points[index - 1].getAttribute("color") && left++;
            }
            if (left > 1) {
                points[index - 4].getAttribute("color") == points[index - 1].getAttribute("color") && left++;
            }
        }
        else {
            points[index - 2].getAttribute("color") == points[index - 1].getAttribute("color") && left++;
            if (left > 0) {
                points[index - 3].getAttribute("color") == points[index - 1].getAttribute("color") && left++;
            }
            if (left > 1) {
                points[index - 4].getAttribute("color") == points[index - 1].getAttribute("color") && left++;
            }
            if (left > 2) {
                points[index - 5].getAttribute("color") == points[index - 1].getAttribute("color") && left++;
            }
        }
        let right = 0;
        if (index % 16 == 0) {
            right = 0;
        }
        else if (index % 16 == 15) {
            points[index].getAttribute("color") == points[index - 1].getAttribute("color") && right++;
        }
        else if (index % 16 == 14) {
            points[index].getAttribute("color") == points[index - 1].getAttribute("color") && right++;
            if (right > 0) {
                points[index + 1].getAttribute("color") == points[index - 1].getAttribute("color") && right++;
            }
        }
        else if (index % 16 == 13) {
            points[index].getAttribute("color") == points[index - 1].getAttribute("color") && right++;
            if (right > 0) {
                points[index + 1].getAttribute("color") == points[index - 1].getAttribute("color") && right++;
            }
            if (right > 1) {
                points[index + 2].getAttribute("color") == points[index - 1].getAttribute("color") && right++;
            }
        }
        else {
            points[index].getAttribute("color") == points[index - 1].getAttribute("color") && right++;
            if (right > 0) {
                points[index + 1].getAttribute("color") == points[index - 1].getAttribute("color") && right++;
            }
            if (right > 1) {
                points[index + 2].getAttribute("color") == points[index - 1].getAttribute("color") && right++;
            }
            if (right > 2) {
                points[index + 3].getAttribute("color") == points[index - 1].getAttribute("color") && right++;
            }
        }
        let top = 0;
        if (Math.floor((index - 1) / 16) == 0) {
            top = 0;
        }
        else if (Math.floor((index - 1) / 16) == 1) {
            points[index - 17].getAttribute("color") == points[index - 1].getAttribute("color") && top++;
        }
        else if (Math.floor((index - 1) / 16) == 2) {
            points[index - 17].getAttribute("color") == points[index - 1].getAttribute("color") && top++;
            if (top > 0) {
                points[index - 33].getAttribute("color") == points[index - 1].getAttribute("color") && top++;
            }
        }
        else if (Math.floor((index - 1) / 16) == 3) {
            points[index - 17].getAttribute("color") == points[index - 1].getAttribute("color") && top++;
            if (top > 0) {
                points[index - 33].getAttribute("color") == points[index - 1].getAttribute("color") && top++;
            };
            if (top > 1) {
                points[index - 49].getAttribute("color") == points[index - 1].getAttribute("color") && top++;
            }
        }
        else {
            points[index - 17].getAttribute("color") == points[index - 1].getAttribute("color") && top++;
            if (top > 0) {
                points[index - 33].getAttribute("color") == points[index - 1].getAttribute("color") && top++;
            };
            if (top > 1) {
                points[index - 49].getAttribute("color") == points[index - 1].getAttribute("color") && top++;
            }
            if (top > 2) {
                points[index - 65].getAttribute("color") == points[index - 1].getAttribute("color") && top++;
            }
        }
        let bottom = 0;
        if (16 - Math.ceil(index / 16) == 0) {
            bottom = 0;
        }
        else if (16 - Math.ceil(index / 16) == 1) {
            points[index + 15].getAttribute("color") == points[index - 1].getAttribute("color") && bottom++;
        }
        else if (16 - Math.ceil(index / 16) == 2) {
            points[index + 15].getAttribute("color") == points[index - 1].getAttribute("color") && bottom++;
            if (bottom > 0) {
                points[index + 31].getAttribute("color") == points[index - 1].getAttribute("color") && bottom++;
            }
        }
        else if (16 - Math.ceil(index / 16) == 3) {
            points[index + 15].getAttribute("color") == points[index - 1].getAttribute("color") && bottom++;
            if (bottom > 0) {
                points[index + 31].getAttribute("color") == points[index - 1].getAttribute("color") && bottom++;
            }
            if (bottom > 1) {
                points[index + 47].getAttribute("color") == points[index - 1].getAttribute("color") && bottom++;
            }
        }
        else {
            points[index + 15].getAttribute("color") == points[index - 1].getAttribute("color") && bottom++;
            if (bottom > 0) {
                points[index + 31].getAttribute("color") == points[index - 1].getAttribute("color") && bottom++;
            }
            if (bottom > 1) {
                points[index + 47].getAttribute("color") == points[index - 1].getAttribute("color") && bottom++;
            }
            if (bottom > 2) {
                points[index + 63].getAttribute("color") == points[index - 1].getAttribute("color") && bottom++;
            }
        }
        let lefttop = 0;
        if (Math.floor((index - 1) / 16) == 0) {
            lefttop = 0;
        }
        else if (Math.floor((index - 1) / 16) == 1) {
            if (index % 16 - 1 > 0 || index % 16 - 1 == -1) {
                points[index - 18].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
            }
        }
        else if (Math.floor((index - 1) / 16) == 2) {
            if (index % 16 - 1 == 1) {
                points[index - 18].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
            }
            else if (index % 16 - 1 > 1 || index % 16 - 1 == -1) {
                points[index - 18].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                if (lefttop > 0) {
                    points[index - 35].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                }
            }
        }
        else if (Math.floor((index - 1) / 16) == 3) {
            if (index % 16 - 1 == 1) {
                points[index - 18].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
            }
            else if (index % 16 - 1 == 2) {
                points[index - 18].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                if (lefttop > 0) {
                    points[index - 35].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                }

            }
            else if (index % 16 - 1 > 2 || index % 16 - 1 == -1) {
                points[index - 18].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                if (lefttop > 0) {
                    points[index - 35].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                }
                if (lefttop > 1) {
                    points[index - 52].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                }

            }
        }
        else {
            if (index % 16 - 1 == 1) {
                points[index - 18].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
            }
            else if (index % 16 - 1 == 2) {
                points[index - 18].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                if (lefttop > 0) {
                    points[index - 35].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                }

            }
            else if (index % 16 - 1 == 3) {
                points[index - 18].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                if (lefttop > 0) {
                    points[index - 35].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                }
                if (lefttop > 1) {
                    points[index - 52].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                }
            }
            else if (index % 16 - 1 > 3 || index % 16 - 1 == -1) {
                points[index - 18].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                if (lefttop > 0) {
                    points[index - 35].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                }
                if (lefttop > 1) {
                    points[index - 52].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                }
                if (lefttop > 2) {
                    points[index - 69].getAttribute("color") == points[index - 1].getAttribute("color") && lefttop++;
                }
            }
        }
        let rightbottom = 0;
        if (16 - Math.ceil((index - 1) / 16) == 0) {
            rightbottom = 0;
        }
        else if (16 - Math.ceil((index - 1) / 16) == 1) {
            if (16 - (index % 16) == 16) {
                rightbottom = 0;
            }
            else if (16 - (index % 16) == 1) {
                points[index + 16].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
            }
        }
        else if (16 - Math.ceil((index - 1) / 16) == 2) {
            if (16 - (index % 16) == 16) {
                rightbottom = 0;
            }
            else if (16 - (index % 16) == 1) {
                points[index + 16].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
            }
            else if (16 - (index % 16) == 2) {
                points[index + 16].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                if (rightbottom > 0) {
                    points[index + 33].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                }
            }
        }
        else if (16 - Math.ceil((index - 1) / 16) == 3) {
            if (16 - (index % 16) == 16) {
                rightbottom = 0;
            }
            else if (16 - (index % 16) == 1) {
                points[index + 16].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
            }
            else if (16 - (index % 16) == 2) {
                points[index + 16].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                if (rightbottom > 0) {
                    points[index + 33].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                }
            }
            else if (16 - (index % 16) == 3) {
                points[index + 16].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                if (rightbottom > 0) {
                    points[index + 33].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                }
                if (rightbottom > 1) {
                    points[index + 50].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                }
            }
        }
        else if (16 - Math.ceil((index - 1) / 16) > 3) {
            if (16 - (index % 16) == 16) {
                rightbottom = 0;
            }
            else if (16 - (index % 16) == 1) {
                points[index + 16].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
            }
            else if (16 - (index % 16) == 2) {
                points[index + 16].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                if (rightbottom > 0) {
                    points[index + 33].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                }
            }
            else if (16 - (index % 16) == 3) {
                points[index + 16].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                if (rightbottom > 0) {
                    points[index + 33].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                }
                if (rightbottom > 1) {
                    points[index + 50].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                }
            }
            else if (16 - (index % 16) > 3 && 16 - (index % 16) != 16) {
                points[index + 16].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                if (rightbottom > 0) {
                    points[index + 33].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                }
                if (rightbottom > 1) {
                    points[index + 50].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                }
                if (rightbottom > 2) {
                    points[index + 67].getAttribute("color") == points[index - 1].getAttribute("color") && rightbottom++;
                }
            }
        }
        let righttop = 0;
        if (Math.floor((index - 1) / 16) == 0) {
            righttop = 0;
        }
        else if (Math.floor((index - 1) / 16) == 1) {
            if (16 - (index % 16) == 16) {
                righttop = righttop;
            }
            else {
                points[index - 16].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
            }
        }
        else if (Math.floor((index - 1) / 16) == 2) {
            if (16 - (index % 16) == 16) {
                righttop = righttop;
            }
            else if (16 - (index % 16) == 1) {
                points[index - 16].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
            }
            else if (16 - (index % 16) == 2) {
                points[index - 16].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                //当righttop >= 1的时候,说明右上第一个字颜色和当前是一样的,判断右上第二个字的颜色
                if (righttop > 0) {
                    points[index - 31].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                }
            }
        }
        else if (Math.floor((index - 1) / 16) == 3) {
            if (16 - (index % 16) == 16) {
                righttop = righttop;
            }
            else if (16 - (index % 16) == 1) {
                points[index - 16].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
            }
            else if (16 - (index % 16) == 2) {
                points[index - 16].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                if (righttop > 0) {
                    points[index - 31].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                }
            }
            else if (16 - (index % 16) == 3) {
                points[index - 16].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                if (righttop > 0) {
                    points[index - 31].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                };
                if (righttop > 1) {
                    points[index - 46].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                }
            }
        }
        else {
            if (16 - (index % 16) == 16) {
                righttop = righttop;
            }
            else if (16 - (index % 16) == 1) {
                points[index - 16].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
            }
            else if (16 - (index % 16) == 2) {
                points[index - 16].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                if (righttop > 0) {
                    points[index - 31].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                }
            }
            else if (16 - (index % 16) == 3) {
                points[index - 16].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                if (righttop > 0) {
                    points[index - 31].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                };
                if (righttop > 1) {
                    points[index - 46].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                }
            }
            else {
                points[index - 16].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                if (righttop > 0) {
                    points[index - 31].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                };
                if (righttop > 1) {
                    points[index - 46].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                };
                if (righttop > 2) {
                    points[index - 61].getAttribute("color") == points[index - 1].getAttribute("color") && righttop++;
                };
            }
        }
        let leftbottom = 0;
        if (16 - Math.ceil(index / 16) == 0) {
            leftbottom = 0;
        }
        else if (16 - Math.ceil(index / 16) == 1) {
            if (index % 16 == 1) {
                leftbottom = 0;
            } else {
                points[index + 14].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
            }
        }
        else if (16 - Math.ceil(index / 16) == 2) {
            if (index % 16 == 1) {
                leftbottom = 0;
            }
            else if (index % 16 == 2) {
                points[index + 14].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
            }
            else {
                points[index + 14].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                if (leftbottom > 0) {
                    points[index + 29].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                }
            }
        }
        else if (16 - Math.ceil(index / 16) == 3) {
            if (index % 16 == 1) {
                leftbottom = 0;
            }
            else if (index % 16 == 2) {
                points[index + 14].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
            }
            else if (index % 16 == 3) {
                points[index + 14].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                if (leftbottom > 0) {
                    points[index + 29].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                };
                if (leftbottom > 1) {
                    points[index + 44].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                }
            }
            else {
                points[index + 14].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                if (leftbottom > 0) {
                    points[index + 29].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                };
                if (leftbottom > 1) {
                    points[index + 44].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                };
            }
        }
        else {
            if (index % 16 == 1) {
                leftbottom = 0;
            }
            else if (index % 16 == 2) {
                points[index + 14].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
            }
            else if (index % 16 == 3) {
                points[index + 14].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                if (leftbottom > 0) {
                    points[index + 29].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                };
                if (leftbottom > 1) {
                    points[index + 44].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                }
            }
            else if (index % 16 == 4) {
                points[index + 14].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                if (leftbottom > 0) {
                    points[index + 29].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                };
                if (leftbottom > 1) {
                    points[index + 44].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                };
            }
            else {
                points[index + 14].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                if (leftbottom > 0) {
                    points[index + 29].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                };
                if (leftbottom > 1) {
                    points[index + 44].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                };
                if (leftbottom > 2) {
                    points[index + 59].getAttribute("color") == points[index - 1].getAttribute("color") && leftbottom++;
                };
            }
        }

        if (left + right >= 4 || top + bottom >= 4 || lefttop + rightbottom >= 4 || righttop + leftbottom >= 4) {
            return true;
        } else {
            return false;
        }
    }
    function reset() {
        count = -1;
        arr = [];
        for (let i = 0; i < points.length; i++) {
            points[i].className = ‘‘;
            points[i].removeAttribute("color");
        }
    };
    btn.addEventListener("click", function () {
        over.style = "display:none;"
        reset();
    })
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta author="六月雪" time="2020-01-27 19:00:00">
    <link rel="stylesheet" href="./css/五子棋.css">
    <script src="./js/五子棋.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="over">
        <div id="steps">
            总共走了12步
        </div>
        <div id="msg">
            胜负乃是兵家常事<br />
            请再接再厉
        </div>
    </div>
    <div id="recome">
        <input type="button" value="重新开始" id="btn">
    </div>
    <div class="qipan">
        <div class="qiju">
        </div>
        <div class="qizi">
        </div>
    </div>
</body>

</html>