网页下棋小游戏不完整的

ts

enum Player{
    x = 'x',
    o = 'o'
}
//单元格列表
let cells = document.querySelectorAll('.cell')
//游戏面板
let bord = document.querySelector('#bord')
//当前玩家
let currentPlayer = Player.x//默认为x操作时事件切换
let flag = true
//给每个单元格绑定单击事件，并且只能单击一次不能悔棋
cells.forEach(function(item,index){
    let cell = item as HTMLDivElement
    cell.setAttribute("cell-index",index+1+'')
    console.dir(cell)
    cell.addEventListener('click',clickCell,{
        once:true
    })
})
//单继单元格事件处理
function clickCell(event:MouseEvent){
    console.log(currentPlayer+">>it is click")
    //当前单元格添加旗子 X或 O
    let target = event.target as HTMLDivElement
    target.classList.add(currentPlayer)
    //判断有没有满足赢或平局条件,方法中改变message显示的内容，改变flag 为false
    judge(currentPlayer,+target.getAttribute("cell-index"));//将当前玩家x 或 o ，当前div的数字标识传入方法判断
    if(flag){
        //改变当前玩家值
        if(currentPlayer===Player.x){
            currentPlayer = Player.o
        }else{
            currentPlayer = Player.x
        }
    }else{
        //显示影藏的message div 不执行后面逻辑
    }
    
}
//鼠标移入移出事件
function moveCell(event:MouseEvent){
    //鼠标移入判断当前单元格有没有.x .o属性是不是已经有棋子，有不发生变化
    //没有棋子  将当前玩家符好放入  颜色变为灰色
    //鼠标移出去掉显示灰色
}
//重新开始按钮
function rester(){
    //恢复游戏结束标签
    flag = !flag;
    //回复单元格默认空白

    //影藏message div
}
//获取行数rows 和 列数 cells

let rowNum = document.querySelectorAll(".row").length;
let cellNums = document.querySelectorAll(".row .cell").length
let cellNum = cellNums/rowNum
let xNum = document.querySelectorAll(".row .x").length
let yNum = document.querySelectorAll(".row .y").length
let winNum = 3
console.log("棋盘行数："+rowNum+",棋盘列数："+cellNum)
console.log("x数："+xNum+",y数："+yNum)
function judge(playStr:string,cellIndex:number){
    //判断平局所有div下满棋子
    xNum = document.querySelectorAll(".row .x").length
    yNum = document.querySelectorAll(".row .y").length
    if((xNum+yNum)===cellNums){
        //更改p信息内容
        flag =false
        return
    }
    let cellplays = document.querySelectorAll(".cell ."+playStr)
    let playIndex = cellIndex/winNum;
    //判断当前标识位置，分情况判断赢
    //除以列数得到在哪一行

    //同一行判断 横向判断 加减数为1先减法循环比较符号是不是当前点击的符号，判断符合是否到边缘，到边缘开始加法循环比较，没到边缘的不符合当前棋子则开始加法循环，循环次数为赢的连棋子数，有一个不符合则返回，循环完全部符合则赢
    //同一列判断 竖向判断 加减数为列数，同上两次循环 判断上下边缘需要
    //至上而下右斜  加减数为 列数+1
    //至上而下左斜  加减数为 列数+1  判断上下左右四个边缘  依然是先减循环找到当前类型棋子的头  加循环判断是否连续三个 五个 赢的个数
    cellplays.forEach(function(item,index){
        let cell = item as HTMLDivElement
        let cellIndex =cell.getAttribute("cell-index")
        console.dir(cell)
        cell.addEventListener('click',clickCell,{
            once:true
        })
    })  
}

css 不齐全

.container{

    width: auto;

    height: auto;

}

#bord {

    background-color: burlywood;
    width: 306px;
    height: 306px;
    border-left: solid 2px black;
    border-bottom: solid 2px black;
    position: absolute;
    z-index: 1;
}
.row {
    position: relative;
}
.cell {
    float: left;
    width: 100px;
    height: 100px;
    border-right: solid 2px black;
    border-top: solid 2px black;
    font-size: larger;
}
.cell .x::before {
    content: 'x';
    color: aqua;
    font-size: larger;
}
.cell .o::before {
    content: 'o';
    color: red;
    font-size: larger;
}

#message{
    float: left;
    width: 306px;
    height: 306px;
    display: none;
}
p{
    font-size: larger;
}

html

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>下棋游戏</title> <link rel="stylesheet" href="./tic-style.css"/> </head> <body> <h1>Tic tac toe</h1> <div class="container"> <!-- 游戏面板棋盘 --> <div id="bord" class="game-board x"> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> </div> <!-- 获胜信息 --> <div id="message" class="game-message"> <p id="winner">X 赢了</p> <button id="restart">restart</button> </div> </div> </body>

><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>下棋游戏</title> <link rel="stylesheet" href="./tic-style.css"/> </head> <body> <h1>Tic tac toe</h1> <div class="container"> <!-- 游戏面板棋盘 --> <div id="bord" class="game-board x"> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> </div> <!-- 获胜信息 --> <div id="message" class="game-message"> <p id="winner">X 赢了</p> <button id="restart">restart</button> </div> </div> </body> <script src="./tic.js" type="text/javascript"></script> </html>