Click Game

Objectives

We will create a simple little game:

an element appears on the game area
you must click on the element as quickly as possible
we measure the time between appearance and click

Appuyer sur la touche A pour commencer

HTML

The HTML content of the page will be basic:

a title
a game area
an area to display timer times

CSS

The CSS will also be basic:

style definition for the game area #zone
style definition for elements that will appear .item

JS

In the JavaScript part, we need to achieve several objectives.

First, we need to create a function (which we could call popItem()) that adds an element to the game area. This element must meet the following constraints:

level 1
- the CSS class item must be associated
- we modify the top and left style properties to get random values and stay within the game area limits
level 2
- when we click on the element, it is destroyed
- when we destroy the element, it generates another one after a certain time
level 3
- when the element is created, we record the current timestamp
- when the element is destroyed, we record the current timestamp
- we calculate the difference between the two
- we add an element in #chronoList to display the reaction time

This main objective involves secondary objectives:

how to manage triggering the popItem function?
- we can add an event listener
- we need to find how to trigger an event after a certain delay with setTimeout
how to add/destroy an element? dom
what is a timestamp, and how to get it? Date.now()