lucstechblog: Javascript reaction game

For an index to all my stories click this text

One of the most, if not THE most, used programming languages is Javascript. You might not be writing Javascript programs yourself but you are surely using Javascript programs every day.
Javascript is build into every browser be it on your PC, Phone or Tablet. Everytime you click a button, move a slider, fill in a text form or whatever the underlying Javascript motor performs the function.

Javascript can also be used on an ESP8266 or ESP32 webserver page to display the status of a led, put a graph or gauge on your screen, examine the state of an onscreen button or get the value of a slider. I am going to publish a series of articles on this to enhance your ESP's webpages.

And do you remember Freeboard ?? I wrote a story on this IOT dashboard in 2019. Freeboard is completely written in Javascript. You can find the story on Freeboard here: http://lucstechblog.blogspot.com/2019/10/freeboard.html

And I'll let you in, in a little secret.
You can build a webpage with Javascript and easily turn that into an app for your phone. Until now I have been using MIT's App Inventor for building apps for my phone and tablet but I am more and more switching to Javascript.

As an excercise I wanted to build a small simple reaction game in Javascript and turn that into an App for my phone. This story tells how the game was written. Another story that's coming up tells how the game is turned into an app.

The reaction game.

The game is quite simple. On an empty screen a red dot is placed. You have to press the dot as soon as you see it. Then the dot jumps to another part of the screen. The object of the game is to click the dot as soon as possible and the time you needed and the best time are shown.

A webpage framework.

Basically a webpage with Javascript code is build up as follows:

<!DOCTYPE html>
<html>
<style>

</style>
<body>

<script>

</script>

</body>
</html>

As the framework shows every part of the page is placed within limits. For example the javascript part starts after the <script> tag and ends with the </script> tag. There is some CSS code between the <style> and </style> tags. CSS code describes the look of the elements on the page.
Between the <body> and <script> html code can be placed that puts text, buttons, sliders etc. etc. etc on the page.

I will not get too much into the details as there are books of hundreds of pages written on HTML, CSS and Javascript. There are some good (free) courses on the web where you can learn all this. Check for example https://www.w3schools.com/ and https://javascript.info/

Some highlights on the program.

First thing is to calculate the time that passes between when a new dot is placed on the screen and the dot is clicked.

With new Date() we can get the actual date and time.

var start = new Date();

At the start we put this in a variable called start.

var end = + new Date();

When the dot is clicked we get the date and time anew and put it into a variable called end.

var timeused = end-start;

By subtracting start from end we get the time in milliseconds. And that is the time we have to beat each turn.

Each turn the red dot needs to be placed at at random value on the screen.

window.innerWidth
window.innerHeight

These statements supply the Width and Height of the webpage. Nice trick is that they automatically change if we resize the window.

   var newx = (Math.random()*window.innerWidth)-50;
   var newy = (Math.random()*window.innerHeight)-50;

As Math.random() gives a random value between 0 and 1 the formula nicely calculates a value between 0 and the window Width and window Height. We subtract 50 from that value as that is the radius of the dot so the dot will always be placed within the window.

   var d = document.getElementById('divtest');
   d.style.position = "absolute";
   d.style.left = newx+'px';
   d.style.top = newy+'px';

These commands first get the information about the dot element and then alter the co-ordinates of that element to the newx and newy. We have to add 'px' to the value to tell the command that we are working in screen pixels.

document.getElementById("divtest").addEventListener("click", clicked );

This Javascript statement adds a so called Event Listener to the dot element. The Event it checks is wether the dot is clicked. And if it is it runs the function clicked.

At the beginning of the webpage there is the <style> description.

<style>
.red {
height: 50px;
width: 50px;
background-color: #f00;
border-radius: 50%;
display: inline-block;
}
</style>

This gives the element with the class "red" (which is the dot) a width of 50 pixels and a height of 50 pixels and sets the border-radius to 50% which makes it a circle. The color is in RGB and #f00 is red.

That covers the most part of the program. So I present it here in full.

<!DOCTYPE html>
<html>

<style>
.red {
height: 50px;
width: 50px;
background-color: #f00;
border-radius: 50%;
display: inline-block;
}
</style>

<body>
<h3 id = "besttijd">Start</h3>
<h3 id = "nwtijd"></h3>
<div id="divtest" class='red'></div>

<script>
document.getElementById("divtest").addEventListener("click", clicked );
var start = new Date();
var best = 1000000;

function clicked()
{
   var newx = (Math.random()*window.innerWidth)-50;
   var newy = (Math.random()*window.innerHeight)-50;
   if (newx < 0) {newx=0};
   if (newy < 0) {newy=0};
   var d = document.getElementById('divtest');
   d.style.position = "absolute";
   d.style.left = newx+'px';
   d.style.top = newy+'px';

var end = + new Date();
var timeused = end-start;
start = end;

if (timeused < best)
{
best = timeused;
document.getElementById('besttijd').innerHTML= "best time = "+best;
}
document.getElementById('nwtijd').innerHTML= "your time = "+timeused;

}

</script>

</body>
</html>

You can copy the program, pste it in wordpad (or any other editor) and save it as game.html and when you click that file a webpage will open and you can start playing. As it checks the page width and height all the time you can open this webpage on your PC, Tablet or Phone.

How does it look.

Here is a small frame with the program running. You can play it right away. Try not to get too addcited ;)

The game on the web

I copied the game to a Github repositry and then made a Github webpage from that. You can read how to do that in this story: http://lucstechblog.blogspot.com/2023/07/using-github-for-building-website.html

I urge you to do the same and make some alterations like altering the text, the background color, the color of the dot etc. That way you get some experience with web-programming.

Here is the link: https://lucvolders.github.io/htmltest02/

You can open that link on your PC, Tablet or Phone and start playing the game.

In an upcoming story I am going to show you how turn this webpage into an app.

I wrote a book that is not a tutorial but just chockfull with Javascript tips (more as 500). It is available on Amazon (also internationally) and the regular bookstores. If you are going to program in Javascript frequently this book can save a lot of time. Here is the link: Javascript tips by Luc Volders

Till next time
Have fun

Luc Volders

Friday, March 22, 2024

Javascript reaction game