Question

运行函数后，我很难弄清楚如何将图像插入到表格单元格中。分配的目的是“在HTML表格中显示来自模型的信息。该显示将游戏进行中，游戏对象放置在网格中。” 当我运行gen（）函数时，它将向控制台记录每个单元格的行和列以及应该显示的图像，但是我无法弄清楚如何显示图像。我想我正确地创建了图像，但是我找不到任何地方可以用图像替换单元格的内容。我将包括gen（）函数以及gen（）和游戏状态中使用的getSquare（）

如果需要，我还可以包括用于生成表的代码。

我能够找到的所有东西都在使用类似 document.getElementById（'container'）。appendChild（img）; 如果这是正确的方法，那么我对如何实现它会感到困惑。

gen（）

function gen(rows, cols) {
        for (r = 0; r < rows; r++) {
        for (c = 0; c < cols; c++) {
            var content = getSquare(r, c);
            if (content == 1) {
            // Image for piece 1
            var img1 = document.createElement('img');
            img1.src = '01.png';
            console.log("row: " + r + " col: " + c + " image: 01");
            }if (content == 2) {
            // Image for piece 2
            console.log("row: " + r + " col: " + c + " image: 02");
            }
            if (content == 3) {
            // Image for piece 3
                console.log("row: " + r + " col: " + c + " image: 03");
            // Image for piece 4
                console.log("row: " + r + " col: " + c + " image: O4");
            }
            if (content == 5) {
            // Image for piece 5
                console.log("row: " + r + " col: " + c + " image: 05");
            }if (content == 6) {
            // Image for piece 6
                console.log("row: " + r + " col: " + c + " image: O6");
            }
            if (content == 7) {
            // Image for piece 7
                console.log("row: " + r + " col: " + c + " image: 07");
            }if (content == 8) {
            // Image for piece 8
                console.log("row: " + r + " col: " + c + " image: O8");
                }if (content == 9) {
            // Image for piece 9
                    console.log("row: " + r + " col: " + c + " image: 09");
                }else if (content == 0) {
            //0 Is the blank square
                    console.log("row: " + r + " col: " + c + " This is the blank space");
                }
        }
        }
    }

getSquare（）

  function getSquare(row, col) {
    return grid[row][col];
 }

游戏状态

  var grid = [[1, 3, 2],        //0
              [4, 7, 9],        //1
              [5, 0, 6]];       //2
  var gameOver = false;

目标是转换使用JS生成的此表 https://i.imgur.com/4NtquxP.png

到此表 https://i.imgur.com/T9xzuvj.png

在控制台中运行gen（）可以正常工作，我只是不知道如何生成和显示图像。 https://i.imgur.com/0cAm5ch.png

运行函数后

0 个答案: