Я изучаю код, и мне нужна помощь. Я что-то пробовал, но не работал. Мне нужно сделать игру, и в конце я должен это сделать:DOM Javascript, удаляющий дочерние узлы
** Эта задача оценки требует, чтобы вы сделали интерактивную игру. Когда игра начинается, пять лиц отображаются слева, а четыре - справа. Левая и правая стороны идентичны, за исключением одного: левая сторона имеет одно дополнительное лицо. Пользователь должен щелкнуть на этом дополнительном лице. Если щелкнуто что-либо, кроме правильного лица, появится сообщение с сообщением о завершении игры. Если щелкнуть правильную грань, все отображаемые в данный момент лица будут удалены, а новый набор граней будет показан в случайных положениях. Каждый раз, когда отображается новый набор граней, на левой и правой сторонах будет еще 5 лиц, чем раньше. Слева всегда будет одно дополнительное лицо.
Например, предположим, что вы играете в игру, показанную на предыдущем рисунке. После нажатия на кнопку дополнительного лица (в верхней части) все лица исчезают, а следующий новый набор граней показаны. **
Удалить дочерние узлы
Помните, что каждый раз, когда игрок нажимает на правильном лице все грани удалены и создается новый набор граней. Таким образом, это означает, что в соответствующем месте все дети, находящиеся в левой части 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>
Спасибо за ваше время!
«Не работает» недостаточно описывает вашу проблему. – RobG
Пожалуйста, прочтите [ask] и [edit] ваш вопрос соответственно. Прямо сейчас нам нужно понять, в чем проблема с вашим кодом. Пожалуйста, приложите * некоторые * усилия, чтобы спросить, ожидаете ли вы, что другие приложит усилия к ответу. –
Спасибо, что комментарий был действительно полезен –