Javascript 如何解决使用p5创建电路板的问题

我想在p5中创建一个类似垄断板的板。我的画布的宽度和高度有些问题，因为它看起来不像我想要的。 看起来是这样的：

我想要这样的东西：

以下是代码：

函数设置（）{
createCanvas（1000800）；
背景（255）；
对于（变量i=0；i<11；i++）{
var posX=映射（i，0，11，0，宽度）；
var posY=map（i，0，11，0，高度）；
var posX2=映射（i，0，11，0，宽度）；
var posY2=映射（i，0，11，高度，0）；
var tileRowUp=新的瓷砖（posX，0，80，80）；
tileRowUp.show（）；
var tileColLeft=新的瓷砖（0，posY，80，80）；
tileColLeft.show（）；
var tileRowdown=新瓷砖（posX2，高度-80,80,80）；
tileRowdown.show（）；
var tileColRight=新瓷砖（宽度-80，位置2，80，80）；
tileColRight.show（）；
}
//var MystiousCard1=新瓷砖（170190100100）；
//神秘卡片1.show（）；
//var MystiousCard2=新瓷砖（470、490、100、100）；
//神秘卡片2.show（）；
}
类瓷砖{
构造函数（x、y、lar、alt、img）{
这个.x=x；
这个。y=y；
this.lar=lar；
this.alt=alt；
this.img=img；
}
show（）{
//仰泳（）；
rect（this.x，this.y，this.lar，this.alt）；
}
}

---

您正在将每个瓷砖的宽度和高度固定为

80,80

。 如果您想将其固定，则必须将画布宽度和高度更改为

80*11,80*11

，即

880,880

然而，如果您不想固定画布大小并将其限制为正方形。 您需要绘制宽度为

width/11、高度为/11的每个平铺。
因此，您的代码将成为

函数设置（）{
createCanvas（1000800）；
背景（255）；
常数n=11；
//计算高度和宽度
var h=高度/n；
var w=宽度/n；
对于（变量i=0；i

现在，如果你想要方形瓷砖，你需要有
width=height

您可以在p5.js web编辑器中运行上述代码

注:
在处理游戏逻辑时，如果使用
平铺
类进行操作，则需要小心，因为有几个平铺对象相互重叠

如果要将瓷砖尺寸固定为80x80，则宽度和高度应为880880。或者，您需要根据画布的宽度和高度找到要绘制的矩形的宽度和高度。感谢您的帮助，我在想，也许您知道如何更改代码，生成40 Tile（）对象，并替换（var I=0；I<11；I++）{}

此循环

for（var I=0；I<40；I++）{

然后我将有40个对象，因为现在我将它剖分，我有tileRowUp-10 Tile（），tileColLeft-10 Tile（），tileRowdown-10 Tile（），tileColRight-10Tile（），有可能改变这个吗？如果我理解正确，你需要40个水平Tile和11个垂直Tile，对吗？我需要20个水平Tile和20个垂直Tile=40，对不起，如果我解释错了。我想要的是不要像这样分割：tileColRight，tileRowUp，tileColLeft，tileRowdown-就像TotalTile一样[40]看看这个。可以将n，m值更改为20，20。并且可以调整宽度和高度值。如果这解决了您的问题，您可以将其作为答案接受。创建一个空列表

var=tiles=[]并在创建瓷砖后立即推送瓷砖，即
瓷砖推送（tileRowUp）然后
平铺。推（平铺左）等。。