Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement