Die Schlange in Bewegung setzen

Dieser Code bringt die Schlange in Bewegung. Wir verwenden die Array-Methode unshift, um ein Element am Anfang des Arrays einzufügen und pop, um das letzte Element des Arrays zu entfernen. Du definierst die Funktion nächsterOrt, um zu berechnen, auf welches Feld sich die Schlange als Nächstes bewegen wird.
<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
       <title>Snake</title>
  </head>
   <body>
       <canvas id="canvas" width="1024" height="1024"></canvas>
       <script>
           var spiel = {
               anzahlTicks: 0,
               timer: null,
               spielfeld :[
                 "###############",
                 "#             #",
                 "#             #",
                 "#             #",
                 "#    ####     #",
                 "#    ####     #",
                 "#             #",
                 "#             #",
                 "#             #",
                 "###############"
              ],
              tick: function() {
                  spiel.anzahlTicks++;
                  schlange.gehe();
                  grafik.zeichneSpiel();  
                  spiel.timer = window.setTimeout("spiel.tick()", 500);
              }
           };
           var schlange = {
                teile: [ 
                   {x: 4, y: 2},
                   {x: 3, y: 2},
                   {x: 2, y: 2}
                ],
                richtung: "O",
                nächsterOrt: function(){
                    var kopf = schlange.teile[0];
                    var zielX = kopf.x;
                    var zielY = kopf.y;
                    zielY = schlange.richtung == "N" ? zielY - 1 : zielY;
                    zielY = schlange.richtung == "S" ? zielY + 1 : zielY;
                    zielX = schlange.richtung == "W" ? zielX - 1 : zielX;
                    zielX = schlange.richtung == "O" ? zielX + 1 : zielX;
                    return {x: zielX, y: zielY};
                },                
                gehe: function() {
                    var ort = schlange.nächsterOrt() ;
                    schlange.teile.unshift(ort);
                    schlange.teile.pop();
 
                }
           };

           
           var grafik = {
               canvas: document.getElementById("canvas"),
               größeQuadrat: 30,
               zeichneSpielfeld: function(ctx) {
                   var y = 0;
                   spiel.spielfeld.forEach(function prüfeZeile(string) {
                       zeile = string.split("");
                       var x = 0;
                       zeile.forEach(function prüfeZeichen(zeichen) {
                          if(zeichen == "#") { 
                             ctx.fillStyle = "black";
                             ctx.fillRect(x, y, grafik.größeQuadrat,
                                       grafik.größeQuadrat);
                          }
                          x += grafik.größeQuadrat;
                       });
                       y += grafik.größeQuadrat;
                   });
               },
               zeichneSchlange: function(ctx) {
                  schlange.teile.forEach(function zeichneTeil(teil) {
                      var teilXOrt = teil.x * grafik.größeQuadrat;
                      var teilYOrt = teil.y * grafik.größeQuadrat;
                      ctx.fillStyle = "green";
                      ctx.fillRect(teilXOrt, teilYOrt, 
                                   grafik.größeQuadrat, grafik.größeQuadrat); 
                  });
               },
               zeichneSpiel: function() {
                    var ctx = grafik.canvas.getContext("2d"); 
                    ctx.clearRect(0, 0, grafik.canvas.width, grafik.canvas.height);
                    grafik.zeichneSpielfeld(ctx);
                    grafik.zeichneSchlange(ctx);
               }
            };

            var spielSteuerung = {
                starteSpiel: function () { 
                      spiel.tick();
                }
            }; 
            spielSteuerung.starteSpiel();         
       </script>
   </body>
</html>
Beispiel ansehen
Zurück zur Mission