Erreur lors de la lecture d'un tableau 2D

Version imprimable

Salut, quelqu'un saurait d'où vient l'erreur javascript :

TypeError: Cannot read properties of undefined (reading '0')
Là il indique la valeur 0 dans l'erreur, parce qu'il y a Let lig=0 dans mon code, car quand je remplace par let lig=1 l'erreur indique 1.

Il indique la ligne 28

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
function setSpace(stars){
 
	var sx=0; sy=0; var index=0;
	stars.src="img/stars/stars.png";
	stars.onload=function(){
		for(let lig=0; lig<=100; lig++){
			espace[lig]=new Array();
			for(let col=0; col<=4; col++){
				var index=Math.floor(Math.random()*4);
				var rwidth=Math.floor(Math.random()*24);
				var rheight=rwidth;
				var dx=Math.floor(Math.random()*1000);
				var dy=Math.floor(Math.random()*700);
				sx=index*32;
				etoile=new Etoiles(sx,sy,dx,dy,rwidth,rheight);
				espace[lig][col]=etoile;
			}		
 
		}
	}
}
 
function getSpace(ligne){
 
	var sx=0; sy=0; var index=0;
	for(let lig=0; lig<=100; lig++){
		for(let col=0; col<=4; col++){
			etoile.sx=espace[lig][col].sx; //<<<<<<<<<<<<  Erreur dans cette ligne. >>>>>>>>>>>>>>>
			etoile.sy=espace[lig][col].sy;
			etoile.dx=espace[lig][col].dx;
			etoile.dy=espace[lig][col].dy;
			etoile.w=espace[lig][col].w;
			etoile.h=espace[lig][col].h;
			ctx1.drawImage(stars,etoile.sx,etoile.sy,32,32,etoile.dx,ligne+etoile.dy,etoile.w,etoile.h);
		}
	}
}

J'ai vérifié avec la console et le tableau espace contient bien les valeurs que j’attends, ce sont des entiers.
J'ai aussi vérifié le contenu de l'objet étoile et c'est la même chose.

29/12/2021, 20h46
Archimède

Salut, à mon avis (sans avoir davantage de code), c'est au niveau de la construction de ta class Etoiles où il y a sans doute un problème.
https://developer.mozilla.org/fr/doc...perators/class
30/12/2021, 01h43
Programir
Merci je vais regarder ça ;)

Pourtant le log de etoile me montre qu'elle contient les bonnes valeurs, des entiers.

je m'étais inspiré d'une classe perso que j'ai déjà et qui fonctionne bien.

f
Code:

1 2 3 4 5 6 7 8 function Etoiles(sx,sy,dx,dy,w,h){ this.sx=sx; this.sy=sy; this.dx=dx; this.dy=dy; this.w=w; this.h=h; }
etoile=new Etoiles(sx, etc....);

EDIT :

J'ai utilisé la classe selon l'article que tu m'as montré, mais j'ai toujours la même erreur et au même endroit.
Code:

1 2 3 4 5 6 7 8 9 10 11 const Etoiles = class { constructor(sx,sy,dx,dy,w,h) { this.sx=sx; this.sy=sy; this.dx=dx; this.dy=dy; this.w=w; this.h=h; } }

Bonjour,
si l'on présuppose que tes variables sont bien déclarées, il faudrait connaître l'ordre des appels de tes fonctions.

Ta fonction getSpace ne devrait être appelée qu'une fois la fonction setSpace exécutée ou en fin de celle-ci.

Typiquement c'est dans ton animation que tu devrais faire appel à celle-ci, si j'ai bien compris ce que tu veux faire.

Remarque au passage :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 for (let col = 0; col <= 4; col++) { /** * tout ce qui suit est inutile *--------------------------- etoile.sx = espace[lig][col].sx; //<<<<<<<<<<<< Erreur dans cette ligne. >>>>>>>>>>>>>>> etoile.sy = espace[lig][col].sy; etoile.dx = espace[lig][col].dx; etoile.dy = espace[lig][col].dy; etoile.w = espace[lig][col].w; etoile.h = espace[lig][col].h; /*--*/ // autant faire une affectation directe etoile = espace[lig][col]; ctx1.drawImage(stars, etoile.sx, etoile.sy, 32, 32, etoile.dx, ligne + etoile.dy, etoile.w, etoile.h); }

30/12/2021, 13h10
Programir

Re ;)

Oui en effet je lance getSpace aprés avoir lancé setSpace, je lance setSpace à l'initialisation de la page javascript, apres le chargement du html.
Puis dans la boucle de jeu je lance la lecture getSpace.

Je faisais le détaillement des propriètés de étoile pour être sûr qu'elle se charge des bonnes valeurs, mais ta simplification est meilleure c'est sûr, je vais faire ça, merci ;)

Je cherche toujours à trouver d'où vient cette erreur de lecture du tableau c'est bizarre puisque tout paraît juste.
03/01/2022, 00h48
Programir

