匹配游戏

Question

这是一个游戏，每当用户点击左侧div的最后一个节点时，就会增加5个图像。

如果他点击其他节点警报，则应显示“游戏结束”。

的问题：

TypeError：leftside.lastChild为null
在调用generateface函数生成新的面集之前，如何删除右侧和左侧div的所有节点。

匹配游戏

点击左侧额外的笑脸
```
.smile {position:absolute}
div {position:absolute; width:500px;height: 500px}
#rightside {left:500px;border-left: 1px solid black}
```
var numberOfFaces = 5; var leftside = document.getElementById（“leftside”）; var rightside = document.getElementById（“rightside”）; function generatefaces（）{ for（i = 0; i event.stopPropagation(); numberOfFaces += 5; generateFaces(); }; theBody.onclick = function gameOver（）{ theBody.onclick = null; 警报（“游戏结束！”）; };

Answer 1

您忘记将px添加到top和left style媒体资源中。更改代码如下

ismile.style.top = topran + 'px'; 
ismile.style.left = leftran + 'px';

＆＃13;

var numberOfFaces = 5;

var leftside = document.getElementById("leftside");

function generatefaces() {

 for (i=0;i<=numberOfFaces;i++) {

ismile = document.createElement("img");

ismile.src = "http://orig00.deviantart.net/449c/f/2009/061/5/7/smiley_icon_by_emopunk23.jpg";

ismile.className = "smile";

var topran = Math.random() * 400;

topran = Math.floor(topran);

var leftran = Math.random() *400;

leftran = Math.floor(leftran);

ismile.style.top = topran + 'px'; 

ismile.style.left = leftran + 'px';

leftside.appendChild(ismile);

}

}

＆＃13;

.smile {position:absolute}
    div {position:absolute; width:500px;height: 500px}
    #rightside {left:500px;border-left: 1px solid black}

＆＃13;

<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>

＆＃13;

无法生成多个图片

匹配游戏

1 个答案: