Javascript 通过p5.js中的用户输入，逐行创建正方形

我在p5.js中学习用户通过鼠标输入，我想通过4次不同的点击创建一个正方形，每行点击1次，最后一次点击完成正方形。 下面的代码是针对两行的，但这两行同时运行，我无法理解if命令分别运行它们

函数设置（）{
createCanvas（400400）；
背景（220）；
}
函数draw（）{
}
函数mousePressed（）
{
线条（宽/20，高/40，鼠标，鼠标）；
行（pmouseX、pmouseY、mouseX、mouseY）；
}

---

您必须将点存储到列表中。如果列表包含4个元素，并且再次单击鼠标，请清除列表：

var-pts=[]；
函数mousePressed（）
{
如果（pts.length==4）{
临时秘书处=[]；
}
点推（[mouseX，mouseY]）
}

连续绘制所有图纸。清除背景。在循环中的点之间绘制留置权。如果点数为4，则从最后一个点到第一个点绘制一条线。
此外，如果列表中至少有一个点，则可以从最后一个点到当前鼠标位置绘制一条“橡皮”线：

函数draw（）{
背景（220）；
//在点之间画线
对于（变量i=0；i0）{
//从最后一点到鼠标绘制一条橡皮线
行（分[pts.length-1][0]，分[pts.length-1][1]，鼠标，鼠标）；
}
}

参见示例

函数设置（）{
createCanvas（400400）；
}
var-pts=[]；
函数mousePressed（）
{
如果（pts.length==4）{
临时秘书处=[]；
}
点推（[mouseX，mouseY]）
}
函数draw（）{
背景（220）；
//在点之间画线
对于（变量i=0；i0）{
//从最后一点到鼠标绘制一条橡皮线
行（分[pts.length-1][0]，分[pts.length-1][1]，鼠标，鼠标）；
}
}

---

谢谢您的回复，我理解您所做的（我认为），但我并不真正理解推送功能和pts[pts.length-1][0]，pts[pts.length-1][1]，以及[0]和[1]的含义。谢谢，我认为push函数存储的是原始值，[0]表示X，[1]表示Y，@silentg这是基本的javascript。你应该知道，在你开始这样的任务或提问之前。了解

a.push（x）

将元素

x

添加到数组

a

。在本例中，元素本身是一个数组（

[mouseX，mouseY]

）

a[i]

是索引运算符，返回数组

a

的

i

th元素。如果数组中存在数组，则

pts[i][j]

从

pts

的

i

th元素返回坐标

j

。