Discussion :

[ia.jenny]

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

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 :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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); 
		};
// --------------------------------------------------------------------------