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

**kevin254kl** · 27/02/2018, 18h54

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.

**headmax** · 27/02/2018, 22h16

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

**kevin254kl** · 27/02/2018, 23h05

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 :

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
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 :

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
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;
 }

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager