NSI Rocks !

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?
  • how to add/destroy an element? dom
  • what is a timestamp, and how to get it? Date.now()