Question

我这样做，让我们说，游戏是为了学习目的。

游戏如下：

有一个棋盘（这是我的网格：坐标数组）

还有一些，让我们称之为 blobs ，这些 blob 会在棋盘上随机移动

移动时， blob 可以 自行复制 。

我的目标：

是使用循环和 blob >的setTimeout（）

为何选择setTimeout？

因为我不希望他们同时在棋盘上移动：）

我的问题：

当 blob重复 时，网页上会使用Jquery 注入新的 DOM元素。但是，循环已经完成了它的工作而 因为setTimeout ，当循环为每个blob分配新位置时，新的DOM元素不存在。

结果：

只有游戏开始时 。

我的代码示例（简化）：

for (var cycles = 1; cycles <= this.cycles + 1; cycles ++) 
{           
    for (var t = 0; t < CHARACTERS_LIST.length; t++)    // t => Character Type
    {   
        if (CHARACTERS_LIST[t].length != 0) 
        {
            for (var i = 0; i < CHARACTERS_LIST[t].length; i++)     // i => Index
            {
                    // Moves the blob on the chessboard
                    //
                    // ***********************************************

                    MoveCharacter(t, i);                
            }
        }
    }
}

//********************************************************************

var loop = 1;

function MoveCharacter(t, i){
    CHARACTERS_LIST[x][y].moveAndDupicate();    // Duplicates if Math.ramdon succeeds
    LOG.characterHistory();         // Log/Log.js

    setTimeout( function(x, y) { return function() { 
        if (!CHARACTERS_LIST[x][y].isBorn) {
            if (x == 0) {

                $('#blue-blob .blob:nth-child(' + (y+1) + ')').css({
                    'top'  : CHARACTERS_LIST[x][y].posY + 'em',
                    'left' : CHARACTERS_LIST[x][y].posX + 'em'
                });

            } else if (x == 1) {

                $('#green-blob .blob:nth-child(' + (y+1) + ')').css({
                    'top'  : CHARACTERS_LIST[x][y].posY + 'em',
                    'left' : CHARACTERS_LIST[x][y].posX + 'em'
                });

                } else if (x == 2) {

                    $('#red-blob .blob:nth-child(' + (y+1) + ')').css({
                        'top'  : CHARACTERS_LIST[x][y].posY + 'em',
                        'left' : CHARACTERS_LIST[x][y].posX + 'em'
                    });

            } else if (x == 3) { 

                $('#special-blob .blob:nth-child(' + (y+1) + ')').css({
                    'top'  : CHARACTERS_LIST[x][y].posY + 'em',
                    'left' : CHARACTERS_LIST[x][y].posX + 'em'
                });
            }
        } else {

            CHARACTERS_LIST[x][y].isBorn = false;

            var _blob, _inner;
            _blob  = document.createElement('div');
            _blob.className  = "blob";
            _inner = document.createElement('div');             
            _inner.className = "inner";
            _blob.appendChild(_inner);

            if(CHARACTERS_LIST[x][y] instanceof BlueBlob){
                _inner.style = "background-color:#52DE71;";
                _blob.style  = "top:"  + CHARACTERS_LIST[x][y].posY + "em;"
                             + "left:" + CHARACTERS_LIST[x][y].posX + "em;";
                $('#blue-blob').append(_blob);
            } else if (CHARACTERS_LIST[x][y] instanceof GreenBlob){
                _inner.style = "background-color:#5299DE;";
                _blob.style  = "top:"  + CHARACTERS_LIST[x][y].posY + "em;"
                             + "left:" + CHARACTERS_LIST[x][y].posX + "em;";
                $('#green-blob').append(_blob);
            }
        }
    }}(t, i), 100*loop);

    loop++;
}

因此... ：


就像我说的那样，只有 blob 在游戏开始时，才会收到新的位置。

每个周期， CHARACTERS_LIST [] 会更新。

问题似乎在这里： .blob：nth-child（＆＃39; +（y + 1）+＆＃39;）＆＃39;） ，因为尚未创建此元素。（我想......）

我似乎无法找到问题，但我确定这只是上述代码中的一些小问题！

Answer 1

问题在于我试图使用DOM元素和Jquery（效率不高）来实现所有这些。我使用了 html canvas ，一切正常。

使用setTimeout操作通过循环生成的新DOM元素

1 个答案: