我正在学习 JS，我正在制作一个必须找到入侵者的游戏。 我的配对游戏无法正常运行，因为左侧的面孔必须增加 5，因为我的代码增加了 10？
<!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>提前致谢
最佳答案
如果您尝试每轮再添加 5 张面孔，请删除以下代码行:
numberOfFaces += 5;
目前的运作方式是，第一轮有 5 个面，下一轮将增加 10 个，然后是 15 个，然后是 20 个，依此类推。
运行这个提供的代码片段，您将看到删除那一行代码后它可以按照您想要的方式工作。
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(); img{
position: absolute;
height: 100px;
width: 100px;
}
div{
position: absolute;
width: 500px;
height: 500px;
}
#rightSide {
left: 500px;
border-left: 1px solid black;
} <h1>Matching Game</h1>
<p>Click on the extra smiling face on the left</p>
<div id="leftSide"></div>
<div id="rightSide"></div>
关于javascript - 我的配对游戏无法正常运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43458676/