需要帮助在 p5.js 中为 Tic Tac Toe 画 X

Question

我正在关注 Youtube（编码火车）上制作扫雷游戏的教程。我跟着视频直到我做了一个 X。我想制作相互交叉的线并形成一个像这样的大 x：

The board with a X

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

我有一个手机 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);
    }
}

主要代码是：

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 并显示它。该行需要位于 Show 对象的 Cell class 中。

Answer 1

每个 Cell 的左上角坐标存储在 x 和 y 属性中。宽度存储在w.
因此，整个 Cell 的交叉可以绘制为：

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 中绘制十字，您必须通过 false:[=38= 初始化 player 属性 ]

function Cell(x, y, w) {

    .......

    this.player = false;
}

画叉 Cell 取决于 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);
    }
}

创建一个函数，检查一个点是否在 Cell 中并设置 player 属性 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;
    }
}

添加一个mousePressed事件，并为每个Cell调用测试函数testX。如果鼠标位置在一个单元格中，那么Cell的player属性会变成true，下一个Cell会出现一个叉号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>

需要帮助在 p5.js 中为 Tic Tac Toe 画 X

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

javascript

processing

tic-tac-toe

p5.js