MyMatchingGame.html

<!DOCTYPE html>
<html>
    <head>
        <title>Week 3 Game</title>
        <meta name="author" content="Joe Perez">
        <style>
        img {
                position: absolute 
                /* height: 50px
                width: 50px  */
            }
        div {
                position: absolute 
            }
        #rightSide {
                left: 500px; 
                height: 500px;
                border-left: 1px solid black
                } 
        #leftSide {
                left: 0px; 
                height: 500px;
                }    
        </style>
    </head>
    <body onload="generateFaces()">
        <h1>Matching Game</h1>
	  <h2 id="theLevel"></h2>               <!-- NEW -->
        <p>Click on the extra smile face on the left.</p>
        <div id="leftSide"></div>
        <div id="rightSide"></div>
        <script>
            var theBody = document.getElementsByTagName("body")[0]; 
            var numberOfFaces = 5; 
		var numberOfLevels = 4; // NEW
		var theLevel = 0;

            var theLeftSide = document.getElementById("leftSide");

            function generateFaces() {
		    theLevel += 1;    // NEW
		    var theLevelElement = document.getElementById('theLevel');  //NEW
		    theLevelElement.innerHTML = "Round " + theLevel;  //NEW

                for (i = 0; i < numberOfFaces; i++) {
                    var randomx = Math.floor(Math.random() * 400);
                    var randomy = Math.floor(Math.random() * 400);
                    var smiley = document.createElement("img");
                        smiley.setAttribute('src', 'smile.png');
                        smiley.setAttribute('style', 'top:' + randomy + 'px;' + 'left:' + randomx + 'px');
                    document.getElementById("leftSide").appendChild(smiley);
                    }
                    var theRightSide = document.getElementById('rightSide');
            var leftSideImages = document.getElementById('leftSide').cloneNode(true);
                leftSideImages.removeChild(leftSideImages.lastChild);
                document.getElementById('rightSide').appendChild(leftSideImages);

		var nExtra = 2; // NEW

            theLeftSide.lastChild.onclick = function nextLevel(event) {
                event.stopPropagation();
	          removeItems("leftSide");  // CHANGE
		    removeItems("rightSide");  // CHANGE
		//	debugger;

                numberOfFaces += nExtra; // CHANGE
                generateFaces();
            };
             function removeItems(nodeName) {
		// debugger;
                console.log("remove" + nodeName);
                var theNode = document.getElementById(nodeName);

                 while (theNode.firstChild) {
                    theNode.removeChild(theNode.firstChild);
                 } 
             }

            theBody.onclick = function gameOver() {
                alert("Game Over!");
                theBody.onclick = null;
                theLeftSide.lastChild.onclick = null;
}; 

                }
            

        </script>
    </body>
</html>