a1/game.html at master · punitmahes/a1 · GitHub

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
<!doctype html>
<html>
 <head>
 <title>Learning Javascript</title>

 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />

 <style>

 body {
 font-family:Verdana, Geneva, sans-serif;

 }

 	 	 #box {
 	 	 	 width:200px;
 	 	 	 height:200px;
 	 	 	 background-color:red;
 	 	 	 display:none;
 	 	 	 position:relative;
 	 	 }

 	 	 .bold {
 	 	 	 font-weight:bold;
 	 	 }

 </style>


 </head>

 <body>

 <h1>Test your reactions!</h1>

 <p>Click on the boxes and circles as quickly as you can!</p>

 <p class="bold">Your time: <span id="time">0</span>s</p>

 <div id="box"></div>


 <script type="text/javascript">
function getRandomColor() {
 	 	 var letters = '0123456789ABCDEF'.split('');
 	 	 var color = '#';
 	 	 for (var i = 0; i < 6; i++ ) {
 	 	 color += letters[Math.round(Math.random() * 15)];
 	 	 }
 	 	 return color;
	 	 }

var clickedTime; var createdTime; var reactionTime;
function makeBox() {

	 	 var time=Math.random();

	 	 time=time*5000;

			 setTimeout(function() {

				 if (Math.random()>0.5) {


document.getElementById("box").style.borderRadius="100px";

				 } else {


document.getElementById("box").style.borderRadius="0";


				 }

				 var top=Math.random();

				 top=top*300;

				 var left=Math.random();

				 left=left*500;

				 document.getElementById("box").style.top=top+"px";

				 document.getElementById("box").style.left=left+"px";


document.getElementById("box").style.backgroundColor=getRandomColor();

				 document.getElementById("box").style.display="block";

				 createdTime=Date.now();

			 }, time);

}
document.getElementById("box").onclick=function() {

	 	 clickedTime=Date.now();

	 	 reactionTime=(clickedTime-createdTime)/1000;

	 	 document.getElementById("time").innerHTML=reactionTime;

	 	 this.style.display="none";

	 	 makeBox();
}

makeBox();


 </script>

 </body>
</html>