Das Spielfeld

Programmiere das Spielfeld mit dem Zeichenkontext des canvas-Elements. Mit setTimeout sorgst du dafür, dass das Spiel 60-mal in der Sekunde „tickt“.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>Tischtennis</title>
   </head>
   <body>
       <canvas id="canvas" width="640" height="480"></canvas>
       <script>
           var canvas = document.getElementById("canvas");
           var ctx = canvas.getContext("2d"); 
           function tick() {
                draw();
                window.setTimeout("tick()", 1000/60);
           }
           function draw() {
              ctx.fillStyle = "black";
              ctx.fillRect(0, 0, 640, 480);
           }
           tick();
        </script>
   </body>
</html>

Beispiel ansehen

Zurück zur Mission