Deine Aufgabe: Gestalte dein Spiel

Hier ist der komplette Quellcode für Endless-Runner. Darin sind schon einige Anregungen zur Weiterentwicklung aus dem Buch umgesetzt. Die Schwierigkeit deines Spiels ergibt sich daraus, wie schnell sich die Spielwelt bewegt und wie gut die Spielfigur springen kann. Hast du eine Idee, wie man die Sprunggeschwindigkeit ändern kann?

Unser Endless-Runner-Spiel ist ein Echtzeit-Jump-’n‘-Run, das auf Timing beruht, d. h. man muss im richtigen Moment eine Taste drücken. Spiele wie Super Mario, Donkey Kong und Temple Run verwenden ähnliche Techniken wie unser Endless-Runner. Sie haben nur eine besser ausgearbeitete Grafik und Soundeffekte.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>Renne!</title>
   </head>
   <body> 
       <canvas id="canvas" width="640" height="480"></canvas>
       <script>
          var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");
          function Boden(x, höhe) {
             this.x = x;
             this.breite = 700;
             this.höhe = höhe;
          }
          var welt = {
               höhe: 480,
               breite: 640,
               schwerkraft: 10,
               höchste: 240,
               speed: 5,
               strecke: 0,
               maxSpeed: 40,
               anzahlKacheln: 0,
               autoScroll: true,
               bodenKacheln: [
                   new Boden(0, 140)
               ],
               stopp: function() {
                    this.autoScroll = false;
               },

               bewegeBoden: function() {
                   for(index in this.bodenKacheln) {
                       var kachel = this.bodenKacheln[index];
                       kachel.x -= this.speed;
                       this.strecke += this.speed;
                   }
               },
               neueKacheln: function() {
                   if(this.bodenKacheln.length >= 3) {
                        return;
                   }
                   var vorigeKachel = this.bodenKacheln[this.bodenKacheln.length - 1];
                   var größteErreichbareHöhe = vorigeKachel.höhe + spieler.höhe * 3.5;
                   if (größteErreichbareHöhe > this.höchste) {
                         größteErreichbareHöhe = this.höchste;
                   }
                   var zufallsHöhe = Math.floor(Math.random() * größteErreichbareHöhe) + spieler.höhe;
                   var x = (vorigeKachel.x + vorigeKachel.breite); 
                   var nächste = new Boden(x, zufallsHöhe);
                   this.bodenKacheln.push(nächste);
               },
               entsorgeKacheln: function() {
                   for(index in this.bodenKacheln) {
                       if(this.bodenKacheln[index].x <= -this.bodenKacheln[index].breite) {
                            this.bodenKacheln.splice(index, 1);
                            this.anzahlKacheln ++;
                            if(this.anzahlKacheln % 3 == 0 && this.speed < this.maxSpeed) {
                               this.speed++;
                            } 
                       }
                   }
               },
               höheDesBodens: function(spielerX) {
                   for(index in this.bodenKacheln) {
                       var kachel = this.bodenKacheln[index];
                       if(kachel.x <= spielerX && kachel.x + kachel.breite >= spielerX) {
                           return kachel.höhe;
                       }
                   }
                   return -1;
               },

               tick: function() {
                  if(!this.autoScroll) {
                         return;
                  };

                  this.entsorgeKacheln();
                  this.neueKacheln();
                  this.bewegeBoden();
               },
               zeichne: function() {
                   ctx.fillStyle = "cyan";
                   ctx.fillRect(0, 0, this.breite, this.höhe);

                   for(index in this.bodenKacheln) {
                       var kachel = this.bodenKacheln[index];
                       var y = welt.höhe - kachel.höhe;
                       ctx.fillStyle = "indigo";
                       ctx.fillRect(kachel.x, y, kachel.breite, kachel.höhe);
                   }
                   ctx.fillStyle = "white";
                   ctx.font = "28px Arial";
                   ctx.fillText("Geschwindigkeit: " + this.speed, 10, 40);
                   ctx.fillText("Strecke: " + this.strecke, 10, 75);

               }
          };
          var spieler = {
              x: 160,
              y: 340,
              höhe: 20,
              breite: 20,
              kraftNachUnten: welt.schwerkraft,
              sprunghöhe:0,
              berechneAbstandZumBoden: function(x) {
                 var bodenHöhe = welt.höheDesBodens(x);
                return welt.höhe - this.y - bodenHöhe;
              },
              wendeSchwerkraftAn: function() {
                  this.abstandZumBoden = this.berechneAbstandZumBoden(this.x);
                  var abstandZumBodenRechts = this.berechneAbstandZumBoden(this.x + this.breite);
                   if(this.abstandZumBoden < 0 || abstandZumBodenRechts < 0) {
                       welt.stopp()
                   }
              },
              verarbeiteSchwerkraft: function() {
                  this.y += this.kraftNachUnten;
                  var bodenHöhe = welt.höheDesBodens(this.x);
                  var yOberseiteBoden = welt.höhe - bodenHöhe;
                  if(this.y > yOberseiteBoden) {
                       this.y = yOberseiteBoden;
                  }
                  if(this.kraftNachUnten < 0) {
                      this.sprunghöhe += (this.kraftNachUnten * -1);
                      if(this.sprunghöhe >= spieler.höhe * 6) {
                           this.kraftNachUnten = welt.schwerkraft;
                           this.sprunghöhe = 0;
                      }
                  }

              },
              tasteGedrückt: function(keyInfo) {
                  var bodenHöhe = welt.höheDesBodens(this.x );
                  var aufDemBoden = bodenHöhe == (welt.höhe - this.y);
                  if(aufDemBoden) {
                       this.kraftNachUnten = -8;
                  }
              },

              tick: function() {
                  this.verarbeiteSchwerkraft();
                  this.wendeSchwerkraftAn();
              },
              zeichne: function() { 
                  ctx.fillStyle = "mediumvioletred";
                  ctx.fillRect(spieler.x, spieler.y - spieler.höhe, this.höhe, this.breite);
             }
          };
          window.addEventListener("keypress", 
                 function(keyInfo) { spieler.tasteGedrückt(keyInfo); }, false);
          function tick() {
              spieler.tick();
              welt.tick();
              welt.zeichne();
              spieler.zeichne();
              window.setTimeout("tick()", 1000/60);
          }
          tick();
       </script>
   </body>
</html>

Beispiel ansehen

Zurück zur Mission