匹配游戏.Javascript.DOM lastChild

Matching Game. Javascript. DOM lastChild

本文关键字：DOM lastChild Javascript 游戏      更新时间：2023-09-26

有一个简单的游戏。左侧和右侧是相同的，除了一件事：左侧有一个额外的面。用户需要找到并点击那个额外的人脸（lastChild）。它将触发将面数量增加一倍的功能。

问题是，我游戏中的所有面孔都是lastChild。问题出在哪里？

谢谢！

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
  <title>Matching Game. Part 3.</title>
  <style>
    img {
      position: absolute;
    }
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    #rightSide {
      left: 500px;
      border-left: 1px solid black;
    }
  </style>
  <script>
function generateFaces(){
  var numberOfFaces = 5;
  //var theLeftSide = document.getElementById("leftSide");
    for(var i=0; i < numberOfFaces; i++) {
        var smileImage = document.createElement("img");
        smileImage.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
        var topPosition = Math.floor(Math.random()* 400) + 1;
        var leftPosition = Math.floor(Math.random()* 400) + 1;
        smileImage.style.top = topPosition + "px";
        smileImage.style.left = leftPosition + "px";
        leftSide.appendChild(smileImage);
    var leftSideImages = leftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    rightSide.appendChild(leftSideImages);
    leftSide.lastChild.style.background = "red";
    var theBody = document.getElementsByTagName("body")[0];
    leftSide.lastChild.onclick = function nextLevel(event) {
    event.stopPropagation();
    numberOfFaces += 5;
    generateFaces();
    }          
    }
}  

</script>
</head>
<body onload = "generateFaces()">
   <h1>Matching Game</h1>
   <p>Click on the extra smiling face on the left.</p>
   <div id="leftSide"></div>
   <div id="rightSide"></div>     
</body>    
</html>

您正在将单击事件绑定到循环中的每个元素。您首先需要覆盖上一个处理程序，然后将其重新绑定到最后一个元素。

function generateFaces(){
  var numberOfFaces = 5;
  var leftSide = document.getElementById("leftSide");
var rightSide = document.getElementById("rightSide");
    for(var i=0; i < numberOfFaces; i++) {
        var smileImage = document.createElement("img");
        smileImage.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
        var topPosition = Math.floor(Math.random()* 400) + 1;
        var leftPosition = Math.floor(Math.random()* 400) + 1;
        smileImage.style.top = topPosition + "px";
        smileImage.style.left = leftPosition + "px";
        leftSide.appendChild(smileImage);
    var leftSideImages = leftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    rightSide.appendChild(leftSideImages);
    leftSide.lastChild.style.background = "red";
    var theBody = document.getElementsByTagName("body")[0];         
    }
    var pics = document.getElementsByTagName("img");
    for(i=0;i<pics.length;i++){
    	pics[i].onclick = function() {
     		return false;
   		}
    }
    leftSide.lastChild.onclick = function nextLevel(event) {
    event.stopPropagation();
    numberOfFaces += 5;
    generateFaces();
    } 
}  
    img {
      position: absolute;
    }
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    #rightSide {
      left: 500px;
      border-left: 1px solid black;
    }
<body onload = "generateFaces()">
   <h1>Matching Game</h1>
   <p>Click on the extra smiling face on the left.</p>
   <div id="leftSide"></div>
   <div id="rightSide"></div>     
</body>

相关文章：