素材准备，准备黑白棋子、棋盘图片素材，网上没搜到，自己画了个丑不拉几的棋子和棋盘

black.png

white.png

checkerboard.png

页面搭建

<text>
    当前：{{TYPE_NAME[currentType]}}
</text>

<view class="checkerboard-box">
    <view class="checkerboard" :class="{'checkerboard--readonly':win}">
        <image class="checkerboard-bg" src="../../../static/images/gobang/checkerboard.png"></image>
        <view class="checkerboard-row" v-for="row in 15" :key="row">
            <view class="checkerboard-col" v-for="(item,col) in 15" :key="col"
                @click="addChess(row,col)">
                <image v-if="stepsMap[`${row}|${col}`]&&stepsMap[`${row}|${col}`].type===TYPE.BLACK" class="checkerboard-chess"
                    src="../../../static/images/gobang/black.png"></image>
                <image v-if="stepsMap[`${row}|${col}`]&&stepsMap[`${row}|${col}`].type===TYPE.WHITE" class="checkerboard-chess"
                    src="../../../static/images/gobang/white.png"></image>
            </view>
        </view>
    </view>
</view>

<button type="primary" @click="reStart()">重新开始</button>

js方法判断输赢，写的有点傻，肯定有更方便的方法，呜呜呜

isWin(row,col,type){
    let i // row
    let j // col
    let count = 0
    
    // 判断行
    for(j = 0; j < BOARD_COL; j++) {
        count = this.stepsMap[`${row}|${j}`]?.type===type ? count + 1 : 0
        if(count>=5) {
            this.gameOver(type)
            return true
        }
    }
    
    // 判断列
    count = 0
    for(i = 0; i < BOARD_ROW; i++) {
        count = this.stepsMap[`${i}|${col}`]?.type===type  ? count + 1 : 0
        if(count>=5) {
            this.gameOver(type)
            return true
        }
    }
    
    
    // 判断斜上
    let total = row + col
    if(total>=4&&total<=14){
        for(i = 0; i<=total; i++){
            count = this.stepsMap[`${i}|${total-i}`]?.type===type  ? count + 1 : 0
            if(count>=5) {
                this.gameOver(type)
                return true
            }
        }
    } else if(total>14&&total<=24){
        for(i = 0; i<=28-total; i++){
            count = this.stepsMap[`${14-i}|${14-(28-total)+i}`]?.type===type  ? count + 1 : 0
            if(count>=5) {
                this.gameOver(type)
                return true
            }
        }
    }
    
    // 判断斜下
    if(row>=col && row-col<=10){
        for(i = row-col;i<BOARD_ROW;i++){
            count = this.stepsMap[`${i}|${i-(row-col)}`]?.type===type  ? count + 1 : 0
            // console.log('row',i,'col',i-(row-col),'type',this.checkerboard[i][i-(row-col)],'count',count)
            if(count>=5) {
                this.gameOver(type)
                return true
            }
        }
    } else if(row<col && col-row<=10){
        for(i = 0; i < 14-(col-row);i++){
            count = this.stepsMap[`${i}|${col-row+i}`]?.type===type  ? count + 1 : 0
            if(count>=5){
                this.gameOver(type)
                return true
            }
        }
    }
    
    return false
}