需要帮助绘制X在p5.js井字

Question

我下面在Youtube（编码火车），其制作扫雷游戏的教程。我跟着视频，直到我不得不做一个X.我想对彼此交叉形成一个大X这样的线路：

The board with a X

我的问题是，我不知道如何与每个细胞。

我有一个Cell类：

function Cell(x, y, w) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.busy = true;
    this.player = true;
    this.computer = true;
}

Cell.prototype.show = function() {
    stroke(0);
    noFill();
    rect(this.x, this.y, this.w, this.w);
    if (true) {
        line(0, 0, 100, 100);
        line(0, 100, 100, 0);
    }
}

和主要代码是：

function make2DArray(cols, rows) {
    var arr = new Array(cols);
    for (var i = 0; i < arr.length; i++) {
        arr[i] = new Array(rows);
    }
    return arr;
}

var grid;
var rows;
var cols;
var w = 100;

function setup() {
    createCanvas(300, 300);
    cols = floor(width/w);
    rows = floor(width/w);
    grid = make2DArray(cols, rows);
    for (var i = 0; i < cols; i++) {
        for (var j = 0; j < rows; j++) {
            grid[i][j] = new Cell(i * w, j * w, w);
        }
    }
}

function draw() {
    background(255);
    for (var i = 0; i < cols; i++) {
        for (var j = 0; j < rows; j++) {
            grid[i][j].show();
        }
    }
}

我希望能够调用X当玩家点击一个细胞，并显示它。线必须在显示对象Cell类。