Bonjour a tous,
Pourriez vous m'aider?

Je fais un petit jeux ou l'on doit éviter des voitures qui vont de droite a gauche. J'utilise enfaite un setIntervall pour générer la voiture puis j'utilise animate pour la déplacer. Problème je voudrais en quelque sorte pouvoir gérer les collisions mais aussi pouvoir générer d'autres voitures avant la fin des animations.

app.js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$(document).ready(function() {
  var $blackCar = $('#blackCar');
  var arrayListOfCar;
  var NbCar;
  var randomCoordY;
  var idCar = 0;
 
// keyboard action for car
  $(document).keydown(function(e) {
      switch (e.which) {
      case 38:
          $blackCar.stop().animate({
              top: '-=40'
          }); //up arrow key
          break;
      case 40:
          $blackCar.stop().animate({
              top: '+=40'
          }); //bottom arrow key
          break;
      }
  });
 
 
 
 
  setInterval(function() {
      idCar = idCar + 1;
      $('#obstacle').html('<img id="'+idCar+'" src="img/yellowCar.ico" class="initPosition">');
      randomCoordY =  randomCoord(roadPositionTop, roadHeight);
      $('#'+idCar).css({'top': randomCoordY + 'px' });
      rightToLeft('#'+idCar);
  }, 5000);
 
 
 
 
});
mon rendu
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!-- set viewport to device width to allow responsiveness -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
    <!-- JS -->
 
 
    <title>Car Game</title>
</head>
<body>
  <section>
    <h1>Car game avoid other car</h1>
    <img src="img/road.png"  width="100%" id="road">
    <img class="blackCar" src="img/blackCar.ico"  id="blackCar">
    <aside id="obstacle">
    </aside>
  </section>
  <script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
  <script src="scripts/conf.js" ></script>
  <script src="scripts/function.js" ></script>
  <script src="scripts/app.js" ></script>
</body>
</html>

les fonctions
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function randomNumber(limitNumber)
{
  var limitNumber = parseInt(limitNumber);
  var Nb = Math.floor((Math.random() * limitNumber));
  return Nb;
}
 
function randomCoord(intervallBeginY0, intervallEndY1)
{
  var intervallBeginY0 = parseInt(intervallBeginY0);
  var intervallBeginY1 = parseInt(intervallBeginY1);
  var RandomCoord =((Math.random() * intervallEndY1) + intervallBeginY0);
  return RandomCoord;
}
 
function rightToLeft(id)
{
  var left = $(id).offset().left;
 
  $(id).css({left:left}).animate({"left":"0px"}, 3000, function(){
        $(id).remove();
  });
}
Merci de votre aide.