Need help to draw a X for Tic Tac Toe in p5.js

Question

I was following a tutorial on Youtube (The Coding Train) which was making a minesweeper game. I followed the video until I had make a X. I want to make to lines that cross each other and form a big x like this:

The board with a X

The problem I have is that I do not know how to that with each cell.

I have a Cell class:

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

And the main code is:

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

I want to be able to call a X when a player clicks on a cell, and display it. The line needs to be in the Cell class in Show object.

Answer 1

The coordinate of the top left corner of each Cell is stored in the x and y properties. The width is stored in w.
So a cross over the entire Cell can be draw by:

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

To draw a cross in a Cell dependent on a click into the cell, you have to init the player property by false:

function Cell(x, y, w) {

    .......

    this.player = false;
}

Draw the cross it the Cell dependent on the player property:

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

Create a function which checks if a point is in the Cell and set the player property true, if the test succeeds:

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

Add a mousePressed event, and call the test function testX for each Cell. if the mouse position is in a cell, then the player property of the Cell will become true and a cross will appear in the Cell at the next draw:

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

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

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

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>