Das Spiel zum Scrollen bringen

Dieser Quellcode bewirkt, dass die erste Kachel über den Bildschirm wandert, sodass es aussieht, als ob die Spielfigur sich vorwärtsbewegt. Du fügst zum Objekt welt die Eigenschaften speed (Geschwindigkeit) und strecke (bisher zurückgelegte Strecke) hinzu und definierst die Funktion bewegeBoden. In diese Funktion setzt du eine Schleife, in der die Kachel von rechts nach links bewegt wird. Gib dem Objekt welt eine eigene tick-Funktion, die bei jedem Tick des Spiels aufgerufen wird und dann wiederum die Funktion bewegeBoden aufruft, um den Boden zu bewegen.

<!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,
               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;
                   }
               },
               tick: function() {
                  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);
                   }
               }
          };
          function tick() {
              welt.tick();
              welt.zeichne();
              window.setTimeout("tick()", 1000/60);
          }
          tick();
       </script>
   </body>
</html>

Beispiel ansehen

Zurück zur Mission