Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Amélioration, Optimisation du programme


Sujet :

JavaScript

  1. #1
    Membre régulier Avatar de ia.jenny
    Profil pro
    Inscrit en
    août 2007
    Messages
    110
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : août 2007
    Messages : 110
    Points : 71
    Points
    71
    Par défaut Amélioration, Optimisation du programme
    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); 
    		};
    // --------------------------------------------------------------------------
    Fichiers attachés Fichiers attachés

  2. #2
    Membre éprouvé
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    531
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 531
    Points : 1 048
    Points
    1 048
    Par défaut
    jour

    pour ca il faut utiliser addeventlistener
    Plus vite encore plus vite toujours plus vite.

  3. #3
    Membre régulier Avatar de ia.jenny
    Profil pro
    Inscrit en
    août 2007
    Messages
    110
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : août 2007
    Messages : 110
    Points : 71
    Points
    71
    Par défaut
    si tu avais regardé le code, j'utilise déjà addEventListener.
    ça ne m'aide pas du tout!!!

  4. #4
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 411
    Points : 4 657
    Points
    4 657
    Par défaut
    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>
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  5. #5
    Membre régulier Avatar de ia.jenny
    Profil pro
    Inscrit en
    août 2007
    Messages
    110
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : août 2007
    Messages : 110
    Points : 71
    Points
    71
    Par défaut

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

  6. #6
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 411
    Points : 4 657
    Points
    4 657
    Par défaut
    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>
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  7. #7
    Membre régulier Avatar de ia.jenny
    Profil pro
    Inscrit en
    août 2007
    Messages
    110
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : août 2007
    Messages : 110
    Points : 71
    Points
    71
    Par défaut
    je te remercie énormément, ton code me plait beaucoup
    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

  8. #8
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 411
    Points : 4 657
    Points
    4 657
    Par défaut
    Citation Envoyé par ia.jenny Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    " " => espace vide
    "o" => pour un mur
    "p" => passage secret...etc
    ce qui donne en représentation :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 951
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 951
    Points : 34 254
    Points
    34 254
    Par défaut
    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 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.

  10. #10
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    2 411
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 2 411
    Points : 4 657
    Points
    4 657
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    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
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Optimiser un programme VB
    Par Eausport dans le forum VB 6 et antérieur
    Réponses: 7
    Dernier message: 05/06/2009, 16h56
  2. [Macro] optimisation de programmes SAS
    Par bar_79 dans le forum Macro
    Réponses: 4
    Dernier message: 25/11/2008, 16h51
  3. Optimiser des programmes .net
    Par TSalm dans le forum Général Dotnet
    Réponses: 4
    Dernier message: 06/03/2008, 13h19
  4. Optimiser un programme java
    Par piteon dans le forum Général Java
    Réponses: 27
    Dernier message: 05/08/2007, 21h01
  5. Réponses: 9
    Dernier message: 07/11/2006, 15h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo