Javascript 如何使用等轴测PNG阵列更好地创建菱形形状

我想用等距块创建一个平铺系统，经过多次尝试，我终于用这段代码实现了它

function worldGen(){
var lvl = 100;
for (x=0; x<=50; x++){
    imageObj.src = "grass.png";
    square.n.push(imageObj);
    }
    //Corner Top
    console.log("Top Corner")
    for(x=1; x<=1; x++){
        for(y=0; y<=1; y++){
            for(n=1; n<=50; n++){
            square.x[n] = (x*64+40*5-lvl);
            square.y[n] = (y*64+32*3);
            context.drawImage(square.n[n], square.y[y], square.x[x], 64, 64);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
            }
        }
    }
    for(x=2; x<=2; x++){
        for(y=0; y<=2; y++){
            for(n=1; n<=50; n++){
            square.x[n] = (x*64+40*4-lvl);
            square.y[n] = (y*64+32*2);
            context.drawImage(square.n[n], square.y[y], square.x[x], 64, 64);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
            }
        }
    }
    for(x=3; x<=3; x++){
        for(y=0; y<=3; y++){
            for(n=1; n<=50; n++){
            square.x[n] = (x*64+40*3-lvl);
            square.y[n] = (y*64+32*1);
            context.drawImage(square.n[n], square.y[y], square.x[x], 64, 64);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
            }
        }
    }
    for(x=4; x<=4; x++){
        for(y=0; y<=4; y++){
            for(n=1; n<=50; n++){
            square.x[n] = (x*64+40*2-lvl);
            square.y[n] = (y*64);
            context.drawImage(square.n[n], square.y[y], square.x[x], 64, 64);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
            }
        }
    }
    for(x=5; x<=5; x++){
        for(y=0; y<=5; y++){
            for(n=1; n<=50; n++){
            square.x[n] = (x*64+40-lvl);
            square.y[n] = (y*64-32);
            context.drawImage(square.n[n], square.y[y], square.x[x], 64, 64);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
            }
        }
    }
    //Center
    console.log("Start Center Gen")
    for(z=0; z<=5; z++){
            for(x=6; x<=6; x++){
                for(y=0; y<=5; y++){
                    for(n=2; n<=50; n++){
                    square.x[x] = (x*64+(24*z)-lvl);
                    square.y[y] = (y*64+(32*z));
                    context.drawImage(square.n[n], square.y[y], square.x[x], 64, 64);
                    console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
                    }
                }
            }
    }
    //Bottom Corner
        console.log("Start Bottom Corner")
        for(x=6; x<=6; x++){
        for(y=0; y<=4; y++){
            for(n=1; n<=50; n++){
            square.x[n] = (x*64+44);
            square.y[n] = (y*64+32*6);
            context.drawImage(square.n[n], square.y[n], square.x[n], 64, 64);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
            }
        }
    }
    console.log("Start Bottom Corner")
    for(x=6; x<=6; x++){
        for(y=0; y<=4; y++){
            for(n=1; n<=50; n++){
            square.x[n] = (x*64+44);
            square.y[n] = (y*64+32*6);
            context.drawImage(square.n[n], square.y[n], square.x[n], 64, 64);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
            }
        }
    }
    for(x=7; x<=7; x++){
        for(y=0; y<=3; y++){
            for(n=1; n<=50; n++){
            square.x[n] = (x*64+4);
            square.y[n] = (y*64+32*7);
            context.drawImage(square.n[n], square.y[n], square.x[n], 64, 64);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
            }
        }
    }
    for(x=8; x<=8; x++){
        for(y=0; y<=2; y++){
            for(n=1; n<=50; n++){
            square.x[n] = (x*64-36);
            square.y[n] = (y*64+32*8);
            context.drawImage(square.n[n], square.y[n], square.x[n], 64, 64);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
            }
        }
    }
    for(x=9; x<=9; x++){
        for(y=0; y<=1; y++){
            for(n=1; n<=50; n++){
            square.x[n] = (x*64-38*2);
            square.y[n] = (y*64+32*9);
            context.drawImage(square.n[n], square.y[n], square.x[n], 64, 64);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
            }
        }
    }
    for(x=10; x<=10; x++){
        for(y=0; y<=0; y++){
            for(n=1; n<=50; n++){
            square.x[n] = (x*64-39*3);
            square.y[n] = (y*64+32*10);
            context.drawImage(square.n[n], square.y[n], square.x[n], 64, 64);
            console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
            }
        }
    }
}   

}

