Das Spielfeld organisieren

Dieser Quellcode verwendet Objektliterale, um zusammengehörige Programmstücke zusammenzufassen, und Namensräume, sodass man über den Namen des Objekts auf die enthaltenen Funktionen und Eigenschaften zugreifen kann. Durch Objektliterale bleibt dein Programmtext verständlich, wenn das Projekt wächst.

<!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 grafik = {
               canvas: document.getElementById("canvas"),
               größeQuadrat: 30,
               zeichneSpielfeld: function() {
                   var ctx = grafik.canvas.getContext("2d");
                   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;
                   });
              }
            };
            grafik.zeichneSpielfeld();
       </script>
   </body>
</html>

Beispiel ansehen

Zurück zur Mission