-
Notifications
You must be signed in to change notification settings - Fork 0
/
match.html
55 lines (55 loc) · 1.8 KB
/
match.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
<title>Matching Game</title>
<style>
img {position:absolute; width:100px; height:100px;}
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 theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
//var theBody = document.getElementsByTagName("body")[0];
function generateFaces() {
for (var i = 0; i < numberOfFaces; i++) {
//var theBody = document.getElementsByTagName("body")[0];
var top = Math.floor(Math.random()*401);
var left = Math.floor(Math.random()*401);
var theImg = document.createElement("img");
theImg.setAttribute("src","http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png");
theImg.style.top = top + "px";
theImg.style.left = left + "px";
theLeftSide.appendChild(theImg);
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
}
var theBody = document.getElementsByTagName("body")[0];
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>
</body>
</html>