-
Notifications
You must be signed in to change notification settings - Fork 0
/
Matching Game.html
80 lines (80 loc) · 5.05 KB
/
Matching Game.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
<!doctype html>
<html>
<head>
<title>Matching Game</title>
<style>
div {position:absolute; width:500px; height:500px;}
img {position:absolute}
#rightSide {left: 500px; border-left: 1px solid black}
</style>
</head>
<body id="theBody" 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>
/*
Matching Game
A summary:
When the game starts, five faces are shown on the left and four are shown on the right.
The left and right sides are identical, except for one thing: the left side has one extra face.
The user needs to click on that extra face.
If anything except the correct face is clicked, a message is displayed saying that the game is over.
If the correct face is clicked, all the currently displayed faces are deleted and a new set of faces is shown at random positions.
Each time a new set of faces is shown there will be 5 more faces than before, on both the left and the right sides.
There will always be one extra face shown on the left.
Technical Overview:
The text instructions are handled by simple HTML.
Two div elements are included in the body.
-- The first div is used to store all the faces shown on the left side.
-- The second div is used to store all the faces shown on the right side.
The line shown in the middle of the web page is created by applying a style rule which tells the browser to show a border line for only the left side of the rightSide div.
The faces are dynamically created by JavaScript. First, all the faces are generated on the left side, under the div with id ‘leftSide’.
Then cloneNode(true) is used to clone all the faces to the div with id ‘rightSide’, so there is an exact copy.
The last child in this new branch is then deleted, so that when the user looks at the screen there is one extra face on the left side compared to the right side.
The event handling is also applied by JavaScript. There are two event handlers:
-- One onclick event handler is applied to the extra face on the left side which the user needs to click on.
When the event is triggered a variable containing the number of faces to be generated is increased by 5, and then the process of generating and displaying the faces begins again.
-- The second onclick event handler is applied to the body.
If this function is triggered, it means the player has failed to select the correct face and the game is over.
When this event is triggered an appropriate message is shown and the two event handler functions are removed.
*/
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
var theBody = document.getElementsByTagName("body")[0];
function generateFaces(){
for (var index = 0; index < numberOfFaces; index++){
var top_position = Math.random() * 400;
var left_position = Math.random() * 400;
var theImage = document.createElement("img");
theImage.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
theImage.style.top = top_position + "px";
theImage.style.left = left_position + "px";
theLeftSide.appendChild(theImage);
}
var leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
theLeftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
numberOfFaces += 5;
delete_all_images();
generateFaces();
};
theBody.onclick = function gameOver(){
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
}
function delete_all_images(){
while (theLeftSide.firstChild)
theLeftSide.removeChild(theLeftSide.firstChild);
while (theRightSide.firstChild)
theRightSide.removeChild(theRightSide.firstChild);
}
</script>
</body>
</html>