Jeux du serpent - JS

**Viiic34** · 03/01/2024, 21h13

Bonjour à tous,

Je débute dans le développement et j'ai un exercice d'application consistant à créer le "jeux du serpent", ce qui as l'air d'être un exercice assez commun à ce que j'ai vu ^^

Je bug au moment de pouvoir faire bouger mon serpent avec mes flèches mais même en réécrivant totalement le code et en le vérifiant une bonne dizaine de fois je ne vois pas mon erreur...

Est-ce qu'une âme charitable pourrait m'éclairer ?

Voici mon code html

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
<!DOCTYPE html>
  <html>
    <head>
      <title>Jeu du Serpent</title>
      <script src="script.js"></script>
 
 
    </head>
 
    <body>
 
 
 
    </body>
 
 
  </html>

Et mon code JS

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
window.onload = function()
{
  var canvasWidth = 900;
  var canvasHeight = 600;
  var blockSize = 30;
  var ctx;
  var delay = 100;
  var snakee;
 
  init();
 
  function init()
  {
    var canvas = document.createElement ('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    canvas.style.border = "1px solid"
    document.body.appendChild(canvas);
    ctx = canvas.getContext ('2d');
    snakee = new Snake([[6,4],[5,4],[4,4]], "right");
    refreshCanvas();
  }
 
  function refreshCanvas()
  {
    ctx.clearRect(0,0,canvasWidth,canvasHeight);
    snakee.advance();
    snakee.draw();
    setTimeout(refreshCanvas,delay);
  }
 
  function drawBlock(ctx, position)
  {
    var x = position[0] * blockSize;
    var y = position[1] * blockSize;
    ctx.fillRect(x ,y , blockSize, blockSize);
  }
  function Snake(body, direction)
 
  {
    this.body = body;
    this.direction = direction;
    this.draw = function()
    {
      ctx.save();
      ctx.fillStyle = "#ff0000";
      for(var i = 0; i < this.body.length; i++)
      {
          drawBlock(ctx, this.body[i]);
      }
      ctx.restore();
 
    };
    this.advance= function()
    {
        var nextPosition = this.body[0].slice();
        switch(this.direction)
        {
          case "left":
            nextPosition[0] -= 1;
            break;
          case "right":
            nextPosition[0] += 1;
            break;
          case "down":
            nextPosition[1] += 1;
            break;
          case "up":
            nextPosition[1] -= 1;
            break;
          default:
            throw("Invalid Direction");
        }
        this.body.unshift(nextPosition);
        this.body.pop();
    };
    this.setDirection = function(newDirection)
    {
      var allowedDirections;
      switch(this.direction)
 
      {
        case "left":
        case "right":
          allowedDirections = ["up","down"];
          break;
        case "down":
        case "up":
          allowedDirections = ["left","right"];
          break;
        default:
          throw("Invalid Direction");
      }
      if(allowedDirections.indexOf(newDirection) > -1)
      {
        this.direction = newDirection;
      }
    };
  }
}
 
document.onkeydown = function handleKeyDown(e) // Détecte une touche du clavier enfoncée
{ // crochet de document.onkeydown
  var key = e.keyCode; // nous renvoie le code de la touche employé
  var newDirection;
  switch (key) 
  { // cochet du switch 03
    case 37:
      newDirection = "left"; // touche de flèche de gauche du clavier
      break;
    case 38:
      newDirection = "up"; // touche flèche de haut du clavier
      break;
    case 39:
      newDirection = "right"; // touche flèche de droite du clavier
      break;
    case 40:
      newDirection = "down"; // touche flèche de bas du clavier
      break;
    case 32:
      restart();
      return;
    default:
      return; 
  }
  snakee.setDirection(newDirection);}

**unanonyme** · 03/01/2024, 21h50

Bonjour,

Pensez à ouvrir la console pour pouvoir lire les messages de l'environnement d'exécution,
en n'oubliant pas de jouer un peu avec votre jeu pour déclencher l'erreur.

Clique droit -> inspecter.

Je n'ose pas douter que suite à cela vous trouverez le problème sans difficulté,
mais si d'aventure je me trompes, répéter la demande.

Bonne journée.

**Viiic34** · 04/01/2024, 10h02

Bonjour,

Merci pour votre réponse !

En effet je ne l'ai pas dit dans mon premier message mais j'ai vérifier via la console d'où venait mon erreur puisque en bougeant les flèches le snake devrait bouger ce qui n'est pas le cas.

Voici le message d'erreur qui apparait :

Uncaught ReferenceError: snake is not defined at HTMLDocument.handleKeyDown (script.js:126:3)

Et même avec ce message, après avoir tout vérifié je ne comprend pas ...

**unanonyme** · 04/01/2024, 10h23

Bonjour,

ça m'interroge, pour être tout à fait honnête.

Vous n'avez pas déclaré la fonction handleKeyDown dans la bonne portée.

Cette fonction est déclarée dans la portée globale, toutes vos autres fonctions
sont déclarées dans la portée de la fonction d'écoute de l'évènement onload.

https://developer.mozilla.org/fr/doc...y/Global_scope

Dit autrement, vous avez une accolade mal placée.

Si je puis me permettre un conseil,
faites un effort pour mieux indenter votre code.

L'indentation est un atout, pas une contrainte.

https://developer.mozilla.org/fr/doc...xpanded_syntax

Bonne journée.

**Viiic34** · 04/01/2024, 11h00

Mais oui en effet c'était ça !!!!

J'avais fermé mon windows.onload avant d'avoir tout écrit ! Evidemment ça pouvait pas marché ^^

En tout cas merci beaucoup pour votre réponse !!

**unanonyme** · 04/01/2024, 11h24

Avec un peu de rigueur, votre jeu sera super,
et vous atteindrez votre objectif rapidement et sans difficultés.

Notez que vous pourriez tout regrouper sous un seul fichier HTML, et une seule balise script.

fichier index.html

Code :

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

1
2
3
<script>
// votre code ....
</script>

Le moteur de rendu s'occupera tout seul,
comme un grand,
d'installer les balises html et body.

Jeux du serpent - JS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager