Guest User

Untitled

a guest
Dec 3rd, 2015
174
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. html>
  2. <head>
  3. <title><h1> Matching Game</h1></title>
  4. <style>
  5. img {position: absolute; height:50}
  6. div {top: 100; width:500px; height:500px;}
  7. #rightside {position:absolute; left:500; top:100; border-left: 1px solid black}
  8. </style>
  9.  
  10.  
  11. <script>
  12.  
  13. var numberofFaces=5;
  14.  
  15. function generateFaces(){
  16.  
  17.  
  18. var theLeftSide = document.getElementById("leftSide");
  19. var theRightSide = document.getElementById("rightSide");
  20. var leftSideImages, last_node;
  21. var new_face;
  22. var top_position, left_position;
  23. var theRightSide = document.getElementById("rightSide");
  24.  
  25. var theBody = document.getElementsByTagName("body")[0];
  26.  
  27. for(var i=0;i < numberofFaces; i++){
  28. new_face = document.createElement("img");
  29. new_face.src ="smile.png";
  30. top_position = ((Math.random()*450) + 100);
  31. top_position = Math.floor(top_position);
  32. left_position = Math.random()*450;
  33. left_position = Math.floor(left_position);
  34. new_face.style.top = top_position +"px";
  35. new_face.style.left = left_position + "px";
  36. theLeftSide.appendChild(new_face);
  37. }
  38.  
  39. leftSideImages = theLeftSide.cloneNode(true);
  40. leftSideImages.removeChild(leftSideImages.lastChild);
  41. theRightSide.appendChild(leftSideImages);
  42.  
  43. theLeftSide.lastChild.onclick = function nextLevel(event){
  44. event.stopPropagation();
  45.  
  46. while(theLeftSide.firstChild) theLeftSide.removeChild(theLeftSide.firstChild);
  47.  
  48. while(theRightSide.firstChild)theRightSide.removeChild(theRightSide.firstChild);
  49.  
  50. numberofFaces +=5;
  51. generateFaces();
  52. }
  53.  
  54. theBody.onclick = function gameOver(){
  55.  
  56. alert("Game Over!");
  57.  
  58. theBody.onclick = null;
  59.  
  60. theLeftSide.lastChild.onclick = null;
  61.  
  62. }
  63. }
  64.  
  65. </script>
  66.  
  67. </head>
  68.  
  69.  
  70.  
  71. <body onload="generateFaces()">
  72. <h1> Matching Game</h1>
  73. <p> Click on the extra smiling face on the left.</p>
  74.  
  75.  
  76. <div id="leftSide"> </div>
  77.  
  78. <div id="rightSide"></div>
  79. </body>
  80. </html>
RAW Paste Data