Das Spielfeld

Code skill

Dieser Quellcode erzeugt die Basisstruktur deiner HTML-Seite, auf die du dein Spielfeld mit einem canvas-Element erzeugst. Du verwendest ein Array, um das Spielfeld mit Wänden am Rand und einer In‍sel in der Mitte zu definieren. Mit den Methoden forEach und split prüfst du jedes Zeichen in den Strings des Array, um herauszufinden, an welche Stellen schwarze Quadrate auf das Canvas gezeichnet werden sollen.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
     <title>Snake</title>
   </head>
   <body>
       <canvas id="canvas" width="1024" height="1024"></canvas>
       <script>
           var spielfeld = [
              "###############",
              "#             #",
              "#             #",
              "#             #",
              "#    ####     #",
              "#    ####     #",
              "#             #",
              "#             #",
              "#             #",
              "###############"
           ];
           var canvas = document.getElementById("canvas");
           var ctx = canvas.getContext("2d");
           var y = 0;
           var größeQuadrat = 30;
           spielfeld.forEach(function prüfeZeile(string) {
               zeile = string.split(""); 
               var x = 0;
               zeile.forEach(function prüfeZeichen(zeichen) {
                   if(zeichen == '#') {
                      ctx.fillStyle = "black";
                      ctx.fillRect(x, y, größeQuadrat, größeQuadrat);
                   }
                x += größeQuadrat;
                });
                y += größeQuadrat;
           });
       </script>
   </body>
</html>

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