<canvas> ne s'affiche pas

**Diegomarck** · 05/04/2020, 20h14

Bonjour,
J'ai un code que je n'arrive pas à faire marcher . Le code html est :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
      <title>Jeu du serpent</title>
      <h1>hello</h1>
      <script src="script4.js"></script>
  </head>
 
  <body>
 
  </body>
 
</html>

et le javascript :

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
window.onload = function()
{
    var cancasWidth = 900;
    var canvasHeigth = 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]]);
      refreshCanvas();
    }
 
    function refreshCanvas()
    {
        ctx.clearRect(0,0,canvasWidth, canvasHeight);
        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)
    {
        this.body = body;
        this.draw = function()
        {
          ctx.save();
          ctx.fillStyle = "#ff0000";
          for (var i = 0; i < this.body.length; i++)
          {
              drawBlock(ctx, this.body[i]);
          }
          ctx.restore();
        };
 
    }
 
}

Est-ce que ça marche pour vous? Je viens de vérifier toutes les lignes 3 fois et je n'arrive pas à déboguer la situation. Je n'ai qu'une page avec hello qui s'affiche et nommé jeu du serpent. Normalement selon la démo, je devrais avoir un cadre noir et un serpent sous la forme de trois carrés rouge les uns à côtés des autres.
Merci d'avance de vos réponses.
Diego

**Beginner.** · 05/04/2020, 22h09

Salut,

C'est dû à une erreur de nom de variable :
tu as écris :

Code JavaScript :

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

1
2
var cancasWidth = 900;
var canvasHeigth = 600;

Puis :

Code JavaScript :

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

1
2
canvas.width = canvasWidth;
canvas.height = canvasHeight;

**melka one** · 06/04/2020, 18h29

c'est fou la grande fréquence de confusion de l'erreur entre length height comme quoi il faut pas grand chose pour tout faire bugger.

**Diegomarck** · 07/04/2020, 10h09

Merci, c'est réglé

<canvas> ne s'affiche pas

JavaScript

Discussions similaires

Partager

Partager