diff --git a/Reaction-Timer/README.md b/Reaction-Timer/README.md new file mode 100644 index 0000000..ec756f7 --- /dev/null +++ b/Reaction-Timer/README.md @@ -0,0 +1,32 @@ +# Reaction-Timer- +This is the game based on javascript which notes your reaction time , you have to very attentive towards it ...... So check and play . + + +# +*** +# Welcome to the **"Reaction-Timer"** +*** + +This is the game which will make you attentive with the game . It is very interesting when you bored ... +*** + + +## You have to click the shapes as fast as you can , your time of response wil be automatically noted and displayed on the left hand side + +*** +> Here are the screenshots of the Game !... + + ![reaction](https://user-images.githubusercontent.com/34159717/43367366-62ade7a8-9369-11e8-9d52-aabe76f742d7.JPG) +Screenshot 1 + +![reaction1](https://user-images.githubusercontent.com/34159717/43367367-63108aca-9369-11e8-96a6-ba5fc79201bb.JPG) +Screenshot 2 + +## 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 .. +*** +Leave your Error or anything want to know , get connected on gitter Click the Link +[![Join the chat at https://gitter.im/Reaction-Timer/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/Reaction-Timer/Lobby) + +# Programming Languages Used Here Are : +* Javascript +* HTML & CSS diff --git a/Reaction-Timer/cc b/Reaction-Timer/cc new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/Reaction-Timer/cc @@ -0,0 +1 @@ + diff --git a/Reaction-Timer/index.html b/Reaction-Timer/index.html new file mode 100644 index 0000000..91b2b8d --- /dev/null +++ b/Reaction-Timer/index.html @@ -0,0 +1,89 @@ + + + + Reaction Time Game + + + + + + + + + + + + +
+ +
+ +
+ + + +
+ + ☰ +
+ + + +
+ + + +
+ + +
+ + + + + +

Your Time:

+ +

Your Best Time:

+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/Reaction-Timer/script.js b/Reaction-Timer/script.js new file mode 100644 index 0000000..6f06987 --- /dev/null +++ b/Reaction-Timer/script.js @@ -0,0 +1,72 @@ + var start = new Date().getTime(); + + function getRandomColor() { + + var x = Math.floor(Math.random()* 256); + var y = Math.floor(Math.random()* 256); + var z = Math.floor(Math.random()* 256); + + var randomColorMaker = "rgb(" + x + "," + y + "," + z + ")"; + + document.getElementById("shape").style.backgroundColor = randomColorMaker; + } + + function makeShapeAppear() { + + var top = Math.random()* 400; + + var left =Math.random()* 1150; + + var width = (Math.random()* 400) + 100; + + if(Math.random() < 0.5) { + + document.getElementById("shape").style.borderRadius = "50%"; + } else { + + document.getElementById("shape").style.borderRadius = "0"; + } + + document.getElementById("shape").style.top = top + "px"; + document.getElementById("shape").style.left = left + "px"; + document.getElementById("shape").style.width = width + "px"; + document.getElementById("shape").style.height = width + "px"; + + document.getElementById("shape").style.backgroundColor = getRandomColor(); + + document.getElementById("shape").style.display ="block"; + start = new Date().getTime(); + } + + function Timeout() { + + setTimeout(makeShapeAppear, Math.random()* 2000); + + } + Timeout(); + + + document.getElementById("shape").onclick = function() { + + document.getElementById("shape").style.display = "none"; + + var end = new Date().getTime(); + + var timeTaken = (end - start) / 1000 + " sec"; + + document.getElementById("timeTaken").innerHTML = timeTaken; + + var bestTime = 0; + + if (timeTaken < bestTime) { + + bestTime = timeTaken; + document.getElementById("best").innerHTML = bestTime + " sec"; + } else { + + document.getElementById("best").innerHTML = timeTaken + " sec"; + } + + + Timeout(); + } \ No newline at end of file diff --git a/Reaction-Timer/style.css b/Reaction-Timer/style.css new file mode 100644 index 0000000..b8ace79 --- /dev/null +++ b/Reaction-Timer/style.css @@ -0,0 +1,13 @@ + #shape { + + width:200px; + height:200px; + background-color: green; + border: 1px solid blue; + display: none; + position: relative; + } + .bold { + font-weight: bold; + color:red; + } \ No newline at end of file