Früchte verspeisen

Dieser Quellcode wendet Kollisionserkennung auf die Früchte an. Dabei wird in einer Schleife geprüft, ob die Position der Schlange mit der Position einer Frucht übereinstimmt. Mit der Methode splice wird die getroffene Frucht vom Spielfeld entfernt und mit der unshift-Methode wird die Schlange verlängert. Du verwendest den Inkrement-Operator, um den Punktestand zu aktualisieren. Der Punktestand gibt an, wie viele Früchte verspeist worden sind.
<!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 :[
                 "###############",
                 "#             #",
                 "#             #",
                 "#             #",
                 "#    ####     #",
                 "#    ####     #",
                 "#             #",
                 "#             #",
                 "#             #",
                 "###############"
              ],
              früchte: [
                 {x: 1, y: 1}
              ],
              tick: function() {
                  window.clearTimeout(spiel.timer); 
                  spiel.anzahlTicks++;
                  var ergebnis = schlange.gehe();
                  if (ergebnis == "Ende") {
                      alert("Game Over!");
                      return;
                  }
                  grafik.zeichneSpiel();  
                  spiel.timer = window.setTimeout("spiel.tick()", 500);
              },
              istFrei: function(ort) {
                  return spiel.spielfeld[ort.y][ort.x] == " ";
              },
              istWand: function(ort) {
                  return spiel.spielfeld[ort.y][ort.x] == "#";
              },
              istFrucht: function(ort) {
                 for(var fruchtNr = 0; fruchtNr < spiel.früchte.length; fruchtNr++) {
                    var frucht = spiel.früchte[fruchtNr];
                    if(ort.x == frucht.x && ort.y == frucht.y) { 
                        spiel.früchte.splice(fruchtNr, 1);
                        return true;
                    }
                 }
                 return false;
              }
           };
           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() ;
                    if(spiel.istFrei(ort)) {
                        schlange.teile.unshift(ort);
                        schlange.teile.pop(); 
                    }
                    if(spiel.istWand(ort)) {
                          return "Ende";
                    } 
                    if(spiel.istFrucht(ort)) {
                       spiel.punkte++;
                       schlange.teile.unshift(ort);
                    } 
                }
           };

           
           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;
                   });
               },
               zeichne: function(ctx, quelle, farbe) {
                  quelle.forEach(function(teil) {
                      var teilXOrt = teil.x * grafik.größeQuadrat;
                      var teilYOrt = teil.y * grafik.größeQuadrat;
                      ctx.fillStyle = farbe;
                      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.zeichne(ctx, schlange.teile, "green");
                    grafik.zeichne(ctx, spiel.früchte, "red");
               }
            };

            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