forked from MarsRising/web_apps_html_css_javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
/
matching-game.html
82 lines (74 loc) · 2.66 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
81
82
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset="utf-8">
<title>Matching Game</title>
<style>
img {
position:absolute;
}
div {
position: absolute;
width: 500px;
height: 500px;
}
#rightSide {
left: 500px;
border-left: 1px solid;
}
body {
background-color: aqua;
}
</style>
</head>
<body onload="generateFaces()" background="images/white-cloud.png">
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left.</p>
<!-- <button type="button" id="myBtn" onClick="window.location.refresh()">New Game</button> -->
<div id="leftSide"></div>
<div id="rightSide"></div>
<script>
let rounds= 0;
let numberOfFaces = 5;
const theLeftSide = document.querySelector('#leftSide');
const theRightSide = document.querySelector('#rightSide')
function generateFaces(){
for (let i=1; i<numberOfFaces; i++) {
let face = document.createElement('img');
face.src = 'images/smile.png';
let randomTop = Math.floor(Math.random()*400+1);
let randomLeft = Math.floor(Math.random()* 400+1);
face.style.top = randomTop + 'px';
face.style.left = randomLeft + 'px';
theLeftSide.appendChild(face);
}
const leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
theLeftSide.lastChild.addEventListener('click', nextLevel);
document.body.addEventListener('click', gameOver);
}
function gameOver(){
alert('GAME OVER! You made it through ' + rounds + ' rounds of Smiles :)');
document.body.removeEventListener('click', gameOver);
theLeftSide.lastChild.removeEventListener('click', nextLevel);
}
function nextLevel(event) {
rounds++;
event.stopPropagation();
numberOfFaces += 5;
while (theLeftSide.firstChild) {
theLeftSide.removeChild(theLeftSide.firstChild);
}
while(theRightSide.firstChild) {
theRightSide.removeChild(theRightSide.firstChild);
}
generateFaces();
// let btn = document.getElementById("myBtn");
// function btn() {
// btn.addEventListener('click', btn);
// }
}
</script>
</body>
</html>