JavaScript精灵表

我有一个精灵表（png文件），有27个元素，每个元素之间有相等的空间

+----------------+
| 1      2      3           
| 4      5      6
|
|
|
|
|
|
|
| 24     25     26

我想将所有元素插入数组 我想出了一个方法它很好用

var ElemObjects = [];
ElemObjects.push(new Elem(0,0));
ElemObjects.push(new Elem(380,0));
ElemObjects.push(new Elem(760,0));
ElemObjects.push(new Elem(0,340));
ElemObjects.push(new Elem(380,340));
ElemObjects.push(new Elem(760,340));
ElemObjects.push(new Elem(0,680))
ElemObjects.push(new Elem(380,680))
ElemObjects.push(new Elem(760,680))

等等

我想用for循环做同样的事情，我的问题是逻辑 我不知道必须改变for循环中的x和y坐标

for(var i =0; i < 26; i++){
    ElemObjects[ElemObjects.length] = new Elem(Xsr,Ysr);
    Xsr=Xsr+380;
}

for（变量i=0；i<26；i++）{
ElemObjects[ElemObjects.length]=新元素（Xsr，Ysr）；
Xsr=Xsr+380；
}

---

任何建议

请查看模运算符：

---

根据循环中的

i

值进行位置计算。像这样的方法应该会奏效：

for (var i =0; i < 26; i++) {
    var xModifier = i%3;
    var yModifier = Math.floor(i/3);

    ElemObjects[ElemObjects.length] = new Elem(380 * xModifier, 340 * yModifier);
}

---

如果您有spriteWidth、spriteHeight、imageWidth、imageHeight，则代码可以如下所示：

var columnCount = imageWidth  / spriteWidth  ; 
var lineCount   = imageHeight / spriteHeight ; 

if (columnCount != Math.floor(columnCount)) throw ('sprite and image width don't match');
if (lineCount   != Math.floor(lineCount))   throw ('sprite and image height don't match');

for (var line=0; line<lineCount; line++) 
     for (var col=0; col<columnCount; col++) {

        // coordinates of the sprite  : ( col * spriteWidth; line*spriteHeight ) 
        // linear index of the sprite : ( line * columnCount ) + col 

     }

var columnCount=imageWidth/spriteWidth；
var lineCount=图像高度/精灵高度；
if（columnCount！=Math.floor（columnCount））抛出（'精灵和图像宽度不匹配'）；
if（lineCount！=Math.floor（lineCount））抛出（“精灵和图像高度不匹配”）；
对于（var line=0；lineuse“Xsr=（i%3）*380”，请查找模数运算符。
0, 0
380, 0
760, 0
0, 340
380, 340
760, 340
0, 680
380, 680
760, 680
0, 1020
380, 1020
760, 1020
0, 1360
380, 1360
760, 1360
0, 1700
380, 1700
760, 1700
0, 2040
380, 2040
760, 2040
0, 2380
380, 2380
760, 2380
0, 2720
380, 2720

var columnCount = imageWidth  / spriteWidth  ; 
var lineCount   = imageHeight / spriteHeight ; 

if (columnCount != Math.floor(columnCount)) throw ('sprite and image width don't match');
if (lineCount   != Math.floor(lineCount))   throw ('sprite and image height don't match');

for (var line=0; line<lineCount; line++) 
     for (var col=0; col<columnCount; col++) {

        // coordinates of the sprite  : ( col * spriteWidth; line*spriteHeight ) 
        // linear index of the sprite : ( line * columnCount ) + col 

     }