Javascript 平铺地图。 （带有表情符号）

Question

I want to make a code that can generate maps. I tried this:

      var mapArray = [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ,1, 1, 1, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ,1, 1, 1, 1],
    ];
    
    function drawMap() {  
        let map = "";
        for (var y = 0; y < mapArray.length; y++) {
            for (var x = 0; x < mapArray[y].length; x++) {
                if (parseInt(mapArray[y][x]) == 0) {
                  var title = map.concat("⬛");
                }
                if (parseInt(mapArray[y][x]) == 1) {
                  var title = map.concat("⬜");
                }
                if (parseInt(mapArray[y][x]) == 2) {
                  var title = map.concat("🔴");
                }
                if (parseInt(mapArray[y][x]) == 3) {
                  var title = map.concat("🔵");
                }
                title.x = x * 28;
                title.y = y * 28;
                console.log(map)
                return map;
            }
        }
    }   
    drawMap()

I tried this code but it logged empty. Then I tried to move console.log(map) to end of the function and it logged empty again.

Answer 1

first, you can iterate through array with .map() function, my guess you trying to do so

Second, your if approach is not really scalable you will need to write more if statements when new numbers goona be in your map (4, 5, 6 for example)

Combination of these two:

// dictionary for storing number:image pair
const dictionary = {
  0: "⬛",
  1: "⬜",
  2: "🔴",
  3: "🔵"
}

// function arguments is array and tictionary
function transformArray(arr, dict) {
  // iterating through every `insideArray` in `arr`
  return arr.map(insideArray => {
    // iterating through every `item` in `insideArray`
    return insideArray.map(item => {
      // trying to lookup image in dictionary
      // if there is no `item` key - return default value ""
      return dict[item] || ""
    })
  })
}

const tranfsormedArray = transformArray(mapArray, dictionary)

console.log(transformedArray)