Die Schlange steuern

Dieser Quellcode kann Tastatureingaben verarbeiten, sodass der Spieler die Schlange steuern kann. Mit der Funktion addEventListener sorgst du dafür, dass die Bewegung der Schlange über die WASD-Tasten auf der Tastatur gesteuert werden kann. Du verwendest außerdem clearTimeout, um zu verhindern, dass die Schlange schneller 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() {
                  window.clearTimeout(spiel.timer); 
                  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 = {
                verarbeiteEingabe: function(keyPressed) {
                   var taste = keyPressed.key.toLowerCase();
                   var zielRichtung = schlange.richtung;
                   if(taste == "w") zielRichtung = "N";
                   if(taste == "a") zielRichtung = "W";
                   if(taste == "s") zielRichtung = "S";
                   if(taste == "d") zielRichtung = "O";
                   schlange.richtung = zielRichtung;
                   spiel.tick();
                },
                starteSpiel: function() {
                      window.addEventListener("keypress",
                          spielSteuerung.verarbeiteEingabe, false);
                      spiel.tick();
                }
             };
 
            spielSteuerung.starteSpiel();         
       </script>
   </body>
</html>
Beispiel ansehen
Zurück zur Mission