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>

Zurück zur Mission

Name	Borlabs Cookie
Anbieter	Eigentümer dieser Website, Impressum
Zweck	Speichert die Einstellungen der Besucher, die in der Cookie Box von Borlabs Cookie ausgewählt wurden.
Cookie Name	borlabs-cookie
Cookie Laufzeit	1 Jahr

Akzeptieren	Google Analytics
Name	Google Analytics
Anbieter	Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland
Zweck	Cookie von Google für Website-Analysen. Erzeugt statistische Daten darüber, wie der Besucher die Website nutzt.
Datenschutzerklärung	https://policies.google.com/privacy?hl=de
Cookie Name	_ga,_gat,_gid
Cookie Laufzeit	2 Jahre