Alle Plattformen erreichbar machen

Dieser Quellcode stellt sicher, dass die Spielfigur auf alle Plattformen springen kann. In der Funktion neueKacheln wird die neue Variable größteErreichbareHöhe definiert. Sie wird in einer if-Anweisung verwendet, um sicherzustellen, dass die neue Kachel nur so hoch ist, dass die Spielfigur auf sie springen kann.
<!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,
               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);
                       }
                   }
               },
               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);
                   }
               }
          };
          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