Détection de collision et génération d'objets après une intervalle

Version imprimable

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:

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:

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:

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.

27/02/2018, 22h16
headmax

Un début

Salut, j'ai fait ce genre de script pour des collisions entre Div's. Je ne sais pas si ça peu t'aider.

Démo : https://codepen.io/headmax/pen/ddwGKy?editors=1010

Merci beaucoup,

J'ai intégré ta fonction de test de collision, je n'avais pas pensé a parcourir mes obstacle selon leurs classes pour vérifier les collisions. Voici le code

fichier principal

Code:

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
39
40
41
42
43
44
$(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').append('<img id="'+idCar+'" src="img/yellowCar.ico" class="initPosition">');
      randomCoordY =  randomCoord(roadPositionTop, roadHeight);
      $('#'+idCar).css({'top': randomCoordY + 'px' });
      rightToLeft('#'+idCar);
  }, 1000);
 
 
  window.setInterval(function() {
      //IMPORTANT!!! Déclration des DIV et CLASS!!
      $.each($('.initPosition'), function() {
        if (collision($blackCar, $(this))) {
          alert("Game Over");
        }
      });
    }, 200);
 
});

les fonctions

Code:

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
39
40
41
42
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"}, 4000, function(){
        $(id).remove();
  });
}
 
//JavaScript collision.
 function collision($div1, $div2) {
   var x1 = $div1.offset().left;
   var y1 = $div1.offset().top;
   var h1 = $div1.outerHeight(true);
   var w1 = $div1.outerWidth(true);
   var b1 = y1 + h1;
   var r1 = x1 + w1;
   var x2 = $div2.offset().left;
   var y2 = $div2.offset().top;
   var h2 = $div2.outerHeight(true);
   var w2 = $div2.outerWidth(true);
   var b2 = y2 + h2;
   var r2 = x2 + w2;
 
   if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
   return true;
 }