Event

Compléter le code pour obtenir la gestion de la souris !

<div id="game">

</div>

//init array and find the id
var dots = [],

    game =document.--?--("#game"); 

// create and store 200 divs

for (var i = 0; i < 200; i++) {

  var node = document.createElement("div");

  game.--?--

  dots.--?--

}

var currentDot = 0;

// gestion de la souris

game.addEventListener("--?--", function (--?--) {

  --?--.style.color="green"; // in the example color = random

  var dot = dots[currentDot],

      rect = game.getBoundingClientRect(),

      offsetX = e.clientX - rect.left,

      offsetY = e.clientY - rect.top;

  dot.--?--.left = offsetX  + "px"; 

  dot.--?--.top = offsetY + "px";

  

  currentDot = (currentDot + 1) % dots.length;

});

// leave the game

game.addEventListener(--?--, function (e) {

  game.style.backgroundColor="white";

});

Ne vous préoccupez pas des effets.

remarque : les effets de mouvement et couleur sont gérés par les transitions css
  .trail { 
    position: absolute;
    border-radius: 50%;
    background: red;
    transition: all 3s;

  }