DOM Javascript deleting Child Nodes
Question
I'm learning to code and I need some help. I tried something but is not working. I have to do a game and at the end I have to do this:
**This assessment task requires you to make an interactive game. When the game starts, five faces are shown on the left and four are shown on the right. The left and right sides are identical, except for one thing: the left side has one extra face. The user needs to click on that extra face. If anything except the correct face is clicked, a message is displayed saying that the game is over. If the correct face is clicked, all the currently displayed faces are deleted and a new set of faces is shown at random positions. Each time a new set of faces is shown there will be 5 more faces than before, on both the left and the right sides. There will always be one extra face shown on the left.
For example, let's imagine you are playing the game shown in the previous figure. After clicking on the extra face (at the top) all the faces disappear and the following new set of faces are shown.**
Delete the child nodes
Remember that each time the player clicks on the correct face all faces are removed and a new set of faces are generated. So that means at the appropriate place all children under the leftSide div and rightSide div need to be deleted. You previously learnt how to delete all child nodes on the course using a while loop.
<!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>
Thanks for your time!
1 answers
solution1
0 2015-11-11 04:57:23
This assessment task requires you to make an interactive game. When the game starts, five faces are shown on the left and four are shown on the right. The left and right sides are identical, except for one thing: the left side has one extra face. The user needs to click on that extra face. If anything except the correct face is clicked, a message is displayed saying that the game is over. If the correct face is clicked, all the currently displayed faces are deleted and a new set of faces is shown at random positions. Each time a new set of faces is shown there will be 5 more faces than before, on both the left and the right sides. There will always be one extra face shown on the left.
For example, let's imagine you are playing the game shown in the previous figure. After clicking on the extra face (at the top) all the faces disappear and the following new set of faces are shown.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.