Skip to content

Instantly share code, notes, and snippets.

@carcigenicate

carcigenicate/gist:1ea6e5ea54aa1c4c5ea4cb0747a65715

Created August 5, 2017 16:55
Show Gist options
  • Save carcigenicate/1ea6e5ea54aa1c4c5ea4cb0747a65715 to your computer and use it in GitHub Desktop.
Save carcigenicate/1ea6e5ea54aa1c4c5ea4cb0747a65715 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<html>
<head>
<style>
img {
position: absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#rightSide {
left: 500px;
border-left: 1px solid black;
}
</style>
</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>
<script>
var numberOfFaces = 5;
var count = 0;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
var theBody = document.getElementsByTagName("body")[0];
function generateFaces() {
while (count < numberOfFaces) {
newImage = document.createElement("img");
newImage.src = "smile.png";
newImage.style.top = Math.random() * 400;
newImage.style.left = Math.random() * 400;
leftSide.appendChild(newImage);
count++;
}
leftSideImages = leftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
rightSide.appendChild(leftSideImages);
}
theLeftSide.lastChild.onclick = function nextLevel(event) {
removeAllFaces();
event.stopPropagation();
numberOfFaces += 5;
generateFaces();
}
theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
}
function removeAllFaces(argument){
while (theLeftSide.firstChild){
theLeftSide.removeChild(theLeftSide.firstChild);
}
while (theRightSide.firstChild){
theRightSide.removeChild(theRightSide.firstChild);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment