Discussion :

[oxymore11]

Salut !

Je débute en javascript, j'ai voulu me lancer dans la programmation d'un jeu Pacman. Jusque maintenant, son développement se passait bien, sans problème majeur.

Puis j'ai ajouté les déplacements du personnage, et je me suis rendu compte que sa vitesse de déplacement se ralentissait au fur et à mesure. J’ai passé beaucoup de temps à essayer de comprendre pourquoi sans jamais réussir.

J’ai finalement rajouté un compteur de fps (prit sur internet), et j’ai découvert que les fps de mon programme était décroissant. C’est-à-dire que lorsque je lançe le jeu, les fps passe de 60 à 50 en quelque secondes, puis à 40 et ainsi de suite jusqu’à être en dessous de 10 (et ce quelques soit le navigateur/ordinateur sur lequel le jeu est lancé)

Cela fait un moment que je suis bloqué sans aucune solution. Je sollicite donc votre aide. Je précise que le jeu n’est qu’au début de son développement et qu’il ne faut pas me tenir rigueur pour une utilisation maladroite de la POO, je suis débutant.

Le code faisant 700 lignes, ici le lien du dossier du jeu (avec le code un minimum commenté) : https://www.mediafire.com/file/6k0j5...acman.rar/file

Voici quand même la partie principale du code :

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
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
//canvas
let canvas = document.getElementById('c1');
let ctx = canvas.getContext('2d');
window.onload = create;
 
// images
var img0 = new Image();
img0.isLoad = false;
img0.onload = function () {
    this.isLoad = true;
}
img0.src = 'sprite.png';
 
// objet case
var Case = [];
function CaseCreation(a, b, c){
  this.posX = a;
  this.posY = b;
    this.id = c; // 0 = vide | 1 = point
 
    Case.push(this);
};
 
allCreation();
 
// variables
var x = (window.innerWidth/2)-223;
    y = (window.innerHeight/2)-247;
    score = 0;
 
// -----------------------------------------------------------------------------
 
var pacman = {
    posX : 10,
    posY : 10,
 
    posXmax : 10,
    posYmax : 10,
 
    ori : 'gauche',
 
    px : 0,
    py : 0,
    lx : 0,
    ly : 0,
 
    time : Date.now() - 15,
    tick : 15,
 
    deplacement : function() {
 
      if (pacman.ori == 'gauche') {
          pacman.posX -= 16;
          if (testPos() == 0) { pacman.posX += 16; } else {
              pacman.posX += 16;
              pacman.posXmax -= 16;
          }
 
      }
 
      if (pacman.ori == 'droite') {
          pacman.posX += 16;
 
          if (testPos() == 0) { pacman.posX -= 16; } else {
              pacman.posX -= 16;
              pacman.posXmax += 16;
          }
      }
 
      if (pacman.ori == 'bas') {
        pacman.posY += 16;
        if (testPos() == 0) { pacman.posY -= 16; } else {
            pacman.posY -= 16;
            pacman.posYmax += 16;
        }
      }
 
      if (pacman.ori == 'haut') {
        pacman.posY -= 16;
 
        if (testPos() == 0) { pacman.posY += 16; } else {
            pacman.posY += 16;
            pacman.posYmax -= 16;
        }
      }
 
      if (pacman.posXmax > pacman.posX) { pacman.posX += 8 }
      if (pacman.posXmax < pacman.posX) { pacman.posX -= 8 }
      if (pacman.posYmax > pacman.posY) { pacman.posY += 8 }
      if (pacman.posYmax < pacman.posY) { pacman.posY -= 8 }
 
    }
}
 
function updatePacman() {
 
  if (pacman.ori == 'gauche') {
      pacman.px = 15;
      pacman.py = 13;
      pacman.lx = 25;
      pacman.ly = 27;
  }
 
  if (pacman.ori == 'droite') {
      pacman.px = 13;
      pacman.py = 53;
      pacman.lx = 25;
      pacman.ly = 27;
  }
 
  if (pacman.ori == 'haut') {
      pacman.px = 13;
      pacman.py = 95;
      pacman.lx = 27;
      pacman.ly = 25;
  }
 
  if (pacman.ori == 'bas') {
      pacman.px = 13;
      pacman.py = 133;
      pacman.lx = 27;
      pacman.ly = 25;
  }
 
  if (Date.now() - pacman.time > pacman.tick) {
      pacman.time = Date.now();
      pacman.deplacement();
  }
 
}
 
// -- clavier --
document.onkeydown = function(event) {
  // gauche
  if (event.keyCode == 37) {
      pacman.ori = 'gauche';
 
  }
 
  // droite
  if (event.keyCode == 39) {
      pacman.ori = 'droite';
  }
 
  // haut
  if (event.keyCode == 38) {
      pacman.ori = 'haut';
 
  }
 
  // bas
  if (event.keyCode == 40){
      pacman.ori = 'bas';
  }
 
}
 
function testPos() {
 
  var test = 0;
 
  for(var p=0; p < Case.length; p++){
 
    if (Case[p].posX == pacman.posX+12) {
      if (Case[p].posY == pacman.posY+12) {
          test = 1;
          Case[p].id = 0
      }
    }
 
  }
 
  return test;
 
}
// -----------------------------------------------------------------------------
 
function create(){
 
    updatef();
 
}
 
// -- fonction principale --
 
function updatef(){
 
    window.requestAnimationFrame(updatef);
 
    //fond
    ctx.fillStyle = 'rgb(0,0,0)';
    ctx.fillRect(0, 0, window.innerWidth,window.innerHeight);
 
  //map
    ctx.strokeStyle = 'rgb(33,33,255)';
    ctx.lineWidth = 2;
 
    exter();
    inter();
    forme();
    ctx.stroke();
 
    rectangle();
 
  //
 
  for(var p=0; p < Case.length; p++){
    if (Case[p].id === 1) {
          ctx.fillStyle = 'rgb(255,184,151)';
          ctx.fillRect(x+Case[p].posX, y+Case[p].posY, 4, 4);
    }
  }
 
  // pacman
  updatePacman();
 
    if (img0.isLoad) {
        ctx.drawImage(img0, pacman.px, pacman.py, pacman.lx, pacman.ly, x+pacman.posX, y+pacman.posY, pacman.lx, pacman.ly);
    }
 
}

[NoSmoking]

Bonjour,
tout d'abord je n'ai pas regardé ton code au lien indiqué, il est plus heureux de mettre, si possible, un lien vers une page en ligne.

Je ferais comme remarque, juste en regardant rapidement le code fourni :

dans la fonction updatef, en règle général on fait ce qu'il y a à faire avant de relancer la fonction

Code :

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

1
2
3
4
5
6
7
8
function updatef(){
    //fond
    ctx.fillStyle = 'rgb(0,0,0)';
    ctx.fillRect(0, 0, window.innerWidth,window.innerHeight);
 
    // ... la suite ...
    window.requestAnimationFrame(updatef);
}

je ne saisie pas trop le principe de fonctionnement de ta fonction updatePacman avec ce code

Code :

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

1
2
3
4
  if (Date.now() - pacman.time > pacman.tick) {
      pacman.time = Date.now();
      pacman.deplacement();
  }

mais bon je n'ai fait que survoler et un lien aiderait pour bien appréhender tout cela

[oxymore11]

Bonjour,
tout d'abord je n'ai pas regardé ton code au lien indiqué, il est plus heureux de mettre, si possible, un lien vers une page en ligne.

Le lien médiafire indiqué contient les images neccessaire au fonctionnement du jeu. Sur les pages en lignes, on ne peux pas supporté d'images.

Je ferais comme remarque, juste en regardant rapidement le code fourni :

dans la fonction updatef, en règle général on fait ce qu'il y a à faire avant de relancer la fonction

Code :

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

1
2
3
4
5
6
7
8
function updatef(){
    //fond
    ctx.fillStyle = 'rgb(0,0,0)';
    ctx.fillRect(0, 0, window.innerWidth,window.innerHeight);
 
    // ... la suite ...
    window.requestAnimationFrame(updatef);
}

Merci du conseil !! Malheuresement, ça n'a rien changer à la vitesse du programme.

je ne saisie pas trop le principe de fonctionnement de ta fonction updatePacman avec ce code

Code :

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

1
2
3
4
  if (Date.now() - pacman.time > pacman.tick) {
      pacman.time = Date.now();
      pacman.deplacement();
  }

Cela permet au pacman de se déplacer de 8 pixels toute les 15 millisecondes.

mais bon je n'ai fait que survoler et un lien aiderait pour bien appréhender tout cela

Quel type de lien ? le lien médiafire ne suffit pas ?

[melka one]

Code :

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

1
2
3
4
  if (Date.now() - pacman.time > pacman.tick) {
      pacman.time = Date.now();
      pacman.deplacement();
  }

a ce moment autant mettre un setTimeout tu controlera mieux le temp

[NoSmoking]

Quel type de lien ? le lien médiafire ne suffit pas ?

non j'entendais par lien une page en ligne que l'on puisse tester directement, peu sont les personnes qui ouvrent les liens vers des fichiers zippés, et moi le premier.
J'ai fais une exception et j'ai regardé plus avant ton projet, il y a pas mal de choses à dire

•••
La première chose à dire est que tu en fais trop, je veux dire par là que tu redessines des choses qui sont statiques, ici je parle du « fond » et c'est lui visiblement qui te prend une grosse partie des ressources.

Une autre approche serait de mettre ton fond dans un <canvas> à part et de ne redessiner que ton pacman et tes dots.

En partant de la structure HTML suivante :

Code html :

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

1
2
3
4
<div id="cadre-canvas">
  <canvas id="canvas-pacman"  width=450 height=500></canvas>
  <canvas id="canvas-fond"    width=450 height=500></canvas>
</div>

on superpose les 2 <canvas> en mettant le « fond » par dessus, transparence oblige, et on applique le CSS suivant pour arriver à nos fins :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#cadre-canvas {
  position: relative;
  width: 450px;
  height: 500px;
  margin: auto;
  background-color: #000;
}
canvas {
  margin: auto;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

au passage tu observeras que les dimensions ont été revues très largement à la baisse par rapport à toi, il n'est souhaitable de déclarer que ce dont on a besoin donc exit

Code html :

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

<canvas id="c1" style="background-color: #EEE;" width="5000" height="5000"></canvas>

De plus lorsque tu fais un clear de la zone avec un

Code :

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

ctx.fillRect(0, 0, window.innerWidth,window.innerHeight);

outre l'incohérence des valeurs l'action est bien plus gourmande qu'un juste nécessaire

Code :

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

ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

Autre point à signaler, c'est que tes variables x et y peuvent être déclarées comme suit

Code :

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

1
2
3
4
// variables
var x = 0;//(window.innerWidth/2)-223;
    y = 0;//(window.innerHeight/2)-247;
    score = 0;

elle sont même limite inutiles !

•••
Passons à la partie drawFond qui devient une fonction à part entière que je te livre de façon un peu brute

Code :

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

1
2
3
4
5
6
7
8
9
10
function drawFond() {
  const ctx = document.getElementById("canvas-fond").getContext('2d');
  ctx.strokeStyle = "rgb(33,33,255)";
  ctx.lineWidth = 2;
  exter(ctx);
  inter(ctx);
  forme(ctx);
  rectangle(ctx);
  ctx.stroke();
}

elle regroupe toutes les fonctions de dessins d'éléments de fond, ce qui change c'est que l'on passe en paramètre le contexte d'affichage, il faut donc
modifier le prototype, la signature, de ces fonctions

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
function exter(ctx) {
  // ton code
}
function inter(ctx) {
  // ton code
}
function rectangle(ctx) {
  // ton code
}
function forme(ctx) {
  // ton code
}
function t(ctx, yy) {
  // ton code
}

•••
Quand utiliser cette fonction ?

En fait une seule fois à l'initialisation dans ta fonction create :

Code :

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

1
2
3
4
function create() {
  drawFond();
  updatef();
}

et uniquement là.

•••
Et ma fonction updatef alors ?

Elle se simplifie pour ne prendre ne compte que ce qui change, cela pourrait donner :

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
function updatef() {
  // nettoyage fond
  ctx.fillStyle = 'rgb(0,0,0)';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  // tracé des dots
  ctx.fillStyle = 'rgb(255,184,151)';
  const nbr = Case.length;
  let ind;
  for (ind = 0; ind < nbr; ind += 1) {
    if (Case[ind].id === 1) {
      ctx.fillRect(x + Case[ind].posX, y + Case[ind].posY, 4, 4);
    }
  }
  // position pacman
  updatePacman();
  // affichage pacman
  if (img0.isLoad) {
    ctx.drawImage(img0, pacman.px, pacman.py, pacman.lx, pacman.ly, x+pacman.posX, y+pacman.posY, pacman.lx, pacman.ly);
  }
  // relance action -> trop rapide à mon avis
  window.requestAnimationFrame(updatef);
}

Il y aurait également à dire sur ta fonction updatePacman, mais essaies déjà cela, on verra ensuite pour d'autres optimisations basiques à prendre en compte.

[oxymore11]

non j'entendais par lien une page en ligne que l'on puisse tester directement, peu sont les personnes qui ouvrent les liens vers des fichiers zippés, et moi le premier.
J'ai fais une exception et j'ai regardé plus avant ton projet, il y a pas mal de choses à dire

Wow merci mille fois, je n'en attendais pas tant !!

Avant ton message, j'ai fini par comprendre que la lenteur du code était en effet provoquée par la création du terrain (j'ai pu corriger tant bien que mal)

Tes conseils me sont précieux, notamment le code en CSS !! je ne connais rien à ce langage, il va m'être hyper utile, merci encore.

Juste une question par rapport à ce morceau de code :

Code :

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

1
2
3
4
5
 
function create() {
  drawFond();
  updatef();
}

Si je comprends bien, la création du « terrain » ne se fait qu’un seule fois au début au lieu de se faire en boucle inutilement ? Mais si c’est le cas, les sprites qui se déplace ne vont pas effacer leur position précédente non ?

Et ce commentaire :

Code :

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

1
2
3
 
  // relance action -> trop rapide à mon avis
  window.requestAnimationFrame(updatef);

Trop rapide, c’est-à-dire ? on peut ralentir la vitesse à laquelle s’exécute les frames ?

----

Je profite de ce message pour solliciter une nouvelle fois ton aide (plutôt que créer un nouveau post haha) : lorsque j’ai tenté de faire une suite d’addition avec un même chiffre à virgule, le résultat donné par le code était illogique. Par exemple quand on addition plusieurs fois d’affiler une variable avec 1.6, le résulté devient étrange.

Pour :

Code :

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

1
2
3
4
5
6
7
8
9
 
var x = 20;
console.log(x);
x += 1.6;
console.log(x);
x += 1.6;
console.log(x);
x += 1.6;
console.log(x);

Mon navigateur obtient ça :

Tu aurai une explication ou une solution à ce problème ?

[Sodium]

Sans avoir lu le code, les causes les plus fréquentes d'un problème de performances qui se dégradent sont des événements qui sont attachés plusieurs fois à des éléments ou des variables qui ne sont pas nettoyées une fois qu'elles ne servent plus.

[NoSmoking]

Pour répondre à ta dernière interrogation, il s'agit d'un problème lié à la représentation des nombres en virgule flottante, c'est liè à l'utilisation de la norme IEEE-754 et ce n'est pas seulement rencontré sous JavaScript.

Si je comprends bien, la création du « terrain » ne se fait qu’un seule fois au début au lieu de se faire en boucle inutilement ?

Il est effectivement totalement inutile de retracer quelque chose de statique et c'est pour cette raison que le mettre dans un <canvas> à part réduit le besoin en ressource.

Mais si c’est le cas, les sprites qui se déplace ne vont pas effacer leur position précédente non ?

si car on ne met pas à jour le même <canvas>, un pour le fond statique et un dynamique pour l'animation.

Pour continuer sur ce point, une amélioration pour cause de cohérence/logique est de mettre le <canvas id="canvas-fond"> en premier dans le code HTML

Code html :

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

1
2
3
4
<div id="cadre-canvas">
  <canvas id="canvas-fond"    width=450 height=500></canvas>
  <canvas id="canvas-pacman"  width=450 height=500></canvas>
</div>

dans ce cas il te faut modifier le façon d’effacer les données du <canvas> dans ta fonction updatef() :

Code :

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

1
2
3
4
5
  // nettoyage fond
//  ctx.fillStyle = 'rgb(0,0,0)';
//  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  // la suite

il est préférable d'utiliser clearRect() qui « vidange » les données et conserve un fond transparent contrairement à fillRect().

Trop rapide, c’est-à-dire ? on peut ralentir la vitesse à laquelle s’exécute les frames ?

La question qui se pose n'est pas de ralentir l'animation mais d'être en phase avec l'utilisateur, comme tu déplaces de 8 pixels ton pacman à chaque redraw il va être difficile de prendre les couloirs en appuyant sur une touche, il va falloir une bonne part d'anticipation.
Si tu calcules, 60fps * 8px = 480 px/s soit la largeur de ton <canvas>, il va falloir viser juste

Je mettrais quelque chose comme, en utilisant setTimeout qui est plus adapté ici :

Code :

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

1
2
// trop rapide window.requestAnimationFrame(updatef);
setTimeout(updatef, 100);

Le délai est surement à ajuster, ou même réglable pour ajouter une difficulté.

Ressources :

↪ CanvasRenderingContext2D.clearRect()
↪ Contrôle d'une animation