-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpart4.html
85 lines (66 loc) · 1.7 KB
/
part4.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
<head>
<title>Matching Game</title>
<style>
#rightSide { left: 500px;
border-left: 1px solid black;
}
img {
position:absolute;
}
div {
position:absolute;
width:500px;
height:500px;
}
</style>
<script type="text/javascript">
var theLeftSide;
var theRightSide;
var numberOfFaces = 5;
function generateFaces() {
for (var i = 0; i < numberOfFaces; ++i) {
var img = document.createElement('img');
img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
img.style.top = Math.floor(Math.random() * 400);
img.style.left = Math.floor(Math.random() * 400);
theLeftSide.appendChild(img);
}
var leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
theLeftSide.lastChild.onclick= function (event) {
removeFaces();
event.stopPropagation();
numberOfFaces += 5;
generateFaces();
};
}
function removeFaces() {
while (theLeftSide.firstChild)
theLeftSide.removeChild(theLeftSide.firstChild);
while (theRightSide.firstChild)
theRightSide.removeChild(theRightSide.firstChild);
}
window.onload = function () {
theLeftSide = document.getElementById("leftSide");
theRightSide = document.getElementById("rightSide");
var theBody = document.body;
theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
generateFaces();
}
</script>
</head>
<body>
<h2>Matching Game</h2>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide">
</div>
<div id="rightSide">
</div>
</body>
</html>