Question

我现在正在创建的javascript游戏中具有拖放功能。我给了它听的条件，如果满足条件，游戏将进入下一个阶段。（如果数字图像符合给定条件，而给定的水果图像符合条件，则允许放下并重新加载下一个数字图像。）这些图像都存储在数组中。为了显示它们，我设置了div的背景图像。

问题是附加的水果图像将保持在相同位置。我尝试使用removeChild（）但删除了整个div。还尝试创建一个新的div来替换已删除的div。它确实创建了一个新的div，但仍保留在它所在的位置。

是否可以撤消appendChild？

function createDiv() {
    var newDiv = '<div id="fruit2" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)"></div>';
    var parentDiv = document.getElementById("fruitCloud2");
    parentDiv.appendChild(newDiv);
}

function stage2() {
    createDiv();
    
    document.getElementById("number").style.backgroundImage = "url(" + numberAddress + myNumber[1] + ")";
    document.getElementById("fruit1").style.backgroundImage = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";
    document.getElementById("fruit2").style.backgroundImage = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";
    document.getElementById("fruit3").style.backgroundImage = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
}

function allowDrop(ev) {
    ev.preventDefault();
}

function dragStart(ev) {
    ev.dataTransfer.setData("fruit", ev.target.id);
}

function onDrop(ev) {
  ev.preventDefault();
  
  if (document.getElementById("number").style.backgroundImage == 'url("' + numberAddress + myNumber[0] +'")' && document.getElementById("fruit2").style.backgroundImage == 'url("' + fruit2Address + fruitCloudTwo[0] + '")') {
      var dropSource = ev.dataTransfer.getData("fruit");
      ev.target.appendChild(document.getElementById(dropSource));
      stage2();
      ev.target.removeChild(document.getElementById(dropSource));
  }
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    background-color: black;
}

#background {
    position: absolute;
    background-image: url(Assets/Background_cloudPosition.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0%;
    z-index: -10;
}

#startGame {
    position: absolute;
    left: 90px;
    width: 80px;
    height: 80px;
    background-color: green;
}

#refreshFruits {
    position: absolute;
    left: 180px;
    width: 80px;
    height: 80px;
    background-color: blue;
}

#number {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 450px;
    bottom: 415px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
}

#fruitCloud1 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 460px;
    left: 135px;
    z-index: 15;
}

#fruitCloud2 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 320px;
    left: 300px;
    z-index: 15;
}

#fruitCloud3 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 185px;
    left: 110px;
    z-index: 15;
}

#fruit1 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#fruit2 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#fruit3 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#jelly {
    position: absolute;
    background-image: url(Assets/JellyMonster/JellyMonsterDefault.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 260px;
    height: 190px;
    bottom: 50px;
    right: 390px;
    z-index: 10;
}

<html>
    
<head>
    
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script type="text/javascript" src="javascript.js"></script>
    <title>This is an experiment.</title>
    
</head>
    
<body>
<!--- --->
<button id="download" onclick="download()"></button>
    
<button id="startGame" onclick="startGame()"></button>
<button id="refreshFruits" onclick="refreshFruits()"></button>

<div id="number"></div>
    
<div id="jelly" ondrop="onDrop(event)" ondragover="allowDrop(event)" ></div>

<div class="fruit" id="fruitCloud1">
    <div id="fruit1" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)"></div>
</div>

<div class="fruit" id="fruitCloud2">
    <div id="fruit2" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)"></div>
</div>
    
<div class="fruit" id="fruitCloud3">
    <div id="fruit3" draggable="true" ondragstart="dragStart(event)" ondragend="dragEnd(event)"></div>
</div>

</body>
    
</html>

Answer 1

我自己找到了答案。我没有删除子项（dropsource），而是将可见性设置为隐藏。然后，在下一阶段的功能上，我将其设置回可见状态，并将水果div附加回其父div，即其ID为fruitcloud的div。

是否可以在不删除子节点的情况下吊销appendChild？

1 个答案: