Untitled

<!DOCTYPE html>
<html>

  <head>
    <style>
    img {
      position: absolute;
    }
    div {
      position: absolute;
      width:500px;
      height:500px
    }
    #rightSide {
      left: 500px;
      border-left: 1px solid black;
    }
    </style>
  </head>

  <body>
    <h1>Matching Game</h1>Click on the extra smiling face on the left.
    <div id="leftSide"></div>
    <div id="rightSide"></div>
    <script>
    var numberOfFaces = 5;
    var i;
    var theLeftSide = document.getElementById("leftSide");
    var theRightSide = document.getElementById("rightSide");
    var theBody = document.getElementsByTagName("body")[0];
    var leftSideImages;
    document.body.onload = init;

    function generateFaces() {
      for(i = 0; i < numberOfFaces; i++) {
        var image = document.createElement("img");
        image.src = "smile.png";
        image.style.top = Math.floor(Math.random() * 400) + "px";
        image.style.left = Math.floor(Math.random() * 400) + "px";
        theLeftSide.appendChild(image);
      }
      leftSideImages = theLeftSide.cloneNode(true);
      leftSideImages.removeChild(leftSideImages.lastChild);
      theRightSide.appendChild(leftSideImages);
      return 0;
    }

    function init() {
      generateFaces();

      theLeftSide.lastChild.onclick = function nextLevel(event) {
        event.stopPropagation();
        numberOfFaces += 5;
        while(theLeftSide.firstChild) {
          theLeftSide.removeChild(theLeftSide.firstChild);
        }
        while(theRightSide.firstChild) {
          theRightSide.removeChild(theRightSide.firstChild);
        }
        generateFaces();
      }

      theBody.onclick = function gameOver() {
        alert("Game Over!");
        //numberOfFaces = initialNumberOfFaces;
        theBody.onclick = null;
        theLeftSide.lastChild.onclick = null;
      }

    }
    </script>
  </body>

</html>