javascript - 在 JavaScript 中复制子元素 [Bug]

Question

我正在尝试解决任务的问题，目标是构建游戏。游戏加载了横跨并排放置的两列 (divs) 的笑脸。左边的 div 上有一个额外的笑脸，如果用户点击那个额外的笑脸，游戏的下一次运行应该:

1. 为下一次运行增加 5 个笑脸
2. 为第二次运行生成一组全新的笑脸(通过从当前运行中删除现有笑脸)。

我目前的代码有一个错误。如果我包含用于从当前游戏运行中删除子节点的代码，则在下一次运行中不会再添加 5 个笑脸。如果我删除这段代码，那么在下一次运行中，会再添加 5 个笑脸，但之前的笑脸位于同一位置(这意味着它们不会被删除)。

这是JS代码:

var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");
    var theRightSide = document.getElementById("rightSide");
    var theBody = document.getElementsByTagName("body")[0];


    function generateFaces() {

        //remove current children
        while(theLeftSide.firstChild){
                theLeftSide.removeChild(theLeftSide.firstChild);
            }

        while(theRightSide.firstChild){
                theRightSide.removeChild(theRightSide.firstChild);
            }

        while(numberOfFaces > 0) {
            var face = document.createElement("img");
            face.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
            var topValue = generateRandomNumber(0,400);
            face.style.top = topValue+"px";
            var leftValue = generateRandomNumber(0,400);
            face.style.left = leftValue+"px";
            theLeftSide.appendChild(face);

            //changes
            var leftSideImages = theLeftSide.cloneNode(true);
            var leftSideLastImage = leftSideImages.lastChild;
            leftSideImages.removeChild(leftSideLastImage);
            theRightSide.appendChild(leftSideImages);


            //4th - generate 5 more faces for correct click in left side
            theLeftSide.lastChild.onclick = function nextLevel(event){
                event.stopPropagation();
                numberOfFaces += 5;
                generateFaces();
            };

            theBody.onclick = function gameOver() {
                alert("Game Over!");
                theBody.onclick = null;
                theLeftSide.lastChild.onclick = null;
            }; 

            numberOfFaces--;
        }

    }


    function generateRandomNumber(min, max) {
        return Math.floor(Math.random() * (max-min + 1));
    }

这是 Fiddle 的链接.

我还做了一个Codepen具有相同代码的笔。

非常感谢任何帮助。

---

更新 -

我的函数结构与之前的尝试有些不同。我根据一些论坛评论对其进行了修改。这是早期的结构-

function generateFaces() {

    //remove current children
    while(theLeftSide.firstChild){
            theLeftSide.removeChild(theLeftSide.firstChild);
        }

    while(theRightSide.firstChild){
            theRightSide.removeChild(theRightSide.firstChild);
        }

    while(numberOfFaces > 0) {
        var face = document.createElement("img");
        face.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
        var topValue = generateRandomNumber(0,400);
        face.style.top = topValue+"px";
        var leftValue = generateRandomNumber(0,400);
        face.style.left = leftValue+"px";
        theLeftSide.appendChild(face);
        numberOfFaces--;
    }

        //changes
        var leftSideImages = theLeftSide.cloneNode(true);
        var leftSideLastImage = leftSideImages.lastChild;
        leftSideImages.removeChild(leftSideLastImage);
        theRightSide.appendChild(leftSideImages);


        //4th - generate 5 more faces for correct click in left side
        theLeftSide.lastChild.onclick = function nextLevel(event){
            event.stopPropagation();
            numberOfFaces += 5;
            generateFaces();
        };

        theBody.onclick = function gameOver() {
            alert("Game Over!");
            theBody.onclick = null;
            theLeftSide.lastChild.onclick = null;
        }; 

        //numberOfFaces--;


}

Answer 1

您在 while 循环中将 numberOfFaces 递减为零，然后再次加 5，因此值始终为 5。

将while循环改为

for(var n = 0; n < numberOfFaces; n++) {
    var face = document.createElement("img");
    face.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
    var topValue = generateRandomNumber(0,400);
    face.style.top = topValue+"px";
    var leftValue = generateRandomNumber(0,400);
    face.style.left = leftValue+"px";
    theLeftSide.appendChild(face);


    ...
}

并且每次运行都会增加额外的 5 个笑脸集。改变的 fiddle here