D'après mes tests, ça l'air d'être le tableau "espace" qui a un problème à la lecture.

C'est un tableau déclaré avant ces fonctions et qui a 100 lignes de 5 colonnes, et chaque case contient un objet "etoile".
l'objet "etoile" est juste un objet contenant 6 entiers (5 créés au hasard et un qui doit rester à 0).

l'objet est bon on dirait et c'est la lecture du tableau qui pose problème, je vois pas pourquoi.

ce tableau doit me servir à afficher une rangée de 5 étoiles, et cela sur 100 lignes de l'écran, les cinq étoiles sont disposées au hasard sur la largeur de l'écran et leur taille w et h varie aussi selon le hasard.

Un peu dans ce genre :

Citation:

ligne 0 : etoile...........etoile...etoile.............................etoile..............etoile.
ligne 1 : .......etoile............etoile......................etoile.......etoile.........etoile.
ligne 2 : .......etoile.......etoile..etoile.......etoile........................................etoile.
etc..
03/01/2022, 18h02
NoSmoking

Déjà tu as 101 lignes et pas 100 à cause de

Code:

for (let lig = 0; lig <= 100; lig++)

Citation:

ce tableau doit me servir à afficher une rangée de 5 étoiles, et cela sur 100 lignes de l'écran, les cinq étoiles sont disposées au hasard sur la largeur de l'écran et leur taille w et h varie aussi selon le hasard.

J'ai du mal à visualiser le truc attendu que tu utilises la méthode context.drawImage avec des données qui semblent ne pas être utile

Code:

ctx1.drawImage(stars, etoile.sx, etoile.sy, 32, 32, etoile.dx, ligne + etoile.dy, etoile.w, etoile.h);

que vient faire ligne par exemple ici ?

Pour pouvoir t'aider efficacement il nous faudrait l’entièreté du code qui est mis en oeuvre.
03/01/2022, 20h39
Programir

Merci NoSmoking ;)

Oui tu as raison sur les remarques que tu as fais, y a des choses que je dois revoir là, mais je pense savoir maintenant d'où vient le problème grace à tes remarques, je vais mettre en résolu, merci beaucoup ;)

Ligne est une variable qui me permet de décaler d'une ligne vers le bas l'affichage des étoiles et donc de pouvoir scroller mon tableau d'étoiles sur l'écran, car j'avais pas trouvé d'autre moyen de scroller un canvas.
merci encore ;)

RE ;)

Je croyais avoir compris mais non je résous pas le problème, donc je mets un code plus simple qui me fait la même erreur de lecture, finalement l’erreur ne venait pas de getSpace() mais de setSpace() :

Voir ligne 16 / 26
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 var espace=new Array(); stars=new Image(); function setSpace(stars){ var taillemax=48; var sx=0; sy=0; var index=0; stars.src="img/stars/stars.png"; stars.onload=function(){ for(let lig=0; lig<=99; lig++){ espace[lig]=new Array(); for(let col=0; col<=4; col++){ espace[lig][col]=55; console.log(espace[lig][col]); // <<<<< Console donne erreur de lecture de la valeur. } } return espace; } } setSpace(); // <<<<<<<
Bien sûr j'ai mis 55 dans le code, pour tester le code ;)

Tu as toujours des erreurs dans ton code mais celle que tu nous dis !

Tu as comme paramètre starts dans ta fonction setSpace, mais lors de l'appel à la fonction tu ne passes pas de paramètre d'où starts vaut undefined et donc tu ne peux pas affecter de src à undefined.

Cela devrait planter sur cette ligne :

Code:

stars.src="img/stars/stars.png";

Regarde les commentaires dans le code :

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
var espace = new Array();
/////////////////////////////////////////////////////////////
// manque un var ou mieux un const pour déclarer ta variable
/////////////////////////////////////////////////////////////
stars = new Image();    
function setSpace(stars) {
  var taillemax = 48;
  var sx = 0;
  sy = 0;
  var index = 0;
  stars.src = "img/stars/stars.png";
  //////////////////////////////////////  
  // la fonction onload est asynchrone ...
  //////////////////////////////////////  
  stars.onload = function() {
    for (let lig = 0; lig <= 99; lig++) {
      espace[lig] = new Array();
      for (let col = 0; col <= 4; col++) {
        espace[lig][col] = 55;
        console.log(espace[lig][col]);
      }
      //////////////////////////////////////
      // c'est ICI que espace est initialisé
      //////////////////////////////////////      
    }
    //////////////////////////////////////    
    // ton return retourne dans le vide
    //////////////////////////////////////
    return espace;
  }
}
/////////////////////////////////
// faire un appel avec paramètre
/////////////////////////////////
setSpace(stars);

Plus de rigueur devrait aider ;)

07/01/2022, 14h47
Programir

Merci beaucoup nosmoking ;)

Je vois les erreurs là, alors que sur mon code je les voyais pas, lol
je vais corriger tout ça ;)
Je pense que c'est résolu grace à vous tous, merci ;)