Problème simple en javascript qui pour m'aider ?

ça fait 30 min que je planche la

J'ai détecter le pb mais je n'arrive pas à comprendre, voici le code

window.onload = function() {



    var canvas;

    var canvasWidth = 900;

    var canvaHeight = 600;

    var blockSize = 30;

    var ctx;

    var delay = 1000;

    var snakee;



    init();



    function init() {



            canvas = document.createElement('canvas');

            canvas.width = canvasWidth;

            canvas.height = canvaHeight;

            canvas.style.border = "5px solid";

            document.body.appendChild(canvas);

            ctx = canvas.getContext('2d');

            ctx.fillStyle = "#ff0000";

            snakee = new snake([[6,4],[5,4],[4,4]]);

            snakee.draw();



        //     refreshCanvas();



        // function refreshCanvas(){



        //     ctx.clearRect(0,0,canvas.width,canvas.height);

        //     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){

            ctx.fillStyle = "#ff0000";

            for(var i = 0; i < this.body.lenght; i++) {

                    drawBlock(ctx, this.body[i]);

                }

            ctx.restore();

            };

        }

    }

}

En fait les méthode save() et restore() de ma variable ctx ne sont pas accessible lorsque j'instancie un Object de type snake

Me semblais pourtant que quand une variable était déclarer assigner dans une scope, elles restais accéssible dans les scope enfants

un exemple plus parlant, accessible dans la fonction init ou elle est affectéhttps://image.noelshack.com/fichiers/2022/01/5/1641592679-sans-titre.jpg

Pas accessible lors de l'instanciation du snakehttps://image.noelshack.com/fichiers/2022/01/5/1641592720-sans-titre2.jpg

A l'aide

Le 07 janvier 2022 à 22:58:43 :
un exemple plus parlant, accessible dans la fonction init ou elle est affectéhttps://image.noelshack.com/fichiers/2022/01/5/1641592679-sans-titre.jpg

Pas accessible lors de l'instanciation du snakehttps://image.noelshack.com/fichiers/2022/01/5/1641592720-sans-titre2.jpg

Enlève le paramètre ctx de ta fonction draw.

tente peut etre un this.restore = iRestore dans la dernière fonction
et appelle ctx.iRestore dans ta sous fonction

Tant que t'as pas assigné ctx, le language sait pas de quel type est ton objet ( vu que tu mets var ), donc l'auto complétion peut pas te proposer quelque chose

Le 07 janvier 2022 à 23:03:30 :

Le 07 janvier 2022 à 22:58:43 :
un exemple plus parlant, accessible dans la fonction init ou elle est affectéhttps://image.noelshack.com/fichiers/2022/01/5/1641592679-sans-titre.jpg

Pas accessible lors de l'instanciation du snakehttps://image.noelshack.com/fichiers/2022/01/5/1641592720-sans-titre2.jpg

Enlève le paramètre ctx de ta fonction draw.

Bien vue c'était pas dans le code du gars que je copie mais, j'ai toujours pas accès à ces deux méthodes

J'ai rien dit, j'ai mal lu les parenthèses, dans ce cas c'est sûrement ce qu'a dit le khey au dessus, comme t'as ctx en paramètre de draw, ça rend confus l'application par rapport à ton attribut ctx

Ce que tu dis est presque bon aussi vdd, l'éditeur reconnait directement le ctx du début du programme mais pas celui en paramètre de la fonction draw.

Le 07 janvier 2022 à 23:10:18 :
J'ai rien dit, j'ai mal lu les parenthèses, dans ce cas c'est sûrement ce qu'a dit le khey au dessus, comme t'as ctx en paramètre de draw, ça rend confus l'application par rapport à ton attribut ctx

Effectvement j'ai accès aux méthode en utilisant mais le gars que je suis le nomme directement ctx

Je connais pas la syntaxe JavaScript car je suis spé Java perso, mais this.draw = function(ctx){} ça correspond à quoi ?

C'est pour qu'un objet instancié par la fonction snake ait une méthode draw. C'est l'ancienne méthode, lorsque l'on avait pas encore les classes.

attend tu dois s faire snake(ctx, ..) sur la fonction sinn c chelou

après ouai ton draw il est pas reconnu non ?

est ce que dans ta fonction snake tu peux appeler save ? avant la sous fonction de dessin

Le 07 janvier 2022 à 23:15:18 :
Je connais pas la syntaxe JavaScript car je suis spé Java perso, mais this.draw = function(ctx){} ça correspond à quoi ?

le ctx dans cette fonction était une erreurs

Le 07 janvier 2022 à 23:16:27 :
C'est pour qu'un objet instancié par la fonction snake ait une méthode draw. C'est l'ancienne méthode, lorsque l'on avait pas encore les classes.

Mais vu qu'il remet le ctx en paramètre de function() il perd encore la notion du type de ctx d'où le fait qu'il ait pas d'auto complétion non?

Le 07 janvier 2022 à 23:20:23 :

Le 07 janvier 2022 à 23:16:27 :
C'est pour qu'un objet instancié par la fonction snake ait une méthode draw. C'est l'ancienne méthode, lorsque l'on avait pas encore les classes.

Mais vu qu'il remet le ctx en paramètre de function() il perd encore la notion du type de ctx d'où le fait qu'il ait pas d'auto complétion non?

Ah, j'avais pas vu que la question portait là dessus.
Oui, c'est ça.

Le 07 janvier 2022 à 23:18:05 :
attend tu dois s faire snake(ctx, ..) sur la fonction sinn c chelou

après ouai ton draw il est pas reconnu non ?

est ce que dans ta fonction snake tu peux appeler save ? avant la sous fonction de dessin

Donc t'as retiré les 2 ctx paramètres et c'est bon ?

Le 07 janvier 2022 à 23:18:05 :
attend tu dois s faire snake(ctx, ..) sur la fonction sinn c chelou

après ouai ton draw il est pas reconnu non ?

est ce que dans ta fonction snake tu peux appeler save ? avant la sous fonction de dessin

Non en fait il ne la reconnais pas il me met local variables, mais pourtant le snake est instancié dans la function ou j'affect ctx

window.onload = function() {



    var canvas;

    var canvasWidth = 900;

    var canvaHeight = 600;

    var blockSize = 30;

    var ctx;

    var delay = 1000;

    var snakee;



    init();



    function init() {



            canvas = document.createElement('canvas');

            canvas.width = canvasWidth;

            canvas.height = canvaHeight;

            canvas.style.border = "5px solid";

            document.body.appendChild(canvas);

            ctx = canvas.getContext('2d');

            ctx.fillStyle = "#ff0000";

            snakee = new snake([[6,4],[5,4],[4,4]]);

            snakee.draw();



        //     refreshCanvas();



        // function refreshCanvas(){



        //     ctx.clearRect(0,0,canvas.width,canvas.height);

        //     setTimeout(refreshCanvas,delay);



        // }



        function drawBlock(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.fillStyle = "#ff0000";

                for(var i = 0; i < this.body.length; i++) {

                    drawBlock(this.body[i]);

                }

                ctx.restore();

            };



        }

    }

}

Voilà ce que nous voulois voir, au cas où ce n'était pas clair.