Kollisionserkennung hinzufügen

Dieser Quellcode fügt Kollisionserkennung hinzu, sodass das Spiel endet, wenn die Spielfigur einen Sprung verpasst und gegen die Kante einer Plattform stößt. Dazu verwendest du eine if-Anweisung und definierst eine stopp-Funktion. Bisher gibt es noch den Fehler, dass die Spielfigur durch Plattformen gehen kann. Diesen Bug beseitigst du, indem du herausfindest, wann die rechte Seite der Spielfigur mit einer Plattform zusammenstößt.
<!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 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() {
                  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,
              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 += welt.schwerkraft;
                  var bodenHöhe = welt.höheDesBodens(this.x);
                  var yOberseiteBoden = welt.höhe - bodenHöhe;
                  if(this.y > yOberseiteBoden) {
                       this.y = yOberseiteBoden;
                  }
              },
              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);
             }
          };

          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