SHARE
TWEET

Untitled

a guest Dec 3rd, 2015 77 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
Pastebin PRO Autumn Special!
Get 40% OFF on Pastebin PRO accounts!
Top