Question

我正在使用一些javascript创建一个漂亮的小图像“地图”。我并不是指像映射部分图像的图像映射，但我的意思是根据算法产生的设置模式将预设图像形成一个数组。

如何制作图像以使图像具有某种基本图案？

[编辑1]

我确实理解我需要首先按列创建图像，然后按行创建。

***我现在正在重写格式以执行上述操作。

如果它有帮助，我希望草在上面，然后在那之下的三个街区的污垢，然后在那些下面的石头和鹅卵石。草总是一层深，我想要在顶部的空气给块感高度。空气可以是任何高度，但它必须高于或低于它旁边的空气。

[/ edit 1]

[编辑2]

这是到目前为止的链接： http://cl.ly/2s1h213E332r3i3v2a01

以下是该网站的拉链： http://cl.ly/1T0f2P1G333T1N1u0c31

我试图让它看起来更有条理，就像我在[编辑1]中所描述的那样。

[/ edit 2]

<html>
<body>
<script type="text/javascript">

var blockList = 'air,stone,grass,dirt,cobble,plank';

function blockGetId(ID) {
    var blockGet = blockList.split(",")[ID];
    return '<img src="images/' + blockGet + '.png" />';
}

function blockRandom() {
    var blockCount = blockList.split(",").length;
    var blockId = Math.round(Math.random()*(blockCount-1));
    document.write(blockGetId(blockId));
}

function rowTable(width) {
    var w = 0;

    while ( w < width ) {
        document.write('<td class="cell">');
        blockRandom();
        document.write(' </td>');
        w++;
    }
}

function blockTable(width, height) {
    var h = 0;

    document.write('<table class="cell"><style>.cell{width:16px;height:16px;colspacing:0px;margin:0px;padding:0px;}.cell hover{border: 5px;}</style>');
    while ( h < height ) {
        document.write('<tr class="cell">');
        rowTable(width);
        document.write('</tr>');
        h++;
    }
    document.write('</table>');
}

blockTable(25,25);

</script>
</body>
</html>

Answer 1

看看Amit Patel关于simple map generation的博客。这可以激发您使用地图生成算法。地图使用Perlin noise。

如何使用算法使用预设图像随机生成“地图”？

1 个答案: