Erreur lors de la lecture d'un tableau 2D

**Programir** · 29/12/2021, 18h08

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 :

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

**Archimède** · 29/12/2021, 20h46

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

**Programir** · 30/12/2021, 01h43

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 :

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

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 :

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

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

**NoSmoking** · 30/12/2021, 08h59

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 :

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

**Programir** · 30/12/2021, 13h10

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.

**Programir** · 03/01/2022, 00h48

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 :

ligne 0 : etoile...........etoile...etoile.............................etoile..............etoile.
ligne 1 : .......etoile............etoile......................etoile.......etoile.........etoile.
ligne 2 : .......etoile.......etoile..etoile.......etoile........................................etoile.
etc..

**NoSmoking** · 03/01/2022, 18h02

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

Code :

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

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

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 :

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

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.

**Programir** · 03/01/2022, 20h39

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

**Programir** · 03/01/2022, 23h43

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 :

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

**NoSmoking** · 04/01/2022, 14h06

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 :

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

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

Regarde les commentaires dans le code :

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