Die Position der Spielfigur

Das Programm ermittelt die Position der Spielfigur und die Entfernung zur nächsten Plattform. Du definierst eine Funktion höheDesBodens, mit der du herausfinden kannst, welche Plattform (Kachel) unter der rechten Ecke der Spielfigur ist, und welche Höhe sie hat. Die Funktion wendeSchwerkraftAn berechnet, wie tief die Spielfigur herunterfallen muss, um auf dem Boden zu landen.

<!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,
               bodenKacheln: [
                   new Boden(0, 140)
               ],
               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 zufallsHöhe = Math.floor(Math.random() * this.höchste) + 20;
                   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() {
                  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,
              wendeSchwerkraftAn: function() {
                   var bodenHöhe = welt.höheDesBodens(this.x);
                   this.abstandZumBoden = welt.höhe - this.y - bodenHöhe;
              },
              tick: function() {
                 this.wendeSchwerkraftAn();
              },
              zeichne: function() { 
                  ctx.fillStyle = "green";
                  ctx.fillRect(spieler.x, spieler.y - spieler.höhe, this.höhe, this.breite);
             }
          };

          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