0
我正在學習JS，我正在製作一個遊戲，我必須找到入侵者。 我的配對遊戲無法正常工作，因爲左側的面孔必須增加5個，因爲我的代碼增加了10？我的配對遊戲無法正常工作
<!DOCTYPE html>
<html>
<head>
<title>Matching Game</title>
\t <meta name="author" content="Aurora Ruggieri">
\t <style>
\t img{
\t position: absolute;
\t height: 100px;
\t \t width: 100px;
\t }
\t
\t div{
\t position: absolute;
\t \t width: 500px;
\t \t height: 500px;
}
\t
\t #rightSide {
\t left: 500px;
border-left: 1px solid black;
\t }
\t </style>
</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>
<script>
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
\t var theRightSide = document.getElementById("rightSide");
\t
\t function generateFaces(){
\t for (i= 0; i < numberOfFaces; i++) {
\t var top_position= Math.floor(Math.random() * 401);
\t var left_position= Math.floor(Math.random() * 401);
\t \t var leftSideImage = document.createElement("img");
\t leftSideImage.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png");
\t \t leftSideImage.style.top = top_position + "px";
leftSideImage.style.left = left_position + "px";
\t theLeftSide.appendChild(leftSideImage);
\t \t var leftImages = theLeftSide.cloneNode(true);
\t \t leftImages.removeChild(leftImages.lastChild);
\t \t theRightSide.appendChild(leftImages);
\t }
var theBody = document.getElementsByTagName("body")[0];
\t
\t \t theLeftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
while(theLeftSide.firstchild) {
\t \t theLeftSide.removeChild(theLeftSide.firstchild);
\t \t }
\t \t while(theRightSide.firstchild) {
\t \t theRightSide.removeChild(theRightSide.firstchild);
\t \t }
\t \t numberOfFaces += 5;
generateFaces();
};
\t
\t theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
}
\t </script>
</body>
</html>在此先感謝
如果你採取我的建議並刪除該行代碼。這正是它的工作原理。 –
我剛剛在我的上面的答案中提供了一個片段，以便您可以看到它的工作。 –