Discussion :

[RichardGodard]

Bonjour,

merci par avance pour votre aide. Je ne suis pas au bord du suicide mais pas loin...

Je crois que tout est dit dans le titre, ou presque :

Comme je ne vois vraiment pas d'où peut venir le problème, je ne sais pas par quoi commencer pour avoir une chance de vous éclairer...

Il s'agit d'une animation pédagogique pour comprendre la distance de freinage :

Vous choisissez votre vitesse, la météo, et vous estimez la distance nécessaire au freinage du véhicule. Quand vous êtes prêts vous cliquez sur freiner et le simulateur vous montre votre résultat, et la bonne réponse...

En local, pas de souci : ça fait ce que je veux, et sur tous les navigateurs. Quand je le mets en ligne, rien ne va plus... l'animation commence un peu à se charger (1 ou 2 secondes pas plus).

J'ai hébergé mon travail sur github, web000 et un blog Blogger. Ils plantent tous : blogger est le pire, c'est totalement figé...

Je croyais que javascript c'était le client qui bossait.... je ne comprends donc pas pourquoi ça plante (et différemment qui plus est...) sur 3 hébergeurs différents.

J'ai sans doute rien compris à ce langage c'est très étrange... j'ai donc un fort besoin d'être éclairé : j'ai sûrement raté une évidence.

Je vous mettrais bien un bout de code, mais 1200 lignes, c'est assez imbuvable, et je n'ai strictement aucune idée d'où vient le problème : Visual machin ne me signale aucune ligne en rouge, et mon code ne plante pas... chez moi du moins, donc j'ai du mal à analyser le problème. Même internet explorer fonctionne bien avec ce code...

J'ai vérifié les noms des fichiers son/image, leur casse, les / et la présence de tout le monde. C'est ok. Au niveau logique, c'est ok... alambiqué sans doute, mais pas absurde : ça fonctionne du début à la fin, j'en conclus que ce n'est pas une absurdité... et je doute que les hébergeurs soient capables de juger du style de ma programmation, quant à me faire un procès pour mauvais style, j'en doute encore plus...

J'ai pensé au problème du chargement que je n'ai pas à la maison : j'ai rajouté window.onload : ça ne change rien... si, si je mets toutes mes fonctions dedans, j'ai la neige + la pluie + l'animation ... bref la totale, mais en local toujours : sur site, c'est exactement pareil... ni mieux, ni moins bien... je vous mets un petit lien vers cette catastrophe... il manque à peu près la moitié des images, mais quand on fait maj + relaod de la page, on voit que les images sont pas loin(elles apparaissent furtivement puis disparaissent), mais non, ça ne tient pas...
https://euroformation.000webhostapp.com/

Voili voilou... je garde mon pc ou je le balance par la fenêtre histoire de me soulager ? J'ai juste une envie de meurtre envers l'inventeur du javascript...

Merci infiniment de votre attention !

[mathieu]

regardez déjà dans la console de développement, il manque 3 images. ce n'est pas ça qui va bloquer mais ça aide pour le rendu.

et dans la suite de la console, il y a une erreur javascript au sujet d'une variable "flake".

[RichardGodard]

Merci beaucoup ! Je vais voir ça...

[mathieu]

dans votre code, il y a beaucoup d'endroits qui peuvent être factorisés ce que peut aider à mieux organiser votre code.

par exemple si vous stocker les vitesses dans un tableau comme cela :

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
let vitesses = {
	"v30" : {
		"valeur" : 30,
		"x" : 160,
		"y" : y / 4,
	},
	"v50" : {
		"valeur" : 50,
		"x" : 260,
		"y" : y / 4,
	},
	"v70" : {
		"valeur" : 70,
		"x" : 160,
		"y" : y / 4 + 105,
	},
	"v90" : {
		"valeur" : 90,
		"x" : 260,
		"y" : y / 4 + 105,
	},
	"v100" : {
		"valeur" : 100,
		"x" : 360,
		"y" : y / 4 + 105,
	},
};
 
 
// remplissage des informations de chaque vitesse
 
for (const id_vitesse in vitesses) {
 
	vitesses[id_vitesse]["son"] = new Audio(`son/${id_vitesse}.mp3`);
	vitesses[id_vitesse]["image_base"] = new Image(`images/${id_vitesse}.png`);
	vitesses[id_vitesse]["image_choisie"] = new Image(`images/${id_vitesse}_orange.png`);
	vitesses[id_vitesse]["image_compteur"] = new Image(`images/compteur_${id_vitesse}.png`);
 
	// calcul du coin opposé à l'origine de l'image
	vitesses[id_vitesse]["x2"] = vitesses[id_vitesse]["x"] + 90;
	vitesses[id_vitesse]["y2"] = vitesses[id_vitesse]["y"] + 90;
 
}

ensuite pour tester le clic sur une vitesse, il suffit de faire cela :

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
let clic_vitesse = false;
 
for (const id_vitesse in vitesses) {
 
 
	if (	(event.x > vitesses[id_vitesse]["x"])
		&&	(event.x < vitesses[id_vitesse]["x2"])
		&&	(event.y > vitesses[id_vitesse]["y"])
		&&	(event.y < vitesses[id_vitesse]["y2"])
	) {
 
		clic_vitesse = true;
		vitesse_actuelle = id_vitesse;
 
		break;
 
	}
 
}

et dans la fonction "dessin", la mise à jour de la vitesse sélectionnée ainsi que du son se fait comme cela :

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
 
if (vitesse_precedente !== vitesse_actuelle) {
 
	ctx.drawImage(
		  vitesses[vitesse_actuelle]["image_compteur"]
		, canvas.width / 2
		, y / 4
		, 280
		, 220
	);
 
 
	for (const id_vitesse in vitesses) {
 
		if (vitesse_actuelle === id_vitesse) { // si c'est la vitesse choisie actuellement
			image = vitesses[id_vitesse]["image_choisie"];
			vitesses[id_vitesse]["son"].play();
		} else {
			image = vitesses[id_vitesse]["image_base"];
			vitesses[id_vitesse]["son"].pause();
		}
 
		ctx.drawImage(
			  image
			, vitesses[id_vitesse]["x"]
			, vitesses[id_vitesse]["y"]
			, 90
			, 90
		);
 
	}
 
 
	vitesse_precedente = vitesse_actuelle;
 
}

ensuite le calcul de la position de la voiture peut certainement aussi se simplifier.
l'indice à garder en tête est qu'un copier-coller de code peut souvent être remplacé par une boucle.

[RichardGodard]

C'est une victoire sur la machine... grâce à vous !!!!

J'irais jusqu'à vous embrasser si vous étiez à côté !!!!

Voilà le problème : vous aviez bien vu pour les images, c'est à cause d'elles... vous pensiez que non, mais si ! Et, ce n'est pas faute de leur présence, et c'est là où réside un nouveau mystère pour moi, c'est que mes images ne plaisent pas au serveur... allez savoir pourquoi... car, elles ont toujours été là, et bien nommées. Mais, ces 3 là, il n'en veut pas, il ne les charge pas, refus catégorique erreur 400 et des brouettes... J'ai beau les renommer, les passer de png en jpg et l'inverse, rien à faire... bizarre, non ? Elles ne sont pas plus grosses que les autres... et elles ont toujours été dans le dossier des images : c'est le premier truc que j'avais vérifié : donc, dans ma tête, ce n'était plus ce problème, je cherchais autre chose... finalement, j'y suis revenu, et j'ai bien fait... je me disais que la console délirait, j'avais sous mes yeux les images, le dossier complet, elles s'affichaient, marchaient en local, je ne voyais vraiment pas comment elles pouvaient poser problème... et je ne le vois toujours pas d'ailleurs...

J'abandonne de comprendre, j'en ai pris d'autre et basta... vous avouerez franchement qu'il y a toujours des mystères en informatique... c'est juste sans fin en fait... le seul truc qu'on peut leur reprocher, c'est que je les avais faites moi-même sur paint3d : à mon avis c'est ça... pourquoi, j'en sais rien, mais c'est effectivement la seule différence que je vois avec les autres que j'ai juste retouchées. J'ai dû leur faire un truc que j'ignore moi-même, pourtant paint3d n'est pas à la retouche d'image, ce qu'on pourrait appeler le graal du graphiste...

En tout cas, ça fonctionne impeccable sans rien retoucher (j'ai juste changé les 3 images fautives). Je vais améliorer mon code comme vous me le disiez, je fais ça vraiment très mal, je reconnais, il y a même des bouts qui ne servent plus à rien et que je ne nettoie pas toujours... merci pour vos conseils éclairés, j'ai de la graine à prendre. Les boucles pour les copier-coller, oui j'avoue, mais bon paresse paresse...

Mille mercis ! C'est juste un soulagement !!!!

Je vous garde sous le coude, parce que des problèmes de ce genre, j'en ai à la pelle... je reviens très bientôt vers vous !

Par exemple, mais je vais faire un autre post, sur Blogger, il me met mon Canvas presque au milieu de la page... pourquoi ? D'ordinaire, je place mes objets où ça me plaît... mais là, le contexte du canvas, Blogger semble prendre la main... bizarre... J'ai déjà fait des formulaires, des questionnaires, des test de profils, et Blogger me servait de support sans me bloquer ma mise en page, là, un vrai mur : 1/3 au moins de la page de rogné, un peu comme si je commençais un article... il doit y avoir moyen de le faire plier, c'est sûr, mais évidemment, je ne trouve nulle part sur le net...

J'y reviendrais, en tout cas merci encore, vous êtes génial ! Je garde mon pc et je retrouve le moral !!