Menu
<!DOCTYPE html>
<html>
<head>
<title> Let’s match up!!! </title>
<style>
div{position:absolute; width:500px; height:500px;}
#rightSide{left: 550px; border-left: 1px solid black; width:500px; height:500px}
h1{color?aleVioletRed; font-family:impact; text-align:center}
p{color: slategray; font-family: “Comic Sans MS”; text-align:center}
img{position:absolute}
body{background: lavender}
</style>
</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>
<script>
var numberOfFaces=5;
var theLeftSide=document.getElementById(“leftSide”);
var theRightSide=document.getElementById(“rightSide”);
var theBody=document.getElementsByTagName(“body”)[0];
function generateFaces(){
for (var i=0;i<numberOfFaces;i++){
var img=document.createElement(“img”);
img.src=”http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png”;
img.style.top= Math.floor((Math.random() * 407)+1) + ‘px’;
img.style.left= Math.floor((Math.random() * 416)+1) + ‘px’;
theLeftSide.appendChild(img);
leftSideImages=theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
}; //end of for loop
theLeftSide.lastChild.onlick= function nextLevel(event){
event.stopPropagation();
numberOfFaces += 5;
deleteAllChildren();
generateFaces();
};
theBody.onclick= function gameOver(){
alert(“XX–Game Over–XX”);
theBody.onclick=null;
theLeftSide.lastChild.onclick=null;
};
};
function deleteAllChildren() {
var theNodeL=document.getElementById(“leftSide”);
while (theNodeL.firstChild){
theNodeL.removeChild(theNodeL.firstChild);}
var theNodeR=document.getElementById(“rightSide”);
while(theNodeR.firstChild){
theNodeR.removeChild(theNodeR.firstChild);}
};
</script>
</html>
Please help!
This code is supposed to add 5 new faces on both sides (although the right hand side starts off with 4 faces to keep one less so as to find the extra odd one out on the left hand side), after every correct answer. It keeps adding 5 to each side until the user gets a wrong answer in which case the game over alert pops up.
My code seems to have no syntactical error but I wonder whats wrong because the although the logic seems fine, the game doesnt run the way its intended to.
–Thank you