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 . Live at Click-Me

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 !...

Screenshot 1

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 ..

Programming Languages Used Here Are :

Javascript
HTML & CSS

Connect

(follow) To stay up to date on free & open-source software

(follow) To get interesting tweets about tech.

(subscribe) To gaming videos,tech videos, advices, motivation

(read) In-depth & long form technical articles

(connect) On the LinkedIn profile y'all

Record Best Time

This is the Javascript

` 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();
        }`

This is the HTML code

`

<title>Reaction Time Game</title>

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

<body>
    
    <h1>Test Your Reactions!</h1>
    <h2>Click On The Boxes And Circles As Quickly As You Can! </h2>
    <h3>Your best time and the current time is displayed before</h3>
    
    <p class="bold">Your Time: <span id="timeTaken"></span></p>
    
    <p class="bold">Your Best Time: <span id="best"></span></p>
    
    <div id="shape"></div>
    
    <script type="text/javascript" src="script.js"></script>
    
</body>

Record the best time of the User and display it.

viditvarshney / reaction-timer.github.io Goto Github PK

reaction-timer.github.io's Introduction

Reaction-Timer-

Welcome to the "Reaction-Timer"

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

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 ..

Programming Languages Used Here Are :

Connect

reaction-timer.github.io's People

Contributors

Stargazers

Watchers

Forkers

reaction-timer.github.io's Issues

This is the Javascript

This is the HTML code

Recommend Projects

Recommend Topics

Recommend Org