Question

我正在尝试自学JavaScript并制作一个小游戏。游戏包括你使用箭头键在html文档上的一个封闭区域移动一个图像（让它称之为主），它将按你想要的方向移动。对象在屏幕上随机出现一次，当主图像位于其上时，对象消失。

我一直在使用apendChild使图像随机出现在Math.Random中。对象移动，但缺少的是如何在图像顶部移动后去掉图像。你会怎么做？另一个删除孩子，或其他什么？

代码超过150行。这是我放置appendChild和removeChild的地方，但不确定这是否正确。我还调用了一个名为toPlay（）的位置，它将设置Interval和docReady。

var imgC = document.createElement("img");
imgC.src = “image.jpg”;
imgC.id = "food";


   function man() {    

     var food1 = document.getElementById("food");
     var man1 = document.getElementById("man");
     var blue = Math.floor(Math.random()*3);

     if(blue === 0) {
       var box1 = document.getElementById("box").appendChild(imgC);

       var manTop = (Math.floor(Math.random() * 20) *25);
       var manLeft = (Math.floor(Math.random() * 20) * 25);   

       food.style.position = 'absolute';
       food.style.top = manTop + "px";
       food.style.left = manLeft + "px";
     }
       else {
       var box = document.removeChild(box1); 
     } 
   }

   function toPlay() { 
     setInterval(man, 5000);
   }

   function docReady() {
     window.addEventListener('keydown', moveSelection); 
   }
   toPlay();

Answer 1

您应该从父元素中删除子元素：

num1 = '1'
num2 = '2'
num3 = '3'
num4 = '4'
num5 = '5'
num6 = '6'
num7 = '7'
num8 = '8'
num9 = '9'
player1_mark = "X"
player2_mark = "O"
endgame = False

def drawBoard():
    ''' Prints the board'''
    print

def win(x):
    if (num1 == x and num2 == x and num3 == x):
        drawBoard()
        print "The computer wins!"
        endgame = True
    elif (num1 == x and num5 == x and num9 == x):
        drawBoard()
        print "The computer wins!"
        endgame = True
    elif (num1 == x and num4 == x and num7 == x):
        drawBoard()
        print "The computer wins!"
        endgame = True
    elif (num4 == x and num5 == x and num6 == x):
        drawBoard()
        print "The computer wins!"
        endgame = True
    elif (num7 == x and num8 == x and num9 == x):
        drawBoard()
        print "The computer wins!"
        endgame = True
    elif (num7 == x and num5 == x and num3 == x):
        drawBoard()
        print "The computer wins!"
        endgame = True
    elif (num1 == x and num2 == x and num3 == x):
        drawBoard()
        print "The computer wins!"
        endgame = True
    elif (num8 == x and num5 == x and num2 == x):
        drawBoard()
        print "The computer wins!"
        endgame = True
    elif (num9 == x and num6 == x and num3 == x):
        drawBoard()
        print "The computer wins!" 
        endgame = True
    elif (num1 != '1' and num2 != '2' and num3 != '3' and num4 != '4' and num5 != '5' and num6 != '6' and num7 != '7' and num8 != '8' and num9 != '9'):
        drawBoard()
        print "Draw"
        endgame = True

'''Lets say that the player gets the row 1 2 and 3'''
num1 = 'X'
num2 = 'X'
num3 = 'X'
while True:
    win(player1_mark)
    while endgame == True:
        print 'You win!'
        break

Answer 2

一旦函数执行完毕，

box1就会超出范围。

因此，当您致电var box = document.removeChild(box1);时，它将找不到名为box1

的元素

var imgC = document.createElement("img");
imgC.src = “image.jpg”;
imgC.id = "food";

var box1;// <-- this grants global scoping, which is bad, but solves you problem ;)
function man() {

    var food1 = document.getElementById("food");
    var man1 = document.getElementById("man");
    var blue = Math.floor(Math.random()*3);

    if(blue === 0) {
        //removing var from here removes the local scope and allows box1 to persist.
        box1 = document.getElementById("box").appendChild(imgC);

        var manTop = (Math.floor(Math.random() * 20) *25);
        var manLeft = (Math.floor(Math.random() * 20) * 25);


        food1.style.position = 'absolute';
        food1.style.top = manTop + "px";
        food1.style.left = manLeft + "px";
    }
    else {
        //you can then call it like this
        document.getElementById("box").removeChild(box1);
        //or imgC.parentNode.removeChild(imgC) like RobG points out
    }
}

function toPlay() {
    setInterval(man, 5000);
}

function docReady() {
    window.addEventListener('keydown', moveSelection);
}
toPlay();

Answer 3

在您的代码中：

var imgC = document.createElement("img");
imgC.src = “image.jpg”;
imgC.id = "food";

   function man() {    

   var food1 = document.getElementById("food");

这似乎是多余的，因为您已经将该元素引用为 imgC 。如果 imgC 尚未添加到文档中， food1 将为null。

   if(blue === 0) {
     var box1 = document.getElementById("box").appendChild(imgC);

这会将 imgC 的另一个引用创建为 box1 。

...
     else {
         var box = document.removeChild(box1);

box1 （又名 imgC ）附加到ID为“box”的节点，而不是文档， removeChild 仅适用于直接子项一个节点，而不是任何后代。要删除节点，您可以使用：

  imgC.parentNode.removeChild(imgC);

或在此特定情况下，因为 imgC 是id为“box”的节点的子节点：

document.getElementById("box").removeChild(imgC);

在JavaScript中使用RemoveChild和AppendChild

3 个答案: