【发布时间】:2021-11-05 18:39:52
【问题描述】:
我正在制作一个面部匹配游戏,并想计算出你在警报消息中正确选择了多少次我会将计数代码信息放入游戏中的功能还是我会创建一个新功能来放入它只有左边的最后一个孩子?
<body onload='generateFaces()'>
<h1>'Matching Game'</h1>
<p>'Click on the extra face on the left.'<p>
<div id='leftSide'></div>
<div id='rightSide'></div>
<script>
let numberOfFaces = 5;
const theLeftSide= document.getElementById('leftSide');
const theRightSide= document.getElementById('rightSide');
function generateFaces(){
for (let i=0; i < numberOfFaces; i++) {
const face= document.createElement('img');
face.src= 'image/smile.png';
const randomTop = Math.floor(Math.random()*400) +1;
const randomLeft = Math.floor(Math.random()*400) +1;
face.style.top = randomTop + 'px';
face.style.left = randomLeft + 'px';
theLeftSide.appendChild(face);
}
const leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
theLeftSide.lastChild.addEventListener('click', nextLevel);
document.body.addEventListener('click', gameOver);
}
function nextLevel() {
event.stopPropagation();
numberOfFaces += 5;
while (theLeftSide.lastChild) {
theLeftSide.removeChild(theLeftSide.lastChild);
}
while (theRightSide.lastChild){
theRightSide.removeChild(theRightSide.lastChild);
}
generateFaces();
}
function gameOver() {
alert('GaMe OvEr! !\n Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum.');
document.body.removeEventListener('click', gameOver);
theLeftSide.lastChild.removeEventListener('click', nextLevel);
}
</script>
</body>
【问题讨论】:
标签: javascript nodes