如何从像素阵列绘制地图

How to draw map from pixel array

本文关键字：绘制 地图 阵列 像素      更新时间：2023-09-26

我正试图从图像加载地图，我得到了图像上每个像素的十六进制代码，这些代码被放入map[]中。世界[]将存储1或0或精灵表上精灵数量的任何数字。如果颜色是#8aff00，那么它将为草存储0。地图是16乘16像素，这是我的世界大小。当我尝试制作世界数组时，for语句工作正常，没有错误。我知道我有所有的数据，但我的这部分功能不起作用，它只是在以下语句之后停止：

    function createWorld() {
       for (var y=0; y < worldHeight; y++) {
           for (var x=0; x < worldWidth; x++) {
             if (map[pl] == '#8aff00') world[x][y] = 0;
             if (map[pl] == '#000000') world[x][y] = 1;
             pl+=4;
          }
       }
       alert('about to draw');
       draw();
   }

警报从未被调用。当我显示x和y时，它从"0,0"变为"1,0"，然后返回到值x和y的",0"。pl表示我想要的数组的编号。当我放另一个for语句来处理这个问题时，它更糟糕了。代码有问题吗？如果你需要更多的代码，请告诉我。

我已经成功构建了正在运行的代码。

现在轮到你根据需要实施它了。

worldHeight = 16;
worldWidth = 16;
world = {};
map = ['#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000','#8aff00','#000000']
pl = 0
function draw(){
    console.log(world);
}
function createWorld() {
       for (var y=0; y < worldHeight; y++) {
           for (var x=0; x < worldWidth; x++) {
             if (map[pl] == '#8aff00')
                 world[x] = 0;
                 world[x][y] = 0;
             if (map[pl] == '#000000')
                 world[x] = 0;
                 world[x][y] = 1;
             pl+=4;
          }
       }
       alert('about to draw');
       draw();
}
createWorld();

干杯。

相关文章：