Javascript 需要帮助在p5.js中为Tic Tac Toe绘制一个X吗

我在Youtube（编码火车）上观看制作扫雷游戏的教程。我一直跟着录像，直到我做了一个X。 我想画一条互相交叉的线，形成一个大x，像这样：

我的问题是，我不知道如何处理每个单元格

我有一个单元类：

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();
        }
    }
}

函数make2DArray（列、行）{
var arr=新数组（cols）；
对于（变量i=0；i

---

我想在玩家点击一个单元格时调用X，并显示它。该行需要位于显示对象中的单元格类中。

每个

单元格的左上角的坐标存储在
x
和
y
属性中。宽度存储在
w
中

因此，可以通过以下方式绘制整个
单元的交叉：

line(this.x, this.y, this.x+this.w-1, this.y+this.w-1);
line(this.x, this.y+this.w-1, this.x+this.w-1, this.y);

要在单元格中绘制一个十字，需要单击单元格，您必须通过
false
初始化
player
属性：

function Cell(x, y, w) {

    .......

    this.player = false;
}

根据
player
属性，在
单元格
上画十字：

Cell.prototype.show = function() {
    stroke(0);
    noFill();
    rect(this.x, this.y, this.w-1, this.w-1);
    if (this.player) {
        line(this.x, this.y, this.x+this.w-1, this.y+this.w-1);
        line(this.x, this.y+this.w-1, this.x+this.w-1, this.y);
    }
}

创建一个函数，用于检查点是否在
单元格中
，并设置
播放器
属性
true
，如果测试成功：

Cell.prototype.testX = function(px, py) {
    if (px >= this.x && px < this.x+this.w && py >= this.y && py < this.y+this.w ) {
        this.player = true;
    }
}


功能单元（x，y，w）{
这个.x=x；
这个。y=y；
这个.w=w；
this.busy=true；
这是真的；
this.player=false；
}
Cell.prototype.show=函数（）{
冲程（0）；
noFill（）；
rect（this.x，this.y，this.w-1，this.w-1）；
if（this.player）{
行（this.x，this.y，this.x+this.w-1，this.y+this.w-1）；
行（this.x，this.y+this.w-1，this.x+this.w-1，this.y）；
}
}
Cell.prototype.testX=函数（px，py）{
如果（px>=this.x&&px=this.y&&py

谢谢你的回答。我得看看！
function mousePressed() {
    if (mouseButton == LEFT) {
        for (var i = 0; i < cols; i++) {
            for (var j = 0; j < rows; j++) {
                grid[i][j].testX(mouseX, mouseY);
            }
        }
    }
}