Question

我正在学习JS，我正在制作一个我必须找到入侵者的游戏。我的匹配游戏无法正常工作，因为左侧的面必须增加5，因为我的代码增加了10？

＆＃13;

<!DOCTYPE html>
<html>
 <head>
    <title>Matching Game</title>
	<meta name="author" content="Aurora Ruggieri">
    
	<style>
	 img{
	    position: absolute;
	    height: 100px;
		width: 100px;
	}
	 
	 div{
	    position: absolute;
		width: 500px;
		height: 500px;
    }
	
	#rightSide { 
	    left: 500px; 
        border-left: 1px solid black;
	}
	</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");
	var theRightSide = document.getElementById("rightSide");
	
    
	function generateFaces(){
	  for (i= 0; i < numberOfFaces; i++) {
	    var top_position= Math.floor(Math.random() * 401);
	    var left_position= Math.floor(Math.random() * 401);
		var leftSideImage = document.createElement("img");  
       	leftSideImage.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png");
		leftSideImage.style.top = top_position + "px";
        leftSideImage.style.left = left_position + "px";
	    theLeftSide.appendChild(leftSideImage);
		var leftImages = theLeftSide.cloneNode(true);
		leftImages.removeChild(leftImages.lastChild);
		theRightSide.appendChild(leftImages);
	}
        var theBody = document.getElementsByTagName("body")[0];
	    
		theLeftSide.lastChild.onclick = function nextLevel(event){
        event.stopPropagation();
        while(theLeftSide.firstchild) {
		 theLeftSide.removeChild(theLeftSide.firstchild);
		}
		while(theRightSide.firstchild) {
		 theRightSide.removeChild(theRightSide.firstchild);
		}
		numberOfFaces += 5;
        generateFaces();
    };
	
	    theBody.onclick = function gameOver() {
        alert("Game Over!");
        theBody.onclick = null;
        theLeftSide.lastChild.onclick = null;
    }; 
   } 
	</script>
 </body>
</html>

＆＃13;

提前致谢

Answer 1

如果你每周都要尝试再添加5张面孔，请删除以下代码行：

numberOfFaces += 5;

目前的工作原理是，第一轮有5个面，下一轮将增加10个，然后再增加15个，再增加20个等等。

运行此提供的代码段，您将看到删除这一行代码使其按您所需的方式工作。

＆＃13;

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

＆＃13;

	 img{
	    position: absolute;
	    height: 100px;
		width: 100px;
	}
	 
	 div{
	    position: absolute;
		width: 500px;
		height: 500px;
    }
	
	#rightSide { 
	    left: 500px; 
        border-left: 1px solid black;
	}

＆＃13;

   <h1>Matching Game</h1>
   <p>Click on the extra smiling face on the left</p>
   
   <div id="leftSide"></div>
   <div id="rightSide"></div>

＆＃13;

Answer 2

凯尔理查森，谢谢你的回复。每当你找到入侵者时，游戏必须增加5个面，下一轮将增加5个，然后再增加5个......

我的配对游戏无法正常使用

2 个答案: