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