Skip to content
  • Linkedin
  • Youtube
  • Pinterest
  • Home
  • Privacy Policy
  • About
  • Contact
Programmingoneonone

Programmingoneonone

Programmingoneonone is a website that publishes daily tutorials, methods, guides, and articles on IT, Education, and technology.

  • Home
  • Human Values
  • DSA
  • IoT Tutorials
  • Interview Questions and Answers
  • Toggle search form
game in html css and javascript with practical program code example

Game using Html CSS and Javascript

Posted on 10 July 20198 April 2023 By YASH PAL No Comments on 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.

Computer Science Tutorials, Javascript Tutorials, Projects Tags:computer science, javascript, Programs

Post navigation

Previous Post: Library Management System Program in C++
Next Post: What is an Algorithm in Programming

Related Tutorials

python libraries for text transformation REPHRASING REVOLUTION: HOW PYTHON LIBRARIES FACILITATE TEXT TRANSFORMATION Computer Science Tutorials
Introduction to Statistics for Data Science: Building a Solid Foundation Computer Science Tutorials
programming languages for machine learning and data science Top Programming Languages For Machine Learning Computer Science Tutorials
How to Become a Successful Data Engineer in the Data Science Field – Complete Guide Computer Science Tutorials
Is Python a good language for Machine Learning/AI? Computer Science Tutorials
basics of boolean algebra Its Operators, Laws, and Examples Basics of Boolean Algebra: Its Operators, Laws, and Examples Boolean Algebra

Leave a Reply

You must be logged in to post a comment.

  • Java Interview Questions and Answers (2023)
    Thinking of becoming a Java developer? I must say it’s a good choice! Java is continuously named the most popular programming language. And the...

    Learn More “Java Interview Questions and Answers (2023)” »

  • Iot(Internet of things) in healthcare
    IoT in Healthcare
    IoMT (Internet of Medical Things) stands for devices that can collect and exchange data – either with users or other devices via the internet,...

    Learn More “IoT in Healthcare” »

  • four stages of iot solution for industry
    IoT for Industry
    In this post, we are going to learn about use cases of IoT for Industry and four stages for providing IoT solutions. Machine Diagnosis...

    Learn More “IoT for Industry” »

  • Iot for agricultural
    IoT in Agriculture
    IoT technology has realized smart wearables, connected devices, automated machines, and driverless cars. However, in agriculture, the IoT has brought the greatest impact. Amongst the challenges...

    Learn More “IoT in Agriculture” »

  • Iot for logistics
    IoT in Logistics and Supply Chain
    IoT applications for smart logistics and supply chain systems:  Logistics Fleet Tracking  To track the locations of the vehicles in real time, the vehicle...

    Learn More “IoT in Logistics and Supply Chain” »

  • Algorithms Tutorials
  • Basic Programming
  • Boolean Algebra
  • C Programming Tutorials
  • C++ Tutorials
  • Compiler Design Tutorials
  • Computer Networks Tutorials
  • Computer Organization Tutorials
  • Computer Science Tutorials
  • Data Structures Tutorials
  • DBMS Tutorials
  • Developer Guide
  • Digital Communication
  • Digital Logic Tutorials
  • Internet of Things Tutorials
  • Internet Tutorials
  • Interview questions answers
  • Java Tutorials
  • Javascript Tutorials
  • Linux
  • Machine Learning Tutorials
  • Operating Systems Tutorials
  • Programming Tutorials
  • Projects
  • Python Tutorials
  • Tips&Tricks
  • Tools
  • VBScript Tutorials
  • Java Interview Questions and Answers (2023)
    Thinking of becoming a Java developer? I must say it’s a good choice! Java is continuously named the most popular programming language. And the...

    Learn More “Java Interview Questions and Answers (2023)” »

  • Iot(Internet of things) in healthcare
    IoT in Healthcare
    IoMT (Internet of Medical Things) stands for devices that can collect and exchange data – either with users or other devices via the internet,...

    Learn More “IoT in Healthcare” »

  • four stages of iot solution for industry
    IoT for Industry
    In this post, we are going to learn about use cases of IoT for Industry and four stages for providing IoT solutions. Machine Diagnosis...

    Learn More “IoT for Industry” »

  • Iot for agricultural
    IoT in Agriculture
    IoT technology has realized smart wearables, connected devices, automated machines, and driverless cars. However, in agriculture, the IoT has brought the greatest impact. Amongst the challenges...

    Learn More “IoT in Agriculture” »

  • Iot for logistics
    IoT in Logistics and Supply Chain
    IoT applications for smart logistics and supply chain systems:  Logistics Fleet Tracking  To track the locations of the vehicles in real time, the vehicle...

    Learn More “IoT in Logistics and Supply Chain” »

Copyright © 2023 Programmingoneonone.

Powered by PressBook Blog WordPress theme