Das Spiel zum Scrollen bringen

Code skill

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>

Zurück zur Mission
Copyright © 2008 Walker Books Ltd
Illustrations © Duncan Beedie
All rights reserved.