-
Notifications
You must be signed in to change notification settings - Fork 0
/
tapmo.html
63 lines (63 loc) · 1.47 KB
/
tapmo.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
<!DOCTYPE html>
<html>
<head>
<title>TAPMO</title>
<style>
body{
overflow: hidden; margin: 0;
}
#you, #time{
border: 1px solid black; width: 25px; height: 25px; position: absolute; top: 30%; background: green; text-align: center; border-radius: 25px;
}
#control{
width: 3em; height: 3em; position: absolute; top: 300px; left: 500px; background: gray; border-radius: 10px; box-shadow: 0 10px 10px black; cursor: pointer;
}
#time{width: 40px; height: 50px; top: 0%; left: 50%; background: pink;}
#control:active{
top: 305px;
box-shadow: 0 2px 5px black;
}
</style>
</head>
<body>
<div id="you"></div>
<div id="control"></div>
<div id="time"></div>
<script>
function reset(msg='Are you ready to start'){
removeEventListener('mousemove', tim)
alert(msg)
control = document.getElementById("control");
yo = document.getElementById("you")
yo.style.left = '';
timer = document.getElementById("time")
yont = 0;
time = new Date();
control.addEventListener("click", e);
document.addEventListener("mousemove", tim);
}
function tim(){
sec = new Date();
sec -= time;
sec /= 1000;
ti = Math.round(15-sec);
if(ti>=0) {(timer.innerHTML = ti)} else {
reset('you lose.\nclick ok to restart');
return;
}
}
function e(){
you = yo.style.left = (yont + '%');
yont = parseInt(you);
yont += 1;
if (yont>99){
if (sec<15){
reset('You win.\nclick ok to restart');
return
}
}
}
reset()
</script>
</body>
</html>