Bonjour,
Je programme une map avec les touches de directions.
voici ce que ça donne :
http://xenom.flash.free.fr/MaMap1/MaMap.html
http://xenom.flash.free.fr/MaMap1/MaMap1.zip

Avant de trop avancer dans mon projet, je souhaiterais améliorer, optimiser le programme.
j'ai un problème de chargement avec imagesMap.onload = function(), car il faudrait ajouter aussi imagesMenu.onload = function() . je ne sais pas comment faire pour imbriquer 2 onload (voir plus)

je pense qu'il faudrait une class pour la gestion du clavier ou une fonction en dehors de window.onload = function()

je vous remercie pour le temps que vous me consacrez.

Code :

var aMap;
var dx=0;
var dy=0;
 
    aMap = ([
      [0, 1, 2, 3, 4, 5, 0, 0, 1, 2, 3, 4, 5, 0, 0, 1, 2, 3, 4, 5, 1, 5, 4, 3, 2, 1],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2],
      [2, 0, 1, 1, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3],
      [3, 0, 1, 1, 4, 4, 4, 4, 0, 0, 2, 2, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4],
      [4, 0, 0, 0, 4, 4, 4, 4, 1, 1, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0, 0, 0, 0, 5],
      [5, 0, 0, 0, 4, 4, 4, 4, 1, 1, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 1, 1, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 1, 1, 0, 0, 0, 0],
      [0, 0, 2, 2, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 2, 2, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [3, 3, 3, 3, 1, 1, 0, 0, 4, 4, 4, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
      [3, 3, 3, 3, 1, 1, 0, 0, 4, 4, 4, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
      [3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 2, 2],
      [3, 3, 3, 3, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 2, 2],
      [0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 1, 1, 4, 4, 4, 4, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [2, 2, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 0, 0, 1, 1, 0, 0],
      [2, 2, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 0, 0, 1, 1, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 4, 4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0],
      [0, 0, 0, 0, 0, 0, 2, 2, 3, 3, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0],
      [5, 0, 0, 0, 0, 0, 2, 2, 3, 3, 0, 0, 0, 0, 0, 0, 3, 3, 3, 3, 4, 4, 4, 4, 0, 0],
      [4, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [3, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 2, 2, 0, 0, 0, 0],
      [1, 2, 3, 4, 5, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 2, 2, 0, 0, 0, 0]
    ]);
 
// --------------------------------------------------------------------------
	window.onload = function() 
	{
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
 
		canvas.width  = 1200;
		canvas.height = 900;
 
		imagesMenu = new Image();
		imagesMenu.src = "images/Menu.png";
 
		imagesMap = new Image();
		imagesMap.src = "images/a6.png";
 
		 Init1(ctx,dx,dy);
// ---------------
	 document.addEventListener("keydown", keyDownTextField, false);
	function keyDownTextField(e)	
	 {  
	 	var keyCode = e.keyCode;  
	 		if(keyCode==39)   { dx++; Draw(ctx,dx,dy);}
	 	else if(keyCode==37)   { dx--; Draw(ctx,dx,dy);}
	 		 if(keyCode==40)   { dy++; Draw(ctx,dx,dy);}
	 	else if(keyCode==38)   { dy--; Draw(ctx,dx,dy);}
 
	 	if(dx<=1) dx=1;  else if(dx>=16) dx=16; 
	 	if(dy<=1) dy=1;  else if(dy>=16) dy=16;
	 };
// ---------------
	};
// --------------------------------------------------------------------------
		function Draw(ctx, dx0, dy0)
		{
			ctx.drawImage(imagesMenu, 0, 0,300, 960);
	  		for(var tileY=0; tileY<9; tileY++) 
	  		{
				for(var tileX=0; tileX<9; tileX++) 
				{
					var m=aMap[tileY + dy0][tileX + dx0];
					drawTile(ctx,m, 300+tileX*100,tileY*100,0);
				}
			}
		};
// --------------------------------------------------------------------------
		function Init1(ctx, dx0, dy0)
		{
		    imagesMap.onload = function()
		    {
			Draw(ctx,dx0,dy0);
			};
		};
// --------------------------------------------------------------------------
		function drawTile(ctx,numero, xDestination, yDestination, Ang)
		{
			ctx.drawImage(imagesMap,numero*100, 0,100,100,xDestination,yDestination,100,100); 
		};
// --------------------------------------------------------------------------

-
Edité par swo 3 décembre 2019 à 18:28:41

Salut,

Voilà ce que je te propose :

//
//   Tout d'abord
//

class pImage extends Image { // Tu crées une classe  fille de Image nommée "pImage" (ou ce qu'il te plais...)
    
    constructor(...args) { // Tu définis son constructeur
        const i = super(...args); // Tu appelles le constructeur parent (celui de l'object Image) et tu stock le résultat dans "i"
        i.promise = new Promise(function(resolve) { // Tu ajoute à une propriété "promise" de "i" une nouvelle promesse
            i.onload = function() {
                resolve(); // Tu résout la promesse quand l'image est chargée
            }
        });
        return i; // Tu retournes ton image
    }
    
}

//
//   Tu crées tes "pImage" et tu appelles Init1
//

imagesMenu = new pImage();
imagesMenu.src = "images/Menu.png";

imagesMap = new pImage();
imagesMap.src = "images/a6.png";

Init1(ctx,dx,dy);

//
//   Tu modifie Init1 de cette façon
//

function Init1(ctx, dx0, dy0)
{
   Promise.all([imagesMenu.promise, imagesMap.promise]).then(function() // Tu attends que les deux promesses soit remplies avant de poursuivre ton code
   {
      Draw(ctx,dx0,dy0);
   });
};

Dit moi si ça répond à ta question...

-
Edité par BrainError 4 décembre 2019 à 10:57:35

Salut,

Quand tu crées une classe, tu en crées une instance avec "New", ex :

New pImage()

En créant cette instance, un appel automatique à la méthode "constructor" est réalisé (avec éventuellement des arguments) si cette méthode existe. Définir cette méthode te permet donc de mettre en place des données de manière générique à chaque fois que tu crées une instance de la classe qui la possède...

Quand tu étend une classe déjà existante (comme la classe Image) tu utilises le mot clé "extends" après le nom de ta class (pImage) et tu défini le nom de la class à étendre (Image).

Par la suite, en utilisant "super" dans la méthode constructor de ta nouvelle class, ça te permet d'obtenir une instance de la class parente (Image) que tu va pouvoir modifier à ta convenance pour qu'elle convienne à ce que tu souhaites en faire.

Concrètement, ce qu'il y a dans la proposition que je t'ai faite, c'est une déclaration de la class pImage comme une sous-class fille de Image que tu utilisait dans ton précédent code, de sorte à obtenir des objets pImage qui possède toutes les méthodes et propriétés des objets Image ET une propriété promise supplémentaires qui contient une promesse qui sera rempli quand l'image sera chargé...

Ça te permet par la suite de tiré partie de la méthode statique Promise.all qui permet de vérifier que toutes les promesses contenues dans un array passé en paramètre de celle-ci, soit remplie avant de poursuivre le code avec "then". Autrement dit, tu attends que toutes les images soit chargé avant d'exécuter la fonction inclus dans "then".

J'espère avoir été assez clair :×...

merci pour les explications