cocos creator从零开发五子棋(03)-棋盘网格绘制

新建scripts/Game.ts，内容如下，把它挂载到Canvas节点上。拖拽Canvas/grid/bg节点到bgNode属性上，拖拽Canvas/grid/root节点到rootNode属性上。

const { ccclass, property } = cc._decorator


const GRID_SIZE = 15
const GRID_WIDTH = 50


@ccclass
export default class Game extends cc.Component {
    @property(cc.Node)
    private bgNode: cc.Node = null
    @property(cc.Node)
    private rootNode: cc.Node = null


    protected onLoad(): void {
        this.init()
    }


    private init() {
        const node = new cc.Node()
        node.parent = this.bgNode
        node.setAnchorPoint(cc.Vec2.ZERO)

        const graphics = node.addComponent(cc.Graphics)
        graphics.lineWidth = 3 //我电脑显示器不行，要设置宽度为 3 才能显示线条，如果没问题的可以注释掉这一行
        graphics.strokeColor = cc.Color.RED

        // 从下往上 画 横线
        for (let col = 0; col < GRID_SIZE; col++) {
            graphics.moveTo(GRID_WIDTH / 2, col * GRID_WIDTH + GRID_WIDTH / 2)
            graphics.lineTo(GRID_SIZE * GRID_WIDTH - GRID_WIDTH / 2, col * GRID_WIDTH + GRID_WIDTH / 2)
            graphics.stroke()
        }
        // 从左往右 画 竖线
        for (let row = 0; row < GRID_SIZE; row++) {
            graphics.moveTo(row * GRID_WIDTH + GRID_WIDTH / 2, GRID_WIDTH / 2)
            graphics.lineTo(row * GRID_WIDTH + GRID_WIDTH / 2, GRID_SIZE * GRID_WIDTH - GRID_WIDTH / 2)
            graphics.stroke()
        }
    }
}

运行项目，网格线已经绘制出来了。