-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (114 loc) · 3 KB
/
index.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Catch-em-Modi !</title>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Catch-em-Modi ! <span class="score">0</span></h1>
<button onClick="startGame()" class="btn">Start!</button>
<div class="game">
<div class="hole hole1">
<div class="mole"></div>
</div>
<div class="hole hole2">
<div class="mole"></div>
</div>
<div class="hole hole3">
<div class="mole"></div>
</div>
<div class="hole hole4">
<div class="mole"></div>
</div>
<div class="hole hole5">
<div class="mole"></div>
</div>
<div class="hole hole6">
<div class="mole"></div>
</div>
</div>
<main>
<ol class="gradient-list">
<h1>RULES</h1>
<li><h2>It will be a 60 sec game</h2></li>
<li><h2>You have to instantly catch modiji ! in a particular country</h2> </li>
<li><h2>Each catch will increase your score by 1 !</h2></li>
<li> <h2>If want to play again refresh the page !</h2></li>
</ol>
</main>
<script>
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
var timeUp = false;
var score = 0;
let lasthole;
let level =0;
function randomTime(min,max) {
return( Math.floor(Math.random()*(max-min) + min));
}
function randomHole(holes){
const id = Math.floor(Math.random()*holes.length);
const hole = holes[id];
if(hole == lasthole){
return randomHole(holes);
}
lastHole = hole;
return hole;
}
function peep(level) {
let time = randomTime(300,800);
if(level>1){
let time = randomTime(200,400);
}
const hole = randomHole(holes);
hole.classList.add('up');
setTimeout(()=>{
hole.classList.remove('up');
if(!timeUp){
peep(level);
}
else {
alert('GAME OVER');
}
},time);
}
function startGame() {
if(score>0){
return;
}
else {
score = 0;
scoreBoard.textContent = 0;
peep(level);
setTimeout(() =>timeUp = true,60000);
}
}
function bonk(e) {
if(!e.isTrusted) return;
console.log(e);
if (e.path[1].classList[1] == "hole6") {
alert('mitron mai pakistan nahi jata ! score reduced ');
score = score -3;
scoreBoard.textContent = score;
}
score++;
scoreBoard.textContent = score;
this.parentNode.classList.remove('up');
levelUp(score);
}
moles.forEach((mole) => {
mole.addEventListener('click',bonk);
});
function levelUp(score) {
if(score >=15 && level<1){
level =1 ;
alert("congrats ! you move to level 2");
}
}
</script>
</body>
</html>