如何使用等距PNG阵列更好地创建类似钻石的形状

时间：2015-01-29 15:28:49

标签： javascript html

我想创建一个带等距块的磁贴系统我经过大量的试验和错误后才能使用这段代码，

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]);
            }
        }
    }
}

}

但是有一系列它没有做的事情，它不允许改变尺寸，它实际上并不是钻石，而且我认为钻石看起来很笨重一代人看起来像。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分：1)

代码的问题在于，在许多嵌套循环中，代码执行很多不同的事情是一大堆代码。如果很难对你的问题进行思考，那么实际上很难对这些代码进行推理并提出简化它的好方法。

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

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

您正在创建一个for循环，以便x的值仅分配一次。你可以通过摆脱它来简化它。

x = 1;
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);
        }
    }

}

这个版本的代码稍短，因为它试图在函数中包含重复的代码。但是，可能仍有更好的方法来改进它，但它需要更深入地了解问题的具体领域。

所以我的建议是：

  • 尝试为这些函数和参数赋予有意义的名称。我真的不知道怎么命名他们。
  • 尝试找出数字的模式，看看是否有办法减少你正在创建的循环量。
  • 有没有办法可以封装其中一些对象以简化逻辑？

此外，重构和逻辑抽象应该是一个持续的过程。下一次，为了避免陷入这种情况，尝试在开发过程中进行抽象。它可以让您以后更轻松地扩展代码。

答案 1 :(得分：1)

@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]);
}

非常感谢你，非常感谢你。它现在生成了很棒的

相关问题
最新问题