NSI Rocks !

Jeu du clic

Objectifs

Nous allons créer un petit jeu simple :

  • un élément apparaît sur la zone de jeu
  • il faut cliquer sur l'élément le plus rapidement possible
  • on mesure le temps entre l'apparition et le clic
Appuyer sur la touche A pour commencer

HTML

Le contenu HTML de la page sera basique :

  • un titre
  • une zone de jeu
  • une zone pour afficher les temps du chrono

CSS

Le CSS sera basique également :

  • définition du style pour la zone de jeu #zone
  • définition du style des éléments qui vont apparaître .item

JS

Dans la partie javascript, il faut atteindre plusieurs objectifs.

Dans un premier temps, nous devons créer une fonction (que l'on pourrait appeler popItem()) qui ajoute un élément dans la zone de jeu.
Cet élément doit répondre aux contraintes suivantes :

  • niveau 1
    • la classe CSS item doit être associée
    • on modifie les propriétés top et left du style pour obtenir des valeurs aléatoires et rester dans les limites de la zone de jeu
  • niveau 2
    • quand on clique sur l'élément, il est détruit
    • quand on détruit l'élément, il en génère un autre après un certain laps de temps
  • niveau 3
    • quand l'élément est créé, on enregistre le timestamp actuel
    • quand l'élément est détruit, on enregistre le timestamp actuel
    • on calcule la différence entre les deux
    • on ajoute un élément dans #chronoList pour afficher le temps de réaction

Cet objectif principal implique des objectifs secondaires :

  • comment gérer le déclenchement de la fonction popItem ?
  • comment ajouter/détruire un élément ? dom
  • qu'est-ce qu'un timestamp, et comment l'obtenir ? Date.now()