Die Geschwindigkeit erhöhen

Dieser Quellcode erhöht allmählich die Geschwindigkeit des Spiels und macht es damit schwieriger. Verwende eine if-Anweisung, um herauszufinden, wann wieder drei neue Kacheln erzeugt worden sind. Falls dann noch nicht die maximale Geschwindigkeit erreicht ist, wird mit dem Inkrement-Operator die Scroll-Geschwindigkeit um 1 erhöht. Mit Methoden des Zeichenkontext deines canvas-Elements zeigst du auf dem Bildschirm die Geschwindigkeit und die bisher zurückgelegte Strecke an.
<!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: 15,
               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 = "black";
                   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 = "blue";
                       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 = "green";
                  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