Le jeu du Serpent.

Version imprimable

Le jeu du Serpent.

Bonjour,

A 13:33, le rectangle rouge (du serpent) ne s'affiche pas sur mon PC.

Un rectangle rouge commençant à (5 px, 3 px) long de 3 px devrait s'afficher.
Chrome indique comme erreur ceci uniquement : var x = position[0] * blockSize;.

Voici le code source complet :

Code:

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 canvasWidth = 900;
    var canvasHeight = 600;
    var blockSize = 30;
    var ctx;
    var delay = 100; //fonction qui créée du temps (0.1 secondes).
    var snakee;
 
    init();//j'exécute ma fonction 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]);//le body c'est [6,4],[5,4],[4,4].
        refreshCanvas();
 
    }
 
    function refreshCanvas()//On dessine un serpent et non plus des rectangles.
    {
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);//On veux effacer le contenu.
        snakee.draw();
        setTimeout(refreshCanvas, delay);//On veut éxécuter la fonction refreshCanvas. Le delay c'est 0.1 sec.
    }
 
    function drawBlock(ctx, position)
    {
        var x = position[0] * blockSize;
        var y = position[1] * blockSize;
        ctx.fillRect(x, y, blockSize, blockSize);
    }
 
    function Snake(body)//notre serpent a un corps qui sera 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();
        };
    }
}

Chrome indique :

Citation:

Cannot read properties of undefined (reading '0').

Pouvez-vous m'aider s'il vous plaît ?

Merci d'avance,

Bien cordialement,

Adrien TEREYGEOL

28/07/2022, 21h54
mathieu

déjà ligne 46, vous avez une erreur minuscule qui change beaucoup de chose, c'est le ";" à la fin de la ligne.
ensuite il y a une autre erreur que vous pourrez rapidement trouver en débuguant cette variable "position" qui est dans le message d'erreur.
28/07/2022, 23h14
a.tereygeol

Le jeu du Serpent (suite)

Bonsoir,

Merci, j'ai corrigé l'erreur mais je débute seulement dans le JavaScript (j'en suis seulement à mes tous premiers cours) et je suis encore bloqué avec la fameuse erreur position. J'ai encore besoin de votre aide s'il vous plaît.

Merci d'avance,

Bien cordialement,

Adrien TEREYGEOL
28/07/2022, 23h27
mathieu

ce genre de débugage en javascript et dans beaucoup d'autre langue se fait en affichant le contenu de la variable qui pose problème.
et si elle ne contient pas la bonne valeur, vous remontez le code pour voir d'où ça vient, et tout en remontant vous affichez le contenu des variables pour voir si elles contiennent les valeurs prévues.

et en javascript, le plus pratique est d'utiliser la console pour voir le contenu des variables :
https://developer.mozilla.org/fr/docs/Web/API/Console