Untitled

html>
<head>
  <title><h1> Matching Game</h1></title>
  <style>
  img {position: absolute; height:50}
  div {top: 100; width:500px; height:500px;}
  #rightside {position:absolute; left:500; top:100; border-left: 1px solid black}
  </style>


  <script>

     var numberofFaces=5;

      function generateFaces(){


      var theLeftSide = document.getElementById("leftSide");
      var theRightSide = document.getElementById("rightSide");
       var leftSideImages, last_node;
      var new_face;
      var top_position, left_position;
      var theRightSide = document.getElementById("rightSide");

      var theBody = document.getElementsByTagName("body")[0];

       for(var i=0;i < numberofFaces; i++){
       new_face = document.createElement("img");
       new_face.src ="smile.png";
       top_position = ((Math.random()*450) + 100);
       top_position = Math.floor(top_position);
       left_position = Math.random()*450;
       left_position = Math.floor(left_position);
       new_face.style.top = top_position +"px";
       new_face.style.left = left_position  + "px";
       theLeftSide.appendChild(new_face);
      }

      leftSideImages = theLeftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    theRightSide.appendChild(leftSideImages);

     theLeftSide.lastChild.onclick = function nextLevel(event){
        event.stopPropagation();

        while(theLeftSide.firstChild) theLeftSide.removeChild(theLeftSide.firstChild);

        while(theRightSide.firstChild)theRightSide.removeChild(theRightSide.firstChild);

        numberofFaces +=5;
        generateFaces();
      }

    theBody.onclick =  function gameOver(){

      alert("Game Over!");

       theBody.onclick = null;

      theLeftSide.lastChild.onclick = null;

   }
    }

  </script>

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