Die Schlange hinzufügen

Dieser Quellcode zeichnet eine Schlange auf das Spielfeld. Wir verwenden ein Array von Objekten mit x- und y-Positionen, die die Teile der Schlange repräsentieren. Das Objekt schlange erhält auch eine Eigenschaft, die die Bewegungsrichtung der Schlange angibt. Das Objektliteral grafik wird um eine Funktion erweitert, die die Schlange auf das Spielfeld zeichnet.

<!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 = {
               spielfeld :[
                 "###############",
                 "#             #",
                 "#             #",
                 "#             #",
                 "#    ####     #",
                 "#    ####     #",
                 "#             #",
                 "#             #",
                 "#             #",
                 "###############"
              ]
           };
           var schlange = {
                teile: [ 
                   {x: 4, y: 2},
                   {x: 3, y: 2},
                   {x: 2, y: 2}
                ],
                richtung: "O"
           };

           
           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"); 
                    grafik.zeichneSpielfeld(ctx);
                    grafik.zeichneSchlange(ctx);
               }
            };
            grafik.zeichneSpiel();           
       </script>
   </body>
</html>

Beispiel ansehen

Zurück zur Mission