Amélioration, Optimisation du programme

Version imprimable

1 pièce(s) jointe(s)

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:

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

02/12/2019, 22h18
melka one

jour

pour ca il faut utiliser addeventlistener
03/12/2019, 22h12
ia.jenny

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

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

le code correspondant

Code:

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:

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:

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:

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>

04/12/2019, 17h48
ia.jenny

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

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:

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>

04/12/2019, 19h11
ia.jenny

je te remercie énormément, ton code me plait beaucoup :P
je vais analyser tout ça tranquillement, ce week end. Merci

il y a moyen de garder les chiffres dans la Map au lieux des lettres.
j'aurai peut être besoin de plus de 26 images. Je ne sais pas encore, il faut mieux prévoir d'avance.

je vais essayer de le faire, quand j'aurais compris le code. sinon, je ferais avec.
merci mille fois
+1
04/12/2019, 22h36
psychadelic
Citation:

Envoyé par ia.jenny

il y a moyen de garder les chiffres dans la Map au lieux des lettres ?
j'aurai peut être besoin de plus de 26 images. Je ne sais pas encore, il faut mieux prévoir d'avance.

Oui, on peut le faire, et réaménager le code en utilisant un array à 2 dimensions (comme avant) est bien sur faisable.

Mais perso, je m’en garderai bien.

Dans mon code les lettres A,B,C… renvoient chacune à un offset de l’image des différentes sprites du l’élément "map".

Ici c’est juste un offset horizontal parce que tes sprites sont tous alignés horizontalement. Si ceux-ci étaient présents sur plusieurs lignes, alors il serait nécessaire d’ajouter un offset vertical et l’objet de référence s’en retrouverait de la sorte
Code:

1 2 3 4 5 tiles : { A: { offset_h: 0, offset_v: 0 } , B: { offset_h: 0, offset_v: 100 } , C: { offset_h: 100, offset_v: 0 } /… / }
et si les sprites sont de dimensions différentes, on peut aussi ajouter ces valeurs :
x: { offset_h: 100, offset_v: 125, dim_h: 100, dim_v: 150 }

De plus avoir les offsets à part permet de corriger le tir si, pour x raisons, on déplace les images sur la sprite sans avoir à changer les valeurs sur la "map",

l’autre idée d’avoir un tableau de string, c’est que l’on peut choisir les lettres en fonctions de ce que l’on veut représenter.

ici j'ai pris les lettres A,B, C, D, E, mais tu devrais les changer pour celles qui te sembleront les meilleures :
par exemple pour un labyrinthe:
Code:

1 2 3 " " => espace vide "o" => pour un mur "p" => passage secret...etc
ce qui donne en représentation :
Code:

1 2 3 4 5 6 7 map : [ 'o oooooooooooo' , 'o o o' , 'ooooo o oooo o' , 'o o o o' , 'o ooooo o oooo' , 'o o o' , 'ooooooooooo oo'
Ce qui laisse pas mal de choix;
il y a même la possibilité d’utiliser les caractères semi-graphiques...

Avec plus d'un million de codes utf-8, je pense que cela te laisse de la marge.

Sinon pour ce code je n'ai utilisé qu objet statique qui m'a paru plus simple pour ce cas, mais il y a d'autres manières de le coder possibles peut être mieux adaptées si ton code doit s'étoffer.
05/12/2019, 09h53
NoSmoking
Bonjour,

Citation:

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:

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:

1 2 3 4 document.addEventListener("keydown", (e) => { e.preventDefault(); // la suite du code }, false);
Pas regardé plus avant le code.
05/12/2019, 16h05
psychadelic
Citation:
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:

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