Skip to content

Commit 431f588

Browse files
viditvarshneyviditvarshney
authored
Merge pull request #8 from viditvarshney/dev
fix best time, add exit and tip, modifications
2 parents eb3f123 + f6e3328 commit 431f588

File tree

5 files changed

+182
-73
lines changed

5 files changed

+182
-73
lines changed

‎README.md‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
1+
[![Join the chat at https://gitter.im/Reaction-Timer/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/Reaction-Timer/Lobby)
2+
<a href="https://twitter.com/intent/tweet?text=How+fast+you+can+click+me%2C+Try+this+game+!&url=https%3A%2F%2Fgithub.com%2Fviditvarshney%2FReaction-Timer-%2Ftree%2Fdev&hashtags=github&original_referer=http%3A%2F%2Fgithub.com%2F&tw_p=tweetbutton" target="_blank">
3+
<img src="http://jpillora.com/github-twitter-button/img/tweet.png" alt="tweet button" title="How fast you can click me, Try this game !">
4+
</a>
5+
<a href="https://github.com/viditvarshney/Reaction-Timer-/tree/dev">
6+
<img src="https://img.shields.io/badge/Branch-dev-green.svg?longCache=true" alt="dev-Branch">
7+
</a>
8+
<a href="https://github.com/viditvarshney/Reaction-Timer-/blob/master/LICENSE">
9+
<img src="https://img.shields.io/badge/License-MIT-orange.svg?longCache=true" alt="License">
10+
</a>
11+
<a href="https://github.com/viditvarshney/Reaction-Timer-/stargazers">
12+
<img src="https://img.shields.io/github/stars/viditvarshney/Reaction-Timer-?style=social" alt="Stargazers">
13+
</a>
14+
<a href="https://github.com/viditvarshney">
15+
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="awesome">
16+
</a>
17+
<a href ="https://twitter.com/_imvv">
18+
<img src ="https://img.shields.io/twitter/follow/_imvv?label=Follow%20Me&style=social">
19+
</a>
20+
21+
122
# Reaction-Timer-
223
This is the game based on javascript which notes your reaction time , you have to very attentive towards it ...... So check and play .
324
Live at https://reactiontimer.tk ( Renewal Needed )
425

5-
6-
#
726
***
827
# Welcome to the **"Reaction-Timer"**
9-
***
1028

1129
This is the game which will make you attentive with the game . It is very interesting when you bored ...
1230
***
@@ -25,9 +43,29 @@ Screenshot 2
2543

2644
## You are most welcome to modify and give the suggestions .. If You find any mistake or error then make a pull request or inform to me ..
2745
***
28-
### - Leave your Error or anything want to know , get connected on gitter Click the Link
29-
[![Join the chat at https://gitter.im/Reaction-Timer/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/Reaction-Timer/Lobby)
3046

3147
# Programming Languages Used Here Are :
3248
* Javascript
3349
* HTML & CSS
50+
***
51+
<!--
52+
[![Start](https://on.ahmda.ws/osd3/c)](./../../)
53+
## Getting Started ( until website is launched)
54+
- Show support by giving a :star:
55+
- fork it
56+
- open intro.html in any browser -->
57+
58+
[![🙌](https://raw.githubusercontent.com/ahmadawais/stuff/master/images/git/connect.png)](./../../)
59+
60+
## Connect
61+
62+
<div align="left">
63+
<p><a href="https://github.com/viditvarshney"><img alt="GitHub @viditvarshney" align="center" src="https://img.shields.io/badge/GITHUB-gray.svg?colorB=6cc644&colorA=6cc644&style=flat" /></a>&nbsp;<small><strong>(follow)</strong> To stay up to date on free & open-source software</small></p>
64+
<p><a href="https://twitter.com/_imvv"><img alt="Twitter @_imvv_" align="center" src="https://img.shields.io/badge/TWITTER-gray.svg?colorB=1da1f2&colorA=1da1f2&style=flat" /></a>&nbsp;<small><strong>(follow)</strong> To get interesting tweets about tech.</small></p>
65+
<p><a href="https://www.youtube.com/buzzfeedRed"><img alt="YouTube BuzzFedRed" align="center" src="https://img.shields.io/badge/YOUTUBE-gray.svg?colorB=ff0000&colorA=ff0000&style=flat" /></a>&nbsp;<small><strong>(subscribe)</strong> To gaming videos,tech videos, advices, motivation</small></p>
66+
<p><a href="https://medium.com/@imvv"><img alt="Medium: @imvv" align="center" src="https://img.shields.io/badge/Medium-gray.svg?colorB=4D2AFF&colorA=4D2AFF&style=flat" /></a>&nbsp;<small><strong>(read)</strong> In-depth & long form technical articles</small></p>
67+
<p><a href="https://www.linkedin.com/in/imvv/"><img alt="LinkedIn @Vidit Varshney" align="center" src="https://img.shields.io/badge/LINKEDIN-gray.svg?colorB=0077b5&colorA=0077b5&style=flat" /></a>&nbsp;<small><strong>(connect)</strong> On the LinkedIn profile y'all</small></p>
68+
</div>
69+
70+
<br>
71+

‎index.html‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,35 @@
11
<html>
22
<head>
33
<title>Reaction Time Game</title>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
7+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
9+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
410

511
<link rel="stylesheet" type="text/css" href="style.css">
612
</head>
713

814
<body>
915

10-
<h1>Test Your Reactions!</h1>
11-
<h2>Click On The Boxes And Circles As Quickly As You Can! </h2>
12-
<h3>Your best time and the current time is displayed before</h3>
16+
<a href="https://github.com/viditvarshney/Reaction-Timer-"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
1317

14-
<p class="bold">Your Time: <span id="timeTaken"></span></p>
15-
16-
<p class="bold">Your Best Time: <span id="best"></span></p>
18+
<p class="bold">
19+
Your Time: <span id="timeTaken" style="color: green;"></span>
20+
Your Best Time: <span id="best" style="color: blue;"></span>
21+
22+
</p>
23+
<div>
24+
<button id="rules">Tip</button>
25+
<a href="/intro.html"><button id="exit">Exit</button></a>
26+
</div>
1727

1828
<div id="shape"></div>
19-
20-
<script type="text/javascript" src="script.js"></script>
29+
<canvas id="myCanvas" width="1500" height="300">
30+
31+
<script type="text/javascript" src="script.js"></script>
32+
</canvas>
2133

2234
</body>
2335

‎intro.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Reaction-timer Intro</title>
7+
<style>
8+
body {
9+
text-align: center;
10+
background-color: lightgray;
11+
font-size: 25px;
12+
}
13+
a#play_game {
14+
text-decoration: none;
15+
border: 2px solid darkgray;
16+
padding: 20px;
17+
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
18+
border-radius: 10px;
19+
}
20+
a#play_game:hover {
21+
background-color: blue;
22+
color: white;
23+
24+
}
25+
div {
26+
margin-top: 300px;
27+
min-height: 791px;
28+
min-width: 691px;
29+
}
30+
31+
</style>
32+
</head>
33+
<body>
34+
<div>
35+
<a href="https://github.com/viditvarshney/Reaction-Timer-"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
36+
<h1>Test Your Reactions!</h1>
37+
<h2>Click On The Boxes And Circles As Quickly As You Can! </h2>
38+
<h3>Your best time and the current time is displayed before</h3>
39+
<a id="play_game" href="/index.html">Play Game!</a>
40+
</div>
41+
42+
</body>
43+
</html>

‎script.js‎

Lines changed: 70 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,83 @@
1-
var bestTime = 0;
2-
var start = new Date().getTime();
3-
4-
function getRandomColor() {
5-
6-
var x = Math.floor(Math.random()* 256);
7-
var y = Math.floor(Math.random()* 256);
8-
var z = Math.floor(Math.random()* 256);
1+
window.onload = function () {
92

10-
var randomColorMaker = "rgb(" + x + "," + y + "," + z + ")";
3+
var bestTime = 10;
4+
var start = new Date().getTime();
5+
document.getElementById("rules").onclick = function () {
6+
alert("Try to click the shapes as soon as possible to increase your score");
7+
}
118

12-
document.getElementById("shape").style.backgroundColor = randomColorMaker;
13-
}
9+
function getRandomColor() {
10+
11+
var x = Math.floor(Math.random()* 256);
12+
var y = Math.floor(Math.random()* 256);
13+
var z = Math.floor(Math.random()* 256);
14+
15+
var randomColorMaker = "rgb(" + x + "," + y + "," + z + ")";
1416

15-
function makeShapeAppear() {
16-
17-
var top = Math.random()* 400;
18-
19-
var left =Math.random()* 1150;
20-
21-
var width = (Math.random()* 400) + 100;
22-
23-
if(Math.random() < 0.5) {
17+
document.getElementById("shape").style.backgroundColor = randomColorMaker;
18+
}
19+
20+
function makeShapeAppear() {
21+
22+
var top = Math.random()* 200;
23+
24+
var left =Math.random()* 1150;
2425

25-
document.getElementById("shape").style.borderRadius = "50%";
26-
} else {
26+
var width = (Math.random()* 400) + 100;
2727

28-
document.getElementById("shape").style.borderRadius = "0";
28+
if(Math.random() > 0.5) {
29+
30+
document.getElementById("shape").style.borderRadius = "50%";
31+
} else {
32+
33+
document.getElementById("shape").style.borderRadius = "0";
34+
}
35+
36+
document.getElementById("shape").style.top = top + "px";
37+
document.getElementById("shape").style.left = left + "px";
38+
document.getElementById("shape").style.width = width + "px";
39+
document.getElementById("shape").style.height = width + "px";
40+
41+
document.getElementById("shape").style.backgroundColor = getRandomColor();
42+
43+
document.getElementById("shape").style.display ="block";
44+
start = new Date().getTime();
2945
}
30-
31-
document.getElementById("shape").style.top = top + "px";
32-
document.getElementById("shape").style.left = left + "px";
33-
document.getElementById("shape").style.width = width + "px";
34-
document.getElementById("shape").style.height = width + "px";
35-
36-
document.getElementById("shape").style.backgroundColor = getRandomColor();
37-
38-
document.getElementById("shape").style.display ="block";
39-
start = new Date().getTime();
40-
}
4146

42-
function Timeout() {
43-
44-
setTimeout(makeShapeAppear, Math.random()* 2000);
45-
46-
}
47-
Timeout();
47+
function Timeout() {
48+
49+
setTimeout(makeShapeAppear, Math.random()* 2000);
50+
51+
}
52+
Timeout();
4853

4954

50-
document.getElementById("shape").onclick = function() {
51-
52-
53-
document.getElementById("shape").style.display = "none";
54-
55-
var end = new Date().getTime();
56-
57-
var timeTaken = (end - start) / 1000 + " sec";
58-
59-
document.getElementById("timeTaken").innerHTML = timeTaken;
60-
55+
document.getElementById("shape").onclick = function() {
6156

62-
63-
if (timeTaken < bestTime || bestTime == 0) {
57+
58+
document.getElementById("shape").style.display = "none";
59+
60+
var end = new Date().getTime();
61+
62+
var timeTaken = (end - start) / 1000;
63+
64+
document.getElementById("timeTaken").innerHTML = timeTaken + " sec";
65+
66+
if(timeTaken < bestTime) {
6467
bestTime = timeTaken;
65-
document.getElementById("best").innerHTML = bestTime + "s"
66-
} else {
68+
document.getElementById("best").innerHTML = bestTime + " sec";
6769

68-
document.getElementById("best").innerHTML = timeTaken + " sec";
69-
}
70-
71-
72-
Timeout();
70+
71+
}
72+
73+
74+
75+
76+
Timeout();
77+
}
78+
// exit function
79+
exit.onclick = function(e) {
80+
score = bestTime*1000;
81+
alert("Great, You Best Score till now is: " + score);
82+
}
7383
}

‎style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,9 @@ position: relative;
1111
font-weight: bold;
1212
color:red;
1313
}
14+
button {
15+
text-align: center;
16+
width: 150px;
17+
margin-left: 800px;
18+
border-radius: 10px;
19+
}

0 commit comments

Comments
 (0)