Game using Html CSS and Javascript

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

Introduction to Javascript [Reaction game] project.

This is a simple reaction game that 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 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 some new about javascript.

we use javascript functions, variables, and random variables to create this project. and I recommended that first you understand this project with the help of the points given below and then create this project on your own conditions if you are stuck on any point then feel free to seek our code.

you can also download our project files from the given the download button at the bottom of the post 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 it with me on my social media pages.

The Logic of the Game

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

Note – 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 is given below for a full understanding.

Source Code of the game project.

HTML Code

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

CSS Code

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

JavaScript Code

<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 your page loading time. it’s also a symbol of good code.