Wednesday, July 10, 2019

Make a simple Reaction game using html css and javascript | web development project


In this post, you will learn about how to make a web development project or make a simple reaction game using just javascriptHTML and CSS.

javascript project and web development project, make a reaction game using javascript
reaction game

Introduction to Javascript [Reaction game] project.


This is a simple reaction game which totally depends on the javascript programming language. but to fully understand this project you need to have at least some knowledge of HTML and CSS. this is a small project which is very useful for the beginners who love to code in javascript and one can also use this project in their own web development project. in this project, you will learn about some new about javascript. we use javascript functions, variables, and random variables to create this project. and I recommended you that first you understand this project with the help of points given below and then create this project on your own conditions and if you stuck on any point then feel free to seek into our code. you can also download our project files from the given the download button at the bottom of the post and also feel free to customize the code of the project and recreate this project on your own conditions and use your own creative stuff and also share with me on my social media pages. 

The logic of the project. 



Firstly you need to print out "Test your reaction skills!" in the heading tag of the HTML.
Second, you need to print out two paragraphs "click on the boxes and circles as quickly as you can" and "your time" using P tag of the HTML.
After that, you need to print out a circle or right angle randomly using javascript with a random color as shown in the image given below. 
    javascript project in web development, reaction game using javascript
    reaction game


    Important:


    When you click on the circle or right angle you need to pop out another right angle or circle using javascript and random variables. 
    also, print out the time in seconds in between the click on the circle or right angle or pop out the next circle or right angle. 
    always set the background color or the circle or right angle randomly. 
    always print out the circle or right angle randomly using random variables. 
    pick the width and height of the circle or right angle randomly.
    pick the margin from the top and left randomly. 
    the width and height of the circle and right angle should not be zero. 
      see the image given below for the full understanding. 

      javascript project in web development, reaction game using javascript
      javascript project

      Coding of the project.

      Add HTML:


      <!DOCTYPE html>

      <html>

      <head>

      <title>reaction game</title>
      </head>
      <body>

      <h1>Test your reaction skills!</h1>

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

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

      <div id="shape"></div>
      </body>

      </html>

      Add CSS:


      <style type="text/css">

          #shape {

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

      body {

       font-family: sans-serif;
      }

      .bold {

         font-weight: bold;
      }

      </style>

      Add JavaScript:


      <script type="text/javascript">

      var start = new Date().getTime();

      function getRandomColor() {

                    var letters = '0123456789ABCDEF';
                    var color = '#';
                   for (var i = 0; i < 6; i++) {

                         color += letters[Math.floor(Math.random() * 16)];
                     }
                  return color;
      }

      function makeShapeAppear(){

      var top = Math.random()* 150;
      var left = Math.random()* 400;
      var width = (Math.random()* 300)+ 50;

      if (Math.random() > 0.5) {

          document.getElementById("shape").style.borderRadius = "50%";

      }else
            {

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

      }


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

      document.getElementById("shape").style.width = width + "px";
      document.getElementById("shape").style.height = width + "px";

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

      document.getElementById("shape").style.display = "block"; 
                  
      start = new Date().getTime();

      }

      function appearAfterDeley(){ 

           setTimeout(makeShapeAppear, Math.random()*2000);

      }

      appearAfterDeley();


      document.getElementById('shape').onclick = function(){

      document.getElementById("shape").style.display = "none";
      var end = new Date().getTime();
      var timeTaken = (end - start)/1000; 
      document.getElementById("timeTaken").innerHTML = timeTaken + "s";

      makeShapeAppear();

      }

      </script>

      Note: always add javascript at the bottom of the HTML page because by doing this it does not affect on your page loading time. it's also a symbol of good code.  

      Download project files:




      6 comments:

      1. Your article contains very much information about the html css and javascript. Your article is very informative and nicely describes the use of html css and javascript. If anyone interested to join the Best Comprehensive Java Course In Delhi, codingbytes is a good choice.

        ReplyDelete
      2. I would maintain a strategic distance from the novice and re-appropriate to an individual or organization with great experience and sensible rates to make my web nearness. In the event that cash were no item, at that point I would just manage built up firms and pay boatloads of money to take care of business right and progressed nicely. Web Design Curriculum

        ReplyDelete
      3. You there, this is really good post here. Thanks for taking the time to post such valuable information. Quality content is what always gets the visitors coming. freelance web designer london

        ReplyDelete
      4. Flutter Programming is one of the most popular in the cross platforms industry. We build excellent flutter mobile app and also learn how to overcome performance issues. Flutter Development Company
        is the best choice for all startups to discuss and get their project quotation. We also enable many startups to do Proof of concept and help them to learn about business decisions.

        ReplyDelete
      5. Such a great read! Cross-platform frameworks are gaining in popularity. Flutter and react native are the two leading market players for cross platform app development in Austin.

        ReplyDelete
      6. There are such a large number of stages for website structuring like static HTML, streak websites and some more. PHP is one such stage that successfully works the best for custom bleeding edge web arrangements.Webdesign

        ReplyDelete