-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmatching_game_p4.html
More file actions
60 lines (58 loc) · 1.51 KB
/
matching_game_p4.html
File metadata and controls
60 lines (58 loc) · 1.51 KB
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
<!DOCTYPE html>
<html>
<head>
<title>matching game</title>
<style>
img {
position: absolute;
}
div {
position: absolute;
width: 500;
height: 500px;
}
#rightSide {
left: 500px;
border-left: 1px solid black;
}
</style>
<script>
function generateFace()
{
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
for (var i = 0; i < numberOfFaces; i++)
{
var randomTop = Math.floor(Math.random() * 400);
var randomLeft = Math.floor(Math.random() * 400)
var img = document.createElement("img");
img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
img.style.top = randomTop + "px";
img.style.left = randomLeft + "px";
theLeftSide.appendChild(img);
}
var theRightSide = document.getElementById("rightSide");
var leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
var theBody = document.getElementsByTagName("body")[0];
theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
}
theLeftSide.lastChild.onclick = function nextLevel(event) {
event.stopPropagation();
numberOfFaces += 5;
generateFace();
}
}
</script>
</head>
<body onload="generateFace()">
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide" style="rightSide"></div>
</body>
</html>