Die erste Bodenkachel erzeugen

Code skill

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>

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