在Javascript中更改obj.innerHTML？生命游戏

Question

我已经在Javascript中实现了生命游戏。我正在考虑制作一个可以选择颜色列表的组合框。从那里我想在游戏中渲染我的网格单元的obj.innerHTML img源。什么是最好的方法呢？

以下是我目前为游戏编写的代码：

    <br>
    <canvas id="canvas" width="100%" height="80%"></canvas>

    <button onClick="generateLevel()">Create New Board</button>
    <button onClick="step()">Step</button>
    <button onClick="multiStep()">Multistep</button>    

    <script type="text/javascript">

    var level;
    var lastLevelDrawn;
    var lvlWidth = 0;
    var lvlHeight = 0;

    function step()
    {

        var tempLevel = new Array(lvlHeight);
        for (var y = 0; y < lvlHeight; y++)
        {
            tempLevel[y] = new Array(lvlWidth);
            for (var x = 0; x < lvlWidth; x++)
            {
                var liveNeighborCount = 0;
                var status = level[y][x];
                for (var k = y-1; k < y+2; k++)
                {
                    for (var j = x-1; j < x+2; j++)
                    {
                        if (k == y && j == x)
                        {

                        }
                        else if (k >= 0 && k < lvlHeight && j >= 0 && j < lvlWidth)
                        {
                            if (level[k][j] == "1")
                            {
                                liveNeighborCount++;
                            }
                        }   
                    }
                }

                if (level[y][x] == "1")
                {
                    if (liveNeighborCount != 2 && liveNeighborCount != 3)
                    {
                        status = "0";
                    }

                }
                if (level[y][x] == "0")
                {
                    if (liveNeighborCount == 3)
                    {
                        status = "1";

                    }

                }
                tempLevel[y][x] = status;                   
            }
        }
        level = tempLevel;
        render();
    }       

    function multiStep()
    {
                    var steps = prompt("How many steps do you want to step?", "10");
        for (var x = 0; x < steps; x++)
            step();
    }   

    function generateLevel()
    {

        var width = prompt("How many cells wide?", "10");
        var height = prompt("How many cells high?", "10");
        lvlWidth = width;
        lvlHeight = height;
        var output = "";
        if (width != null && height != null)
        {
            level = new Array(lvlHeight);
            lastLevelDrawn = new Array(lvlHeight);
            for (var y = 0; y < height; y++)
            {
                level[y] = new Array(lvlWidth);
                lastLevelDrawn[y] = new Array(lvlWidth);
                for (var x = 0; x < width; x++)
                {
                    level[y][x] = Math.floor((Math.random()*2));
                    lastLevelDrawn[y][x] = -1;
                    output += " " + level[y][x];
                }
                output += "<br>";
            }
        }

        //document.getElementById("demo").innerHTML=output;
        setupRender();
    }

    function changeTile(tile)
    {
        var x = tile % lvlWidth;
        var y = parseInt(tile/lvlWidth);
        //document.getElementById("demo").innerHTML=x + ":" + y;
        if (level[y][x] == "1")
            level[y][x] = "0";
        else
            level[y][x] = "1";

        render();           
    }

    function render()
    {
        var widPer = ((1/lvlWidth)*90);
        var heiPer = ((1/lvlHeight)*70);
        for (var y = 0; y < lvlHeight; y++)
        {
            for (var z = 0; z < lvlWidth; z++)
            {
                var send = y*lvlWidth + z;
                if (lastLevelDrawn[y][z] != level[y][z])
                {
                    lastLevelDrawn[y][z] = level[y][z];
                    var obj = document.getElementById(send);
                    if (level[y][z] == "1")
                        obj.innerHTML = "<img src='white.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/>";
                    else 
                        obj.innerHTML = "<img src='black.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/>";
                }
            }
        }
    }


    function setupRender()
    {   
        var x = "";
        var widPer = ((1/lvlWidth)*90);
        var heiPer = ((1/lvlHeight)*70);
        //x += "<table border='1' col width='((1/lvlWidth)*100)%' col height='((1/lvlHeight)*80)%'>";
        for (var y = 0; y < lvlHeight; y++)
        {
            //x += "<tr>";
            for (var z = 0; z < lvlWidth; z++)
            {
                lastLevelDrawn[y][z] = level[y][z];
                //x += level[y][z];
                var send = y*lvlWidth + z;
                x += "<n id='" + send + "'>";
                if (level[y][z] == "1")
                    x += "<img src='white.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/>";
                else 
                    x += "<img src='black.jpg' width='" + widPer + "%' height='" + heiPer + "%' onclick='changeTile(" + send + ")'/>";
                x += "</n>";

            }
            x += "<br>";
            //x += "</tr>";
        }
        //x += "</table>";
        document.getElementById("demo").innerHTML=x;
    }       

    </script>