Objectifs

L'objectif est de réaliser un mini-jeu en ligne.

Pour cela on donne le code de départ:

<!DOCTYPE html>
<html>

<head>
  <style>
    div {
      width: 400px;
      height: 400px;
      margin: auto;
      background: black;
      cursor: crosshair;
    }

    #cible {
      background: red;
      padding: 5px;
      position: relative;
    }
  </style>

</head>

<body>
  <div>
    <span id="cible" onclick="touche()">O</span>

  </div>
  <script>
    var delai = 1000;
    var cible = document.getElementById('cible');
    setInterval(boucle, delai);

    function boucle() {
      cible.style.left = "" + Math.floor(Math.random() * 400) + "px";
      console.log(cible.style.left);
    }

    function touche() {
      alert("gagné!!");
    }
  </script>
</body>

</html>

Etapes:

Insérer l'image dans la "cible",
Rechercher le rôle de la ligne:

setInterval(boucle, delai);

Modifier la ligne:

 cible.style.left = "" + Math.floor(Math.random() * 400) + "px";

En utilisant une forme:

 x = x  +  Math.floor(Math.random() * A)  -B ;

 cible.style.left = "" + x + "px";

Modifier A et B afin de modifier la variable x de + ou - 10 pixels.
Avec 2 conditions de la forme si x > 400 alors x = 400, interdire le moustique de sortir de la zone de jeu.
Sur le même principe modifier la position verticale avec une variable y.
Lorsque la cible est touchée, modifier A et B afin de déplacer le moustique plus rapidement et modifier le score.