Discussion :

[axolotl_1]

J'utilise un Mac assez ancien de 2014 équipé sous Mojave
Je suis en train de me bagarrer depuis une semaine pour résoudre un bug dans mon programme qui a parfois un comportement aberrant.
Je crois que j'ai essayé pas mal de choses en plus en me faisant aider par chatGPT mais rien ne marche jusqu'à présent.
Est-il possible que ce soit une trop ancienne version de Safari (14.1.2) et qu'il y ait des bugs dans le Webkit et javascript de cette époque ?
Depuis le temps que je me dis qu'il faut que je m'équipe d'un matériel neuf, il faudra que je me décide
Certains d'entre vous ont-ils eu des problèmes analogues sur d'anciennes version de l'OS ?

[Chou-ette]

Quel bug ? Dans quel code ?

[axolotl_1]

C'est une animation pour enfant. J'ai 2 crocodiles de chaque côté de l'écran qui essaient d'attraper un singe au milieu: ils évoluent sur la ligne du bas tous les trois

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
document.addEventListener("DOMContentLoaded", function() {
 
  var singeElement = document.getElementById('singe');
  var singeRect = singeElement.getBoundingClientRect();
  var largeurSinge = singeRect.width;
  var abscisseSinge = singeRect.left; // Mise à jour de la variable abscisseSinge
 
  var crocodile1 = document.getElementById("crocodile1");
  var crocodile1Rect = crocodile1.getBoundingClientRect();
  var largeurCroco1 = crocodile1Rect.width;
  var abscisseCroco1 = crocodile1Rect.left; // Mise à jour de la variable abscisseCroco1
 
  var crocodile2 = document.getElementById("crocodile2");
  var crocodile2Rect = crocodile2.getBoundingClientRect();
  var largeurCroco2 = crocodile2Rect.width;
  var abscisseCroco2 = crocodile2Rect.right; // Mise à jour de la variable abscisseCroco2
});

Je pensais que du coup toutes les variables étant globales elles devaient se retrouver dans les fonctions appelées au-dessus: mais apparemment non
D'une fonction à l'autre sans rien toucher aux variables, les abscisses des crocos sautent d'une valeur à l'autre d'une façon que je comprends pas
Suis-je obligé de les re-déclarer dans chaque fonction qui les utilisent ?
Bon je débute hein ?

[melka one]

jour

du fait que les variables soient declaré dans une fonction pas sur quels soient global essai en ne mettant pas le mot var

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 singeElement = document.getElementById('singe');
 singeRect = singeElement.getBoundingClientRect();
 largeurSinge = singeRect.width;
 abscisseSinge = singeRect.left; // Mise à jour de la variable abscisseSinge

[axolotl_1]

Merci de ta réponse j'ai changé cela et je les ai déclarées en tête du script avec var devant mais ça ne change rien.
de toute façon j'ai choisi une mauvaise méthode : j'ai commencé à programmer la base de l'animation puis j'ai rajouté des trucs progressivement
Et maintenant je sais plus trop où j'en suis de mes variables

question à 100 francs : y a-t-il un compilateur javascript pour mac ou en ligne où on peut rentrer 1000 lignes de code sans problème ?
Avec des possibilités de debug, ce serait la cerise sur le gâteau

[axolotl_1]

Désolé je reviens au taquet
J'ai un bug incompréhensible
J'ai déclaré des variables globales en-tête du script ==> elles ne se voient pas dans les fonctions plus bas
Je suis obligé de les re-déclarer sous un autre nom dans 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
var singeElement = document.getElementById('singe');
  var singeRect = singeElement.getBoundingClientRect();
  var largeurSinge = singeRect.width;
  var abscisseSinge = singeRect.left; // Mise à jour de la variable abscisseSinge
 
  var crocodile1 = document.getElementById("crocodile1");
  var crocodile1Rect = crocodile1.getBoundingClientRect();
  var largeurCroco1 = crocodile1Rect.width;
  var abscisseCroco1 = crocodile1Rect.left; // Mise à jour de la variable abscisseCroco1
 
  var crocodile2 = document.getElementById("crocodile2");
  var crocodile2Rect = crocodile2.getBoundingClientRect();
  var largeurCroco2 = crocodile2Rect.width;
  var abscisseCroco2 = crocodile2Rect.right;

Déjà on dirait que les appels à la console perturbent complètement le fonctionnement du programme ce qui est anormal.
Je crois que je vais arrêter Javascript pour ces bugs fantômes et attendre d'acheter un Mac neuf pour voir si ça fait la même chose

P.S. En fait comme ce sont des images en mouvement il faut les re-déclarer en local dans chaque fonction et sous-fonction genre==>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var singeElement = document.getElementById('singe');
  var singeRect = singeElement.getBoundingClientRect();
  var largeurSinge = singeRect.width;
  var abscisseSinge = singeRect.left; // Mise à jour de la variable abscisseSinge
 
  var crocodile10 = document.getElementById("crocodile1");
  var crocodile10Rect = crocodile10.getBoundingClientRect();
  var largeurCroco10 = crocodile10Rect.width;
  var abscisseCroco10 = crocodile10Rect.left; // Mise à jour de la variable abscisseCroco1
 
  var crocodile20 = document.getElementById("crocodile2");
  var crocodile20Rect = crocodile20.getBoundingClientRect();
  var largeurCroco20 = crocodile20Rect.width;
  var abscisseCroco20 = crocodile20Rect.right;

... et là ça marche disons nettement mieux!
C'est pas ma conception auquel je suis habitué pour les variables globales mais là ça fonctionne beaucoup mieux

[melka one]

si tu initialise les variable avant le chargement de la page les élément que tu utilise n'existent pas encore les variables doivent êtres initialisé après le chargement de la page en passant par "onload"

[axolotl_1]

Bug encore plus incompréhensible voire carrément surréaliste, ligne 9

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  else if ( crocodile20.style.visibility === "visible") {
     result = false;
     console.log  ("(2) mafonction=> crocodile20.style.visibility === visible et crocodile10.style.visibility= ",crocodile10.style.visibility);
    console.log ("(3) dans maFonction=> juste avant le test de rencontre avec croco2 ==>result=", result,"abscisseSinge",
         abscisseSinge, "largeurSinge=", largeurSinge, "abscisseCroco20 + largeurCroco20 / 2= ", abscisseCroco20 + largeurCroco20 / 2 );
        // alert ("abscisseSinge=" + abscisseSinge + " abscisseCroco20 + largeurCroco20 / 2= " + (abscisseCroco20 + largeurCroco20 / 2));
         //, "abscisseCroco20 + largeurCroco20 / 2=",abscisseCroco20 + largeurCroco20 / 2);
 
      if (abscisseSinge <= abscisseCroco2 + largeurCroco2 / 2) { // ***************** cette ligne *********************
        result = true;
        console.log("(4) mafonction=>juste après le test positif de rencontre avec croco2 ==>result=", result,"abscisseSinge",
         abscisseSinge, "largeurSinge=", largeurSinge, "abscisseCroco20 + largeurCroco20 / 2= ", abscisseCroco20 + largeurCroco20 / 2 );
      }
      }

dans la console j'obtiens

[Log] (3) dans maFonction=> juste avant le test de rencontre avec croco2 ==>result= – false – "abscisseSinge" – 1518 – "largeurSinge=" – 100 – "abscisseCroco20 + largeurCroco20 / 2= " – 1364 (banane_tester.html, line 735)
[Log] (4) mafonction=>juste après le test positif de rencontre avec croco2 ==>result= – true – "abscisseSinge" – 1518 – "largeurSinge=" – 100 – "abscisseCroco20 + largeurCroco20 / 2= " – 1364 (banane_tester.html, line 742)

Le code se trouve dans maFonction() qui est appelée à chaque mouvement du singe provoqué par la souris

P.S. Je comprends pas du tout les histoires de portée des variables en Javascript, selon qu'elles soient locales ou globales.
Ça a l'air très différent de ce dont j'avais l'habitude jusqu'à présent.

[NoSmoking]

Bonjour,
tout d'abord il me paraît utile de préciser que le bug est très souvent entre la chaise et le clavier

Quoiqu'il arrive avec ce que tu montres comme code, on ne voit pas ta fonction, comment elle est appelée et les paramètres passés, il va nous être difficile de t'aider plus !

P.S. Je comprends pas du tout les histoires de portée des variables en Javascript, selon qu'elles soient locales ou globales.

Il te faut donc lire un minimum la documentation pour t'en faire une idée plus précise car hormis certains cas tordu le principe reste simple :

• Déclarer une variable
• Variable scope, closure
• ...

[axolotl_1]

voilà la totalité de la fonction qui vérifie s'il y a une rencontre entre un des crocos et le singe dont le mouvement est actionné par la souris==>

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
//Vérification de la rencontre crocodile 1 ou 2 et singe
function maFonction() {
  //var result = false;
 
  // Obtenir l'abscisse de crocodile1 et 2, ainsi que celle du singe
  var singeElement = document.getElementById('singe');
  var singeRect = singeElement.getBoundingClientRect();
  var largeurSinge = singeRect.width;
  var abscisseSinge = singeRect.left; // Mise à jour de la variable abscisseSinge*/
 
  var crocodile100 = document.getElementById("crocodile1");
  var crocodile100Rect = crocodile100.getBoundingClientRect();
  var largeurCroco100 = crocodile100Rect.width;
  var abscisseCroco100 = crocodile100Rect.left + largeurCroco100 / 2 ; // Mise à jour de la variable abscisseCroco1
 
  var crocodile200 = document.getElementById("crocodile2");
  var crocodile200Rect = crocodile200.getBoundingClientRect();
  var largeurCroco200 = crocodile200Rect.width;
  var abscisseCroco200 = crocodile200Rect.left + largeurCroco200 / 2; // Mise à jour de la variable abscisseCroco2
 
  if (gameStarted) {
 
    var presenceCroco = (crocodile100.style.visibility === "visible" && crocodile200.style.visibility === "visible") || 
    (crocodile100.style.visibility === "hidden" && crocodile200.style.visibility === "hidden");
    // ...
 
    if (!presenceCroco && crocodile100.style.visibility === "visible") {
    console.log  ("(1) mafonction=> crocodile100.style.visibility === visible et crocodile200.style.visibility= ",crocodile200.style.visibility);
      result = false;
        console.log ("dans maFonction=> juste avant  le test positif de rencontre avec croco1 ==>result=", result," abscisseSinge", 
        abscisseSinge, "largeurSinge=", largeurSinge, "abscisseCroco100 = ", abscisseCroco100  );
 
      if (abscisseSinge >= abscisseCroco100  ) {
        result = true;
        console.log("(a) mafonction=>juste après result=true,  le test positif de rencontre avec croco1 ==>result=", result," abscisseSinge", abscisseSinge, 
         "abscisseCroco100 = ", abscisseCroco100 );
      }
    } else if ( crocodile200.style.visibility === "visible") {
     result = false;
     console.log  ("(2) mafonction=> crocodile200.style.visibility === visible et crocodile100.style.visibility= ",crocodile100.style.visibility);
    console.log ("(3) dans maFonction=> juste avant le test de rencontre avec croco2 ==>result=", result,"abscisseSinge",
         abscisseSinge, "abscisseCroco200 = ", abscisseCroco200  );
        // alert ("abscisseSinge=" + abscisseSinge + " abscisseCroco20 + largeurCroco20 / 2= " + (abscisseCroco20 + largeurCroco20 / 2));
         //, "abscisseCroco20 + largeurCroco20 / 2=",abscisseCroco20 + largeurCroco20 / 2);
 
      if (abscisseSinge <= abscisseCroco200 ) {
        result = true;
        console.log("(4) mafonction=>juste après le test positif de rencontre avec croco2 ==>result=", result,"abscisseSinge",
         abscisseSinge, "largeurSinge=", largeurSinge, "abscisseCroco200 = ", abscisseCroco200 );
      }
    }
  }
 
  if (crocodile2.style.visibility === "visible") {
 // console.log( "dans maFonction jusste avant le return=>abscisseCroco2=",abscisseCroco2 );
 
  }
  if (crocodile1.style.visibility === "visible") {
   // console.log( "dans maFonction juste avant le return=>abscisseCroco1=",abscisseCroco1 );
console.log ("(5) dans maFonction=> juste avant return result=",result)
  return result;
  }
}

Et voici la fonction qui l'appelle

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
45
46
47
48
49
50
51
52
53
 
function deplacerSinge(event) {
  var y = event.clientY;
 
  singe.style.top = y + "px";
 
 var singeElement = document.getElementById('singe');
  var singeRect = singeElement.getBoundingClientRect();
  var largeurSinge = singeRect.width;
  abscisseSinge = singeRect.left; // Mise à jour de la variable abscisseSinge
 
  var crocodile10 = document.getElementById("crocodile1");
  var crocodile10Rect = crocodile10.getBoundingClientRect();
  var largeurCroco10 = crocodile10Rect.width;
  abscisseCroco10 = crocodile10Rect.left - largeurCroco10 / 2; // Mise à jour de la variable abscisseCroco1
 
var crocodile20 = document.getElementById("crocodile2");
var crocodile20Rect = crocodile20.getBoundingClientRect();
var largeurCroco20 = crocodile20Rect.width;
var abscisseCroco20 = crocodile20Rect.left + largeurCroco20 / 2; // Mise à jour de la variable abscisseCroco2
 
 
 
 
if (!GameOver) {
 
// Création de l'intervalle et stockage de l'identifiant
//var intervalId = setInterval(maFonction, 1000); // Exécute maFonction toutes les 1 secondexf
// Annulation de l'intervalle en utilisant l'identifiant stocké dans intervalId
 
     if ( crocodile20.style.visibility === "visible") {
    console.log ("(1) dans deplacerSinge=> juste avant l'appel de maFonction abscisseSinge avec croco2 visible abscisseSinge=",
     abscisseSinge,  "abscisseCroco20  = ", abscisseCroco20  );
      }
      if(crocodile10.style.visibility === "visible") {
        console.log ("(1) dans deplacerSinge=> juste avant l'appel de maFonction avec croco2 visible abscisseSinge=",
     abscisseSinge,  "abscisseCroco10  = ", abscisseCroco10);
      }
         //result = false;
  var result = maFonction();
  if (result && !animationInProgress) {
  console.log ("(2f) ds deplacerSinge=> je passe juste avant displayAnimation et le test (result && !animationInProgress)");
    displayAnimation();
    animationInProgress = true; // Mettre à jour l'état de l'animation en cours
  //  clearInterval(intervalId);
 
  }
} else {
  document.removeEventListener('mousemove', deplacerSinge);
  document.removeEventListener("mousemove", maFonction);
}
 
}

Et voici le résultat que j'obtiens dans la console ==>

[Log] dans maFonction=> juste avant le test positif de rencontre avec croco1 ==>result= – false – " abscisseSinge" – 610 – "largeurSinge=" – 100 – "abscisseCroco100 - largeurCroco100 / 2)= " – 378 (banane_tester.html, line 724)
[Log] (a) mafonction=>juste après result=true, le test positif de rencontre avec croco1 ==>result= – true – " abscisseSinge" – 610 – "abscisseCroco100 - largeurCroco100 / 4)= " – 453.5 (banane_tester.html, line 729)
[Log] (5) dans maFonction=> juste avant return result= – true (banane_tester.html, line 760)
[Log] (1) dans deplacerSinge=> juste avant l'appel de maFonction avec croco2 visible abscisseSinge= – 611 – "abscisseCroco10 - largeurCroco10 / 4 = " – 755.5 (banane_tester.html, line 799)

La première rencontre se passe bien : les valeurs de abscisseCroco20 et abscisseCroco200 correspondent parfaitement.
Et là comme vous voyez, les valeurs à la rencontre suivante font que (abscisseCroco100 - largeurCroco100 / 4) et (abscisseCroco10 - largeurCroco10 / 4) à l'itération suivante diffèrent de beaucoup et bien que result = true l'animation ne se déclenche pas!!
Les 2 crocos ont la même largeur donc largeurCroco10 a la même valeur que largeurCroco100

Dans les 2 cas -première rencontre et suivante- result est true et une fois ça déclenche l'animation la fois suivante, pipeau!
Et je comprends pas du tout ce qui se passe, pourquoi parfois les abscisses diffèrent autant d'une fonction à l'autre (abscisseCroco100 et abscisseCroco10 par exemple) et pourquoi l'animation ne se déclenche pas ensuite alors que la première fois ça marche impec alors que result=true dans les 2 cas!
Merci de votre aide

[NoSmoking]

Cela va être difficile de répondre simplement tellement ton code est « mal foutu », excuse moi l'expression

Aller en vrac
• Le nom des fonctions doit refléter ce qu'elle font, cela aide à la compréhension donc autant appeler ta fonction maFonction, par exemple, testCollision.

• Il faut mettre en « cache » les variables que tu utilises sans arrêt, cela veut dire que tu l'affectes une bonne fois pour toute et tu la réutilises dans tes fonctions.
Par exemple tu pourrais écrire en début de ton script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
// déclaration variable « globale »
const elemSinge = document.getElementById("singe");
const elemCroco_1 = document.getElementById("crocodile1");
const elemCroco_2 = document.getElementById("crocodile2");

...et dans les fonctions utiliser directement celles-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
// récup. dimensions éléments
const rectSinge = elemSinge.getBoundingClientRect();
const rectCroco_1 = elemCroco_1.getBoundingClientRect();
const rectCroco_2 = elemCroco_2.getBoundingClientRect();

• Au passage, une mise en garde.
Dans tes tests tu te sers de la propriété à visibility qui est un fausse amie et qui vaudra visible si cette propriété est mise via le JavaScript et non via le CSS.
Il est préférable dans ces cas d'utiliser/tester la propriété display.

• Concernant le test de collision, il est préférable de créer une fonction qui va tester si il y a collision ou pas entre deux rectangles que tu utiliseras pour tes différent tests, je te propose :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function isCollisionRect(rect1, rect2) {
  if ((rect2.x >= rect1.x + rect1.width) ||
    (rect2.x + rect2.width <= rect1.x) ||
    (rect2.y >= rect1.y + rect1.height) ||
    (rect2.y + rect2.height <= rect1.y))
    return false;
  else
    return true;
}

... c'est une façon de l'écrire, tu la retrouvera en lisant Théorie des collisions : Formes 2D simples, tu pourras également trouver la forme avec les && en lisant Détection de collisions en 2D.

Pour l'appel il te suffira de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// pas de collision à priori
let result = false;
 
if("visible" == elemSinge.style.visibility && "visible" == elemCroco_1.style.visibility){
  result |= isCollisionRect(rectSinge, rectCroco_1);
}
if("visible" == elemSinge.style.visibility && "visible" == elemCroco_2.style.visibility){
  result |= isCollisionRect(rectSinge, rectCroco_2);
}
if("visible" == elemCroco_1.style.visibility && "visible" == elemCroco_2.style.visibility){
  result |= isCollisionRect(rectCroco_1, rectCroco_2);
}
 
console.log(result);

... j'ai respecté ton choix du test sur visibility.

Une petite explication s'impose quand à l'écriture result |=.

Il faut savoir que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
false | false => 0
false | true  => 1
true  | true  => 1
true  | false => 1

donc dès que tu auras une collision détecté result vaudra 1 dans le cas contraire il vaudra 0, à toi d’exploiter le résultat en fonction de ton besoin, après je n'ai pas tout compris ce que tu cherches à faire en multipliant les tests.

Voilà pour un début

[axolotl_1]

Oui je sais qu'il est mal foutu et il faut le réécrire entièrement.
par exemple je connaissais pas result |=...
c'est mon premier programme en Javascript et j'ai implémenté de nouvelles fonctions au fur et à mesure que les idées me venaient: "tiens je pourrais faire cela ... ou cela. Comment faire pour que ça s'insère dans mon programme ?"
En me disant qu'est-ce qui pourrait être attractif et ludique pour un gamin de 10 ans et lui donner envie de rejouer par exemple ?
c'est une très mauvaise méthode je reconnais en tout cas merci de t'être plongé dedans
Et de m'avoir expliqué comment il fallait faire au niveau de la programmation.
Il me manque les bases en fait et Javascript & CSS pour les Nuls est trop rudimentaire. Difficile de trouver de bons bouquins d'informatique finalement...
Et on vous dit: "tiens pour les animations y'a pas mieux que les Sprite" et on part dans tous les développements que connaît ce langage en finissant par s'égarer un peu.

maintenant que j'ai les idées plus claires sur le but du programme, et des notions meilleures sur Javascript ça pourra être mieux... peut-être.

P.S. J'ai un bouquin de 1000 pages qui s'appelle Bible Javascript et édité aux USA. Le temps de le lire et j'aurais mon jeu fin prêt haha