Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

JS snake, soucis d'accolade


Sujet :

JavaScript

  1. #1
    Candidat au Club
    JS snake, soucis d'accolade
    Bonjour,
    Je fais mes débuts en JS.
    Pour ce faire, je voulais réaliser un js.
    Le JS serait le jeu du serpent (snake).
    J'ai suivi un tutoriel mais je ne trouve pas mon erreur même après avoir relus et relus!
    Je vous sollicite car lorsque l'on est trop dedans on ne voit plus où se trouve l'erreur(s)

    Je dépose les documents pour corriger ce soucis

    Index.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
    <!doctype html>
    <html lang="fr">
     
    <head>
        <meta charset="utf-8">
        <title> Jeu du serpent </title>
        <!-- <link rel="stylesheet" href="style.css"> -->
        <script src="script.js"></script>
    </head>
     
    <body>
        <!-- jeux du serpent utilisant un canvas -->
    </body>
     
    </html>

    et script.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
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    // Au chargement, je crée un cadre de 900 de largeur et de 600 de hauteur
    // avec une épaisseur de 1px de bordure visible
    // C'est notre canvas
    window.onload = function () { // début du window.onload
     
    //  Déclaration de variagles globales
        var canvasWidth = 900;
        var canvasHeight = 600;
        var blockSize = 30; // taille d'un bloc de 30 pixels par 30 pixels 
        var ctx;
        var delay = 100; // exprimé en ms, c'est la vitesse du serpent  ex:1 trop vite 1000 trop lent
        var xCoord = 0;
        var yCoord = 0;
        var snakee;
        var applee;
        var widthInBlocks = canvasWidth/blockSize;
        var heightInBlocks = canvasHeight/blockSize;
        var score;
        var timeout;
     // -- fin des déclarations de variables
     
     // Initialisation
        init();
     // --- fin de l'initialisation
     
       function init() 
        { // début de la fonction d'initialisation
            var canvas = document.createElement('canvas');
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;
            canvas.style.border = "30px solid gray";
            canvas.style.margin="50px auto";
            canvas.style.display="block";
            canvas.style.backgroundColor="#ddd";
            document.body.appendChild(canvas);  // On lie le canvas au corps de notre document html entier
            // pour dessiner dans ce canvas, on a besoin de se que l'on appelle le contexte
            // pour cela on crée une variable pour cela	
            ctx = canvas.getContext('2d');
            snakee = new Snake([[6,4],[5,4],[4,4],[3,4],[2,4]],"right");
            applee = new Apple([10,10]);
            score =0;
            refreshCanvas();
        }  // ---Fin de la fonction d'initialisation
     
        function refreshCanvas() 
        { // Début de refreshcanvas
            console.log("Refresh Canvas");
     
            snakee.advance(); // Pour diriger le serpent
            snakee.draw(); // pour le dessiner à l'écran
            if(snakee.checkCollision())
                {
                    gameOver();
                }
            else
                {
                   if (snakee.isEatingApple(applee))
                       {
                           score++;
                           snakee.ateApple = true;
                           do
                           {
                               applee.setNewPosition();
                           }
                           while(applee.isOnSnake(snakee));
                       }
                        ctx.clearRect(0,0,canvasWidth,canvasHeight); // On efface le contenu de notre canvas
                        drawScore();
                        snakee.draw();
                        applee.draw();
                        timeout=setTimeout(refreshCanvas,delay); // Exécute refreshCanvas dès que le délais est atteint
                }
     
        } // --- Fin de refrehcanvas
     
        function gameOver()
        { // Début de gameOver
            ctx.save();
            ctx.font = "bold 70px sans-sherif";
            ctx.fillStyle = "#000";
            ctx.textAlign ="center";
            ctx.textBaseline = "middle";
            ctx.strokeStyle = "white";
            ctx.lineWidth = 5;
            var centreX = canvasWidth / 2;
            var centreY = canvasHeight /2;
            ctx.strokeText("Game Over", centreX, centreY-180);
            ctx.fillText("Game Over", centreX, centreY-180);
            ctx.font = "bold 30px sans-sherif";
            ctx.strokeText("Appuyez sur la touche expace pour rejouer", centreX, centreY-120);
            ctx.fillText("Appuyez sur la touche expace pour rejouer", centreX, centreY-120);
            ctx.restore(); 
         } // --- Fin de gameOver
     
        function restart()
        { // Début de restart
          snakee = new Snake([[6,4],[5,4],[4,4],[3,4],[2,4]],"right");
          applee = new Apple([10,10]);
          score =0; 
          clearTimeout(timeout); // réinitialise le timeout = même vitesse pour chaque partie
          refreshCanvas();  
        } // --- Fin de restart
     
        function drawScore()
        { // début de drawscore
            ctx.save();
            ctx.font = "bold 200px sans-sherif";
            ctx.fillStyle ="gray";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            var centreX = canvasWidth / 2;
            var centreY = canvasHeight / 2;
            ctx.fillText(score.toString(),centreX,centreY);
            ctx.restore();
        } // --- Fin de drawscore
     
        function drawBlock(ctx, position) 
        { // Début de drawblock
            var x = position[0]*blockSize;
            var y = position[1]*blockSize;
            ctx.fillRect(x,y,blockSize,blockSize);
        } // --- Fin de drawblock
     
        function Snake(body, direction) 
         { // Début de snake
            this.body = body;
            this.direction = direction;
            this.ateApple = false;
     
            this.draw = function () // On va dessiner le corps du serpent
             {           
                ctx.save();  // On sauvegarde le contexte qui existe
                ctx.fillStyle="#ff0000"; // Le corps du serpent sera du couleur rouge
                for (var i=0; i < this.body.length; i++) drawBlock(ctx,this.body[i]);
             };
            ctx.restore();
          } // --- Fin de snake
     
     
            this.advance = function () // déplacement du serpent 
            { // Début de advance
                // le bloc 6,4 est le premier élément de notre serpent
                // la fonction slice effectue une copie de ce boc
                var nextPosition = this.body[0].slice();
                switch(this.direction) 
                {
                    case "left":
                        nextPosition[0] -= 1;
                        break;
                    case "right": // on ajout 1 pour se déplacer à droite
                        nextPosition[0] += 1;
                        break;
                    case "down":
                        nextPosition[1] += 1;
                        break;
                    case "up":
                        nextPosition[1] -= 1;
                        break;
                    default:
                        throw("Invalid Direction"); 
                }
                this.body.unshift(nextPosition); 
     
                if (!this.ateApple)  
                    this.body.pop();
                 else
                    this.ateApplle = false;
            }; // --- Fin de advance
     
         this.setDirection = function(newDirection) 
            {
                var allowedDirections;
                switch(this.direction) 
                {
                    case "left":
                    case "right": // on ajout 1 pour se déplacer à droite
                        allowedDirections=["up","down"];
                        break;
                    case "down":
                    case "up":
                        allowedDirections=["left","right"];
                        break;
                    default:
                        throw ("Invalid Direction");
                }
                if (allowedDirections.indexOf(newDirection)>-1) 
                {
                    this.direction=newDirection; // alloue la direction permise
                }
            };
     
        this.checkCollision=function()
        { // Début checkcollision
          var wallCollision = false;
          var snakeCollision = false;
          var head = this.body[0];
          var rest = this.body.slice(1);
          var snakeX = head[0];
          var snakeY = head[1];
          var minX = minY = 0;
          var maxX=widthInBlocks-1;
          var maxY=heightInBlocks-1;
          var isNotBetweenHorizontalWalls=snakeX<minX||snakeX>maxX;
          var isNotBetweenVerticalWalls=snakeY<minY||snakeY>maxY;
     
          if(isNotBetweenHorizontalWalls||isNotBetweenVerticalWalls)
                wallCollision=true;
            for(var i=0;i<rest.lenght;i++)
                {
                    if(snakeX === rest[i][0] && snakeY === rest[i][1])
                        snakeCollision=true;
                }
            return wallCollision || snakeCollision;
        }; // --- Fin de collision
     
        this.isEatingApple = function(appleToEat)
        { // Début de isEatingApple
            var head =this.bidy[0];
            if(head[0] === appleToEat.position[0] && head[1] === appleToEat.position[1])
                return true;
            else
                return false;
        } // Fin de isEatingApple
     
     
    function Apple(position)
    { // Début de Apple
        this.position = position;
        this.setNewPosition= function()
        {//Début de SetNewposition 
         var newX = Math.round(Math.random()*(widthInBlocks-1));
         var newY = Math.round(Math.random()*(heightInBlocks-1));
         this.position = [newX,newY];
         }; // Fin de setNewPosition
        this.isOnSnake = function(snakeToCheck)
         { // Début de isOnSnake
          var isOnSnake = false;
          for (var i=0;i<snakeToCheck.body.lenght;i++) 
          {//Début de for 
            if (this.position[0] === snakeToCheck.body[i][0] && this.position[1] === snakeToCheck.body[i][1])
                isOnSnake = true;
          } // Fin du for
          return isOnSnake;
         }; // FIN de isOnSnake
         this.draw = function() 
         {//Début de apple draw 
          ctx.save(); // sauvegarde du contexte du canvas
              ctx.fillStyle = "33cc33"; // définir la couleur verte
              ctx.beginPath(); // Un rond se constriot dofférement d'un rectangle
              var radius = blockSize/2; // radius est le rayon du cercle
              var x = this.position[0]*blocksize+radius; 
              var y = this.position[1]*blockSize+radius;
              ctx.arc(x,y,radius,0,Math.PI*2,true);
              ctx.fill();
              ctx.restore(); // On restaure le contexte du canvas
         }; //Début de apple draw
     
    } // Fin de Apple
     
    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; // On sort de la fonction en gardant la direction précédente
            } // fin du crochet du switch 03
            snakee.setDirection(newDirection); // serpent reçoit l
        }; // cochet du document.onkeydown
     
     } // fin du window.unload

  2. #2
    Membre confirmé
    Bonjour,
    Citation Envoyé par HP_DEV Voir le message
    J'ai suivi un tutoriel mais je ne trouve pas mon erreur même après avoir relus et relus!
    Simplement relire est effectivement peu efficace.
    Multiplier les affichages avec console.log et désactiver des parties de code permet d'aller plus vite.

    Citation Envoyé par HP_DEV Voir le message
    Je vous sollicite car lorsque l'on est trop dedans on ne voit plus où se trouve l'erreur(s)
    Pas trop d'accord.
    Il faut aller encore plus dedans.

    En testant, j'ai cette erreur : "snakee.advance is not a function".
    Or, dans le code on a :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
          } // --- Fin de snake
     
     
            this.advance = function () // déplacement du serpent

    La fonction this.advance est située en dehors de la fonction/classe Snake, d'où l'erreur.

    Après avoir corrigé cette erreur, il y en aura encore deux ensuite avant que le jeu ne commence à fonctionner.

  3. #3
    Candidat au Club
    Première correction et ...
    J'ai corrigé le code
    Une accolade manquante d'une fonction

    un mot comme bidy au lieu de body!

    un petit oubli pour se déplacer!

    Dès à présent, il se lance.

    MAIS, il subsiste un soucis de rafraîchissement.

    Le serpent fonctionne correctement tans que l'on n'a pas mangé une pomme!
    Par la suite le rafraîchissement du serpent, ne se fait plus!!!

    Si quelqu'un aurait une idée!

  4. #4
    Modérateur

    Bonjour,
    visiblement au moment où tu manges la pomme il n'y a plus d'équilibre entre tes unsihft et tes pop ce qui laisse trainer une case en plus à chaque fois.

    Essaies dans ta fonction advance :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    this.body.unshift(nextPosition);
    this.body.pop();
    if (this.ateApple) {
      this.ateApplle = false;
    }

  5. #5
    Candidat au Club
    Je vais y regarder.
    J'espère comprendre et terminer ce petit jeu.