---

但是有一个清单是它没有做的，它不允许改变大小，它实际上不是一颗钻石，而且它看起来很笨重，我认为钻石一代会是什么样子。任何帮助都将不胜感激。

您的代码的问题在于，它是一个庞大的代码库，在许多嵌套循环中执行许多不同的操作。如果很难思考您的问题，那么实际上很难对代码进行推理并想出好的方法来简化代码

为简化您的问题，您可以提供一些提示：

for(x=1; x<=1; x++){
    DoSomething();
}

另外，您应该尝试用函数调用替换代码的重复部分。这将使您的代码不那么冗长，更易于使用

例如，所有循环的日志消息都是相同的。尝试将其包装到函数中，以减少冗长

function my_log(x, y, square){
    console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
}

此外，内部循环中似乎有两种代码模式。如果您将这些函数包装起来，可能更容易思考这个问题

请看下面：

function worldGen(){
    var lvl = 100;
    for (x=0; x<=50; x++){
        imageObj.src = "grass.png";
        square.n.push(imageObj);
    }

    function my_log(x, y, square){
        console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
    }

    function task(first, second, x, y, n, square){
        square.x[n] = first;
        square.y[n] = second;
        context.drawImage(square.n[n], square.y[y], square.x[x], 64, 64);
        my_log(x, y, square);
    }

    function task2(first, second, x, y, n, square){
        square.x[n] = first;
        square.y[n] = second;
        context.drawImage(square.n[n], square.y[n], square.x[n], 64, 64);
        my_log(x, y, square);
    }

    //Corner Top
    console.log("Top Corner")
    x=1;
    for(y=0; y<=1; y++){
        for(n=1; n<=50; n++){
            task(x*64+40*5-lvl, y*64+32*3, x, y, square);
        }
    }

    x=2;
    for(y=0; y<=2; y++){
        for(n=1; n<=50; n++){
            task(x*64+40*4-lvl, y*64+32*2, x, y, square);
        }
    }

    x=3;
    for(y=0; y<=3; y++){
        for(n=1; n<=50; n++){
            task(x*64+40*3-lvl, y*64+32*1, x, y, square);
        }
    }

    x=4;
    for(y=0; y<=4; y++){
        for(n=1; n<=50; n++){
            task(x*64+40*2-lvl, y*64, x, y, square);
        }
    }

    x=5;
    for(y=0; y<=5; y++){
        for(n=1; n<=50; n++){
            task(x*64+40-lvl, y*64-32, x, y, square);
        }
    }

    //Center
    console.log("Start Center Gen")
    for(z=0; z<=5; z++){
        x=6;
        for(y=0; y<=5; y++){
            for(n=2; n<=50; n++){
                task(x*64+(24*z)-lvl, y*64+(32*z), x, y, square);
            }
        }

    }
    //Bottom Corner
    console.log("Start Bottom Corner")
    x=6;
    for(y=0; y<=4; y++){
        for(n=1; n<=50; n++){
            task2(x*64+44, y*64+32*6, x, y, n, square);
        }
    }

    console.log("Start Bottom Corner")
    x=6;
    for(y=0; y<=4; y++){
        for(n=1; n<=50; n++){
            task2(x*64+44, y*64+32*6, x, y, n, square);
        }
    }

    x=7;
    for(y=0; y<=3; y++){
        for(n=1; n<=50; n++){
            task2(x*64+4, y*64+32*7, x, y, n, square);
        }
    }

    x=8;
    for(y=0; y<=2; y++){
        for(n=1; n<=50; n++){
            task2(x*64-36, y*64+32*8, x, y, n, square);
        }
    }

    x=9;
    for(y=0; y<=1; y++){
        for(n=1; n<=50; n++){
            task2(x*64-38*2, y*64+32*9, x, y, n, square);
        }
    }

    x=10;
    for(y=0; y<=0; y++){
        for(n=1; n<=50; n++){
            task2(x*64-39*3, y*64+32*10, x, y, n, square);
        }
    }

}   

这个版本的代码稍微短一点，因为它试图在函数中包装重复的代码。然而，可能还有更好的方法来改进它，但它需要对问题的特定领域有更深入的了解

所以我给你的建议是：

尝试为这些函数和参数指定有意义的名称。我真的不知道如何命名它们。 试着找出数字的模式，看看是否有一种方法可以减少正在创建的循环的数量。 有没有一种方法可以封装其中一些对象以简化逻辑？ 此外，重构和逻辑抽象应该是一个持续的过程。下一次，为了避免陷入这样的情况，请在开发过程中尝试进行抽象。这将使以后更容易扩展代码。

@thalesmello

现在就开始编码

function worldGen(){
var lvl = 100;
for (x=0; x<=50; x++){
    imageObj.src = "grass.png";
    square.n.push(imageObj);
    }
 for(x=0; x<=6; x++){
    for(y=0; y<=x; y++){
        for(n=1; n<=25; n++){
            i= Math.floor(Math.random())
            square.x[n] = (x*64-(40*x)+158 - (48));
            square.y[n] = (y*64-(32*x)+250);
            drawDiamonds(n)
            }
        }
    }
 for(x=6; x>=0; x--){
    for(y=0; y<=x; y++){
        for(n=26; n<=50; n++){
            square.x[n] = (x*64-(40*(x+x+x/5)-400));
            square.y[n] = (y*64-(32*x)+250);
            drawDiamonds(n)
            }
        }
    }
}
}
function drawDiamonds(n){
context.drawImage(square.n[n], square.y[n], square.x[n], 64, 64);
cLogDiamonds()
}
function cLogDiamonds(){
console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
}

---

非常感谢你，非常感谢你。它现在产生了惊人的效果

我投票将这个问题作为离题题结束，因为它属于是的，对不起，我应该更清楚标题。已经这样做了，现在更适合论坛了。我真的没有意识到这是存在的，如果我遇到某种类型的问题，我下次会记住它，但你的权利，这更多的是一个代码审查，然后帮助，所以我会全神贯注下一次。谢谢这是非常有益的，我犯了一些非常明显的错误，我没有意识到。因此，在这方面获得一些建议总是有帮助的，我也会接受你的建议，试着从一个清晰的头部开始，将矩形重做成正方形。也许我会注意到一些我以前没有注意到的东西，所以我接受了你的建议，我能够将代码缩短很多，这就是现在的代码祝贺你！现在看起来好多了。

function worldGen(){
var lvl = 100;
for (x=0; x<=50; x++){
    imageObj.src = "grass.png";
    square.n.push(imageObj);
    }
 for(x=0; x<=6; x++){
    for(y=0; y<=x; y++){
        for(n=1; n<=25; n++){
            i= Math.floor(Math.random())
            square.x[n] = (x*64-(40*x)+158 - (48));
            square.y[n] = (y*64-(32*x)+250);
            drawDiamonds(n)
            }
        }
    }
 for(x=6; x>=0; x--){
    for(y=0; y<=x; y++){
        for(n=26; n<=50; n++){
            square.x[n] = (x*64-(40*(x+x+x/5)-400));
            square.y[n] = (y*64-(32*x)+250);
            drawDiamonds(n)
            }
        }
    }
}
}
function drawDiamonds(n){
context.drawImage(square.n[n], square.y[n], square.x[n], 64, 64);
cLogDiamonds()
}
function cLogDiamonds(){
console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+square.x[x]+" | Y Pos: "+square.y[y]);
}