Amélioration, Optimisation du programme

**ia.jenny** · 02/12/2019, 18h39

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

**melka one** · 02/12/2019, 22h18

jour

pour ca il faut utiliser addeventlistener

**ia.jenny** · 03/12/2019, 22h12

si tu avais regardé le code, j'utilise déjà addEventListener.
ça ne m'aide pas du tout!!!

**psychadelic** · 03/12/2019, 22h59

faut utiliser un Promise.all => https://developer.mozilla.org/fr/doc...ux/Promise/all

le code correspondant

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
 
Promise
.all([ loadImage(images.menu), loadImage(images.map) ])   
.then(function() 
  {
  if (images.menu.status==='OK' && images.map.status==='OK') // les 2 images sont bien chargées
    {
// les 2 images sont bien chargées
    }
  });

j'ai du créer une structure pour correspondre :

Code Javascript :

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

1
2
3
const images= { menu: { img:null , path:'images/Menu.png', status:'none' }
              , map : { img:null , path:'images/a6.png'  , status:'none' }
              }

avec la fonction loadImage appelée par le Promise.all

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
const loadImage = ref => new Promise(function (resolve)
  {
  ref.img = new Image();
 
  ref.img.onload  =_=>{ ref.status='OK';  resolve() };
  ref.img.onerror =_=>{ ref.status='bad'; resolve() };
 
  ref.img.src = ref.path;
  });

Sinon, j'ai un peu été perdu dans ton code, et il me semble que la gestion des déplacements pars de travers quand on veux déplacer hors zone.

Du coup j' tout réécrit à ma sauce:

Code HTML :

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>truc</title>
  <style>
    #my-canvas { border: 2px solid black; }
    #my-canvas.RED { border-color: red; }
  </style>
</head>
<body>
 
  <canvas id="my-canvas" width="1200" height="900"></canvas>
 
  <script>
    const iMap = { A: 0, B: 100, C: 200, D: 300, E: 400, F: 500 }
        , aMap= [ 'ABCDEFAABCDEFAABCDEFBFEDCB'
                , 'BAAAAAAAAAAAAAAAAAAAAAAAAC'
                , 'CABBEEEEAACCAABBAAAAAAAAAD'
                , 'DABBEEEEAACCAABBAAAAAAAAAE'
                , 'EAAAEEEEBBDDDDDDEEEEAAAAAF'
                , 'FAAAEEEEBBDDDDDDEEEEAAAAAA'
                , 'AAAAAAAAAADDDDDDEEEEBBAAAA'
                , 'AAAAAAAAAADDDDDDEEEEBBAAAA'
                , 'AACCAAAAEEEEAADDAAAAAAAAAA'
                , 'AACCAAAAEEEEAADDAAAAAAAAAA'
                , 'DDDDBBAAEEEECCAAAAAAAABBAA'
                , 'DDDDBBAAEEEECCAAAAAAAABBAA'
                , 'DDDDDDAAAAAAAAAAAACCAAAACC'
                , 'DDDDDDAAAAAAAAAAAACCAAAACC'
                , 'AABBEEEEAABBAAAAAAAAAAAAAA'
                , 'AABBEEEEAABBAAAAAAAAAAAAAA'
                , 'CCAAEEEEDDDDEEEEDDDDAABBAA'
                , 'CCAAEEEEDDDDEEEEDDDDAABBAA'
                , 'AAAAAAAADDAAEEEEDDDDEEEEAA'
                , 'AAAAAAAADDAAEEEEDDDDEEEEAA'
                , 'AAAAAACCDDAAAAAADDDDEEEEAA'
                , 'FAAAAACCDDAAAAAADDDDEEEEAA'
                , 'EAAABBAABBAAAAAAAAAAAAAAAA'
                , 'DAAABBAABBABBBBAAAAAAAAAAA'
                , 'CBAAAAAAAAABAABAAABBCCAAAA'
                , 'BCDEFAAAAAABAABAAABBCCAAAA'
                ]
        , images= { menu: { img:null , path:'images/Menu.png', status:'none' }
                  , map : { img:null , path:'images/a6.png'  , status:'none' }
                  }
        , pos     = { top:0, left:0 }
        , maxTop  = aMap.length -9
        , maxLeft = aMap[0].length -9
 
        , movKey  = { ArrowUp    : _=>{ let r=(pos.top  > 0);        if (r) pos.top--;  return r }
                    , ArrowLeft  : _=>{ let r=(pos.left > 0);        if (r) pos.left--; return r }
                    , ArrowDown  : _=>{ let r=(pos.top  < maxTop );  if (r) pos.top++;  return r }
                    , ArrowRight : _=>{ let r=(pos.left < maxLeft ); if (r) pos.left++; return r }
                    }
        ;   
 
    const loadImage = ref => new Promise(function (resolve)
      {
      ref.img = new Image();
 
      ref.img.onload  =_=>{ ref.status='OK';  resolve() };
      ref.img.onerror =_=>{ ref.status='bad'; resolve() };
 
      ref.img.src = ref.path;
      });
 
    const myCanvas = document.getElementById('my-canvas')
        , myCanvas2d = myCanvas.getContext('2d')
 
    function dessine()
      {
      let eTop = pos.top;
      for(let hTop=0; hTop<900; hTop+=100)
        {
        let eLeft = pos.left;
        for(let wLeft=300; wLeft<1200; wLeft+=100)
          {
          myCanvas2d.drawImage(images.map.img, iMap[aMap[eTop].charAt(eLeft)], 0, 100, 100, wLeft, hTop, 100, 100)
          eLeft++
          }
        eTop++
        }
      }
 
    Promise
    .all([ loadImage(images.menu), loadImage(images.map) ])   
    .then(function() 
      {
      if (images.menu.status==='OK' && images.map.status==='OK') // les 2 images sont bien chargées
        {
        myCanvas2d.drawImage(images.menu.img, 0, 0, 300, 960)
        dessine()
        document.onkeydown=e=>
          {
          if ( movKey[e.code] )  // si ce code existe
            {
            if (movKey[e.code]() ) // cherche à réaliser le déplacement
              {
              dessine()
              }
            else // le déplacement est hors limites
              {
              myCanvas.classList.add('RED')
              setTimeout(_=>{  myCanvas.classList.remove('RED') }, 700);
              }
            }
          }
        }
      });
    </script>
</body>
</html>

**ia.jenny** · 04/12/2019, 17h48

merci. Il faut que j'étudie tout ça.
je ne comprends pas tout
sinon fonctionne très bien

**psychadelic** · 04/12/2019, 17h52

comme le titre de ton post est
Amélioration, Optimisation du programme

J'ai fait une deuxième version "Objet" (avec un peu plus de commentaires

Code HTML :

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Game XYZ</title>
  <style>
    html { background-color: darkslategrey; }
    #my-canvas { border: 3px solid grey; }
    #my-canvas.RED { border-color: yellow; }
  </style>
</head>
<body>
 
  <canvas id="my-canvas" width="1200" height="900"></canvas>
 
<script> // le script est placé ici en fin de <body> => pas besoin d'utiliser : window.onload = function() 
'use strict'; // indispensable quand on débute en JS
 
const Game= // tous les élements utiles à la gestion de la map sont regroupés ici en un seul Objet statique
  { canvas2d  : null
  , imgMenu   : null
  , imgMap    : null
  , tiles     : { A: 0, B: 100, C: 200, D: 300, E: 400, F: 500 }
  , map       : [ 'ABCDEFAABCDEFAABCDEFBFEDCB', 'BAAAAAAAAAAAAAAAAAAAAAAAAC', 'CABBEEEEAACCAABBAAAAAAAAAD'
                , 'DABBEEEEAACCAABBAAAAAAAAAE', 'EAAAEEEEBBDDDDDDEEEEAAAAAF', 'FAAAEEEEBBDDDDDDEEEEAAAAAA'
                , 'AAAAAAAAAADDDDDDEEEEBBAAAA', 'AAAAAAAAAADDDDDDEEEEBBAAAA', 'AACCAAAAEEEEAADDAAAAAAAAAA'
                , 'AACCAAAAEEEEAADDAAAAAAAAAA', 'DDDDBBAAEEEECCAAAAAAAABBAA', 'DDDDBBAAEEEECCAAAAAAAABBAA'
                , 'DDDDDDAAAAAAAAAAAACCAAAACC', 'DDDDDDAAAAAAAAAAAACCAAAACC', 'AABBEEEEAABBAAAAAAAAAAAAAA'
                , 'AABBEEEEAABBAAAAAAAAAAAAAA', 'CCAAEEEEDDDDEEEEDDDDAABBAA', 'CCAAEEEEDDDDEEEEDDDDAABBAA'
                , 'AAAAAAAADDAAEEEEDDDDEEEEAA', 'AAAAAAAADDAAEEEEDDDDEEEEAA', 'AAAAAACCDDAAAAAADDDDEEEEAA'
                , 'FAAAAACCDDAAAAAADDDDEEEEAA', 'EAAABBAABBAAAAAAAAAAAAAAAA', 'DAAABBAABBABBBBAAAAAAAAAAA'
                , 'CBAAAAAAAAABAABAAABBCCAAAA', 'BCDEFAAAAAABAABAAABBCCAAAA'
                ]
  , pos       : { top:0, left:0 }
  , drawMenu()
    { this.canvas2d.drawImage(this.imgMenu, 0, 0, 300, 960) }
  , drawMap()   
    {
    let eTop = this.pos.top;
    for(let hTop=0; hTop<900; hTop+=100)
      {
      let eLeft = this.pos.left;
      for(let wLeft=300; wLeft<1200; wLeft+=100)
        {
        this.canvas2d.drawImage( this.imgMap
                               , this.tiles[this.map[eTop].charAt(eLeft)], 0, 100, 100
                               , wLeft, hTop, 100, 100)
        eLeft++
        }
      eTop++
      }
    }
  , movMap(evt)
    {
    const maxTop  = this.map.length -9
        , maxLeft = this.map[0].length -9
        , movKey  = { ArrowUp    : _=>{ let r=(this.pos.top  > 0);        if (r) this.pos.top--;  return r }
                    , ArrowLeft  : _=>{ let r=(this.pos.left > 0);        if (r) this.pos.left--; return r }
                    , ArrowDown  : _=>{ let r=(this.pos.top  < maxTop );  if (r) this.pos.top++;  return r }
                    , ArrowRight : _=>{ let r=(this.pos.left < maxLeft ); if (r) this.pos.left++; return r }
                    }
    let r = true;               // return value for good
    if ( movKey[evt.code] )     // si ce code de déplacement est géré 
      {
      evt.preventDefault();     // desactive la gestion d'evenement par défaut 
      r = (movKey[evt.code]() ) // cherche à calculer le déplacement
      if (r)
        { this.drawMap() }    // redesine la Map, car il y a un chgmnt de position
      }
    return r 
    }
  };
 
// éléments d'interface
const myCanvas = document.getElementById('my-canvas')
    , images   = { menu: { img:null , path:'images/Menu.png', status:'none' }
                 , map : { img:null , path:'images/a6.png'  , status:'none' }
                 }
    ;
 
// métode asynchrone pour charger chaque image
const loadImage = ref => new Promise(function (resolve)
  {
  ref.img = new Image();
 
  ref.img.onload  =_=>{ ref.status='OK';  resolve() };
  ref.img.onerror =_=>{ ref.status='bad'; resolve() };
 
  ref.img.src = ref.path;
  });
 
// Chargement des images puis mise en place du code si succes
Promise
.all([ loadImage(images.menu), loadImage(images.map) ])   
.then(function() 
  {
  if (images.menu.status==='OK'
  && images.map.status==='OK')
    {                                              // les 2 images sont bien chargées
 
    // initialisation de l'objet Game...
    Game.canvas2d = myCanvas.getContext('2d') 
    Game.imgMenu  = images.menu.img
    Game.imgMap   = images.map.img
 
    // premiers tracés...
    Game.drawMenu()
    Game.drawMap()
 
    // gestion du déplacement de la map 
    document.onkeydown=e=>    
      {
      if (!Game.movMap(e))                   // gestion du mouvement, retour = fals si hors champs
        {                                                          // petit truc en plus pour indiquer
        myCanvas.classList.add('RED')                              //  que le déplacement est impossible
        setTimeout(_=>{  myCanvas.classList.remove('RED') }, 800); // effacement apres 800 milisecondes
        }
      }
    }
  });
</script>
</body>
</html>

**NoSmoking** · 05/12/2019, 09h53

Bonjour,

Envoyé par ia.jenny

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)

dans ton cas je ne vois pas la nécessité de gérer le chargement de ton image de fond de menu lorsqu'une simple utilisation du CSS semble suffisante !

Code css :

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

1
2
3
4
5
6
7
8
canvas {
  background-image:url( images/Menu.png);
  background-repeat: no-repeat;
  background-size: contain;
  /* ou
  background-size: 300px 100%;
  */
}

ton code en sera largement allégé.

Lorsque l'on affecte un événement clavier sur le document pour la gestion des touches de direction il faut penser à annuler le comportement par défaut

Code :

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

1
2
3
4
document.addEventListener("keydown", (e) => {
  e.preventDefault();
  // la suite du code
}, false);

Pas regardé plus avant le code.

**psychadelic** · 05/12/2019, 16h05

Envoyé par NoSmoking

Lorsque l'on affecte un événement clavier sur le document pour la gestion des touches de direction il faut penser à annuler le comportement par défaut

Code :

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

1
2
3
4
document.addEventListener("keydown", (e) => {
  e.preventDefault();
  // la suite du code
}, false);

ah oui, j'ai négligé ce point => j'ai ajouté le code lié à cet oubli dans le post correspondant

Amélioration, Optimisation du programme

JavaScript

Vue hybride

Discussions similaires

Partager

Partager