[英]DOM Javascript deleting Child Nodes
我正在學習編碼,我需要一些幫助。 我嘗試了一些東西,但沒有用。 我必須做一個游戲,最后我必須這樣做:
**此評估任務需要您制作一個互動游戲。 游戲開始時,左側顯示五個面孔,右側顯示四個面孔。 左邊和右邊是一樣的,除了一件事:左邊多了一張臉。 用戶需要點擊那張額外的臉。 如果單擊正確的面孔以外的任何內容,則會顯示一條消息,表示游戲結束。 如果單擊正確的人臉,則當前顯示的所有人臉都將被刪除,並在隨機位置顯示一組新人臉。 每次顯示一組新面孔時,左側和右側都會比以前多 5 個面孔。 總是會在左側顯示一張額外的臉。
例如,假設您正在玩上圖所示的游戲。 單擊額外的人臉(頂部)后,所有人臉都會消失,並顯示以下一組新人臉。**
刪除子節點
請記住,每次玩家點擊正確的面孔時,所有面孔都會被移除並生成一組新面孔。 所以這意味着在適當的地方需要刪除 leftSide div 和 rightSide div 下的所有子級。 您之前學習了如何使用 while 循環刪除課程中的所有子節點。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Matching Game</title>
<style>
img {position: absolute;}
div {position: absolute; width: 500px; height: 500px;}
#rightSide {left: 500px; border-left: 1px solid black;}
</style>
<script>
index = 0;
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
function generateFaces() {
while (index<numberOfFaces) {
var images = document.createElement("img");
images.setAttribute("src", "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png");
images.style.left = Math.floor(Math.random() * 400 ) + "px";
images.style.top = Math.floor(Math.random() * 400 ) + "px";
document.getElementById("leftSide").appendChild(images);
index++;
}
leftSideImages = document.getElementById("leftSide").cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
document.getElementById("rightSide").appendChild(leftSideImages);
var theBody = document.getElementsByTagName("body")[0];
document.getElementById("leftSide").lastChild.onclick = function nextLevel(event) {
event.stopPropagation();
//var delete_nodes = document.getElementById("leftSide");
//while (delete_nodes.firstChild)
// delete_nodes.removeChild (delete_nodes.firstChild);
numberOfFaces += 5;
generateFaces();
};
theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
}
</script>
</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>
</body>
</html>
謝謝你的時間!
這個評估任務需要你制作一個互動游戲。 游戲開始時,左側顯示五個面孔,右側顯示四個面孔。 左邊和右邊是一樣的,除了一件事:左邊多了一張臉。 用戶需要點擊那張額外的臉。 如果單擊正確的面孔以外的任何內容,則會顯示一條消息,表示游戲結束。 如果單擊正確的人臉,則當前顯示的所有人臉都將被刪除,並在隨機位置顯示一組新人臉。 每次顯示一組新面孔時,左側和右側都會比以前多 5 個面孔。 總是會在左側顯示一張額外的臉。
例如,假設您正在玩上圖所示的游戲。 單擊額外的面(頂部)后,所有面都消失了,並顯示了以下新面集。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.