Question

我正在尝试为作业解决问题，目标是建立一个游戏。游戏加载了两个列（div）并排放置的笑脸。左侧div有一个额外的笑脸，如果用户点击那个额外的笑脸，下一轮游戏应该是：

为下一次运行增加表情符号数量
为第二次运行生成一整套新的表情（通过从当前运行中删除现有的表情符号）。

我到目前为止的代码有一个错误。如果我包含用于从当前游戏运行中删除子节点的代码，则在下一次运行时不会添加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个笑脸。改变了小提琴here

Answer 2

在while循环后追加你的孩子：

    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.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png");
            //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);



            //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--;
        }
        theRightSide.appendChild(leftSideImages);
    }


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

查看codepen

在JavaScript中复制子元素[错误]

2 个答案: