Die erste Bodenkachel erzeugen

Dieser Quellcode erzeugt ein canvas-Element, auf das der Hintergrund der Spielwelt gezeichnet wird. Du erzeugst die Bodenkacheln mit einer Konstruktorfunktion namens Boden. Objekte vom Typ Boden sammelst du in einem Array namens bodenkacheln, den du dem Objektliteral welt als Eigenschaft hinzufügst. Dieses Array wird in einer Schleife durchlaufen, um die Kacheln auf das Canvas zu zeich‍nen. Du schreibst eine tick-Funktion, die über setTimeout sich selbst 60-mal pro Sekunde aufruft. Diese Funktion wird dann später im Laufe der Spielentwicklung erweitert.

<!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,
               bodenKacheln: [
                   new Boden(0, 140)
               ],
               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.zeichne();
              window.setTimeout("tick()", 1000/60);
          }
          tick();
       </script>
   </body>
</html>

Beispiel ansehen

Zurück zur Mission