Question

有一种模式游戏，用户应该从右侧找到1张错过的图片，而位置显示在左侧，然后如果用户猜对了，他们将进入下一级别。

我的问题是，即使我点击了正确的图片，在第一次迭代后出现了错误选择的弹出窗口。

我尝试将body定义为初始子项，但无论选择是否正确，仍会显示弹出窗口。

＆＃13;

var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
var theBody = document.getElementsByTagName("body")[0];

function generateFaces() {
  for (var i = 0; i < numberOfFaces; i++) {

    var createImg = document.createElement("IMG");
    var randPositionTop = Math.floor(Math.random() * 400);
    var randPositionleft = Math.floor(Math.random() * 400);
    createImg.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png");
    createImg.style.top = randPositionTop + "px";
    createImg.style.left = randPositionleft + "px";
    theLeftSide.appendChild(createImg);
  }
  var leftSideImages = theLeftSide.cloneNode(true);
  leftSideImages.removeChild(leftSideImages.lastChild);
  theRightSide.appendChild(leftSideImages);

  theLeftSide.lastChild.onclick =
    function nextLevel(event) {
      event.stopPropagation;
      numberOfFaces += 5;
      alert("Next level!");

      while (theLeftSide.firstChild) {
        theLeftSide.removeChild(theLeftSide.firstChild);
      }
      generateFaces();
    }

  theBody.onclick =
    function gameOver() {
      theBody.onclick = null;
      theLeftSide.lastChild.onclick = null;
      alert("Game Over!");
    };

}

＆＃13;

#leftSide {
  background-color: red;
  position: absolute;
  width: 500px;
  height: 500px;
  left: 50px;
}
#rightSide {
  position: absolute;
  left: 600px;
  width: 500px;
  height: 500px;
  --border-left: solid 10px;
}
img {
  position: absolute;
  width: 50px;
  height: 50px;
}

＆＃13;

<link rel="stylesheet" href="style.css">

<body onload="generateFaces()">


  <h3>Matching Game</h3>
  <h5>Please choose missed smile !</h5>
  <div id="leftSide">
  </div>

  <div id="rightSide">
  </div>

  <script src="jsCode.js"></script>
</body>

＆＃13;

Answer 1

更新了你的小提琴。这是你想要的吗？

https://jsfiddle.net/ychq5rkm/12/

具体来说，它在js中使用document.ready()而不是在html中的onload中。正如评论中提到的那样，你需要实际打电话给event.stopPropegation()，因为它每次都会持续到身体并结束游戏。

事件处理onclick每个对象中的Body响应

1 个答案: