Question

我正在努力学习Dom操作，几乎完成了这种游戏。基本上游戏在左边产生5个图像，在右边产生4个图像，你单击奇数一个，然后在左边生成10个，在右边生成9个（每次+5）。

我希望每次点击最后一个子节点（ofLeftSide）时，我的nextlevel函数都能正常工作。它是第一次工作，但在那之后无论我是否点击了正确的节点，我的gameOver函数被调用，我不知道为什么。我尝试删除游戏功能，仍然是第二次我希望我的nextLevel运行（点击后），它没有。我是以完全错误的方式来做这件事的吗？感谢您的任何意见。离开我的gameOver函数，这样你就可以看到我想用它做什么。

＆＃13;

var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
var facesNeeded = 5;
var totalfFaces = 0;
var theBody = document.getElementsByTagName("body")[0];

function makeFaces() {
  while (facesNeeded != totalfFaces) {
    smiley = document.createElement("img");
    smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
    smiley.style.top = Math.random() * 401 + "px";
    smiley.style.left = Math.random() * 401 + "px";
    document.getElementById("leftside").appendChild(smiley);
    totalfFaces++;
    // alert(totalfFaces); used to debug
  }
  if (facesNeeded == totalfFaces) {
    //alert(facesNeeded);
    //alert(totalfFaces);
    leftSideImages = theLeftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    document.getElementById("rightside").appendChild(leftSideImages);
    //alert("hi");
  }
}

makeFaces();

function delFaces(side) {
  while (side.firstChild) {
    side.removeChild(side.firstChild);
  }

}

theLeftSide.lastChild.onclick = function nextLevel(event) {
  event.stopPropagation();
  delFaces(theRightSide);
  delFaces(theLeftSide);
  totalfFaces = 0;
  facesNeeded += 5;
  //alert(facesNeeded);
  //alert(totalfFaces);
  makeFaces();

};

theBody.onclick = function gameOver() {
  alert("Game Over!");
  theBody.onclick = null;
  theLeftSide.lastChild.onclick = null;

};

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    img {
      position: absolute;
    }
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    #rightside {
      left: 500px;
      border-left: 1px solid black;
    }
  </style>

</head>

<body>
  <h1> Matching Game</h1>
  <p>Click on the extra smiling face on the left</p>
  <div id="leftside"></div>
  <div id="rightside"></div>
  <script src="script3.js"></script>
</body>

</html>

＆＃13;

Answer 1

您只需要在onclick之后移动makeFaces内的while，因此每次创建后都会添加var theLeftSide = document.getElementById("leftside"); var theRightSide = document.getElementById("rightside"); var facesNeeded = 5; var totalfFaces = 0; var theBody = document.getElementsByTagName("body")[0]; function makeFaces() { while (facesNeeded != totalfFaces) { smiley = document.createElement("img"); smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; smiley.style.top = Math.random() * 401 + "px"; smiley.style.left = Math.random() * 401 + "px"; document.getElementById("leftside").appendChild(smiley); totalfFaces++; // alert(totalfFaces); used to debug } if (facesNeeded == totalfFaces) { //alert(facesNeeded); //alert(totalfFaces); leftSideImages = theLeftSide.cloneNode(true); leftSideImages.removeChild(leftSideImages.lastChild); document.getElementById("rightside").appendChild(leftSideImages); //alert("hi"); } theLeftSide.lastChild.onclick = function nextLevel(event) { event.stopPropagation(); delFaces(theRightSide); delFaces(theLeftSide); totalfFaces = 0; facesNeeded += 5; //alert(facesNeeded); //alert(totalfFaces); makeFaces(); }; } makeFaces(); function delFaces(side) { while (side.firstChild) { side.removeChild(side.firstChild); } } theBody.onclick = function gameOver() { alert("Game Over!"); theBody.onclick = null; theLeftSide.lastChild.onclick = null; };： -

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    img {
      position: absolute;
    }
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    #rightside {
      left: 500px;
      border-left: 1px solid black;
    }
  </style>

</head>

<body>
  <h1> Matching Game</h1>
  <p>Click on the extra smiling face on the left</p>
  <div id="leftside"></div>
  <div id="rightside"></div>
  <script src="script3.js"></script>
</body>

</html>

＆＃13;

 # Define the fields we want to save from the form
     fields <- c("name", "used_shiny", "r_num_years")
    #connect to MySQL

    options(mysql = list(
      "host" = "127.0.0.1",
      "port" = 3306,
      "user" = "root",
      "password" = ""
      ))
    databaseName <- "myshinydatabase"
     table <- "responses"
     saveData <- function(data) {
       # Connect to the database
       db <- dbConnect(MySQL(), dbname = databaseName, host = options()$mysql$host, 
               port = options()$mysql$port, user = options()$mysql$user, 
              password = options()$mysql$password)

＆＃13;

使用click vanilla JS，在错误的节点上激活

1 个答案: