Einen fliegenden Ball hinzufügen

Code skill

Erzeuge ein Ball-Objekt durch ein Objektliteral. Verwende Canvas-Kontext-Methoden, um den Ball als weiße Kreisfläche auf das Spielfeld zu zeich‍nen. Bringe ihn dann zum Fliegen. Schau dir an, wie der Ball von links nach rechts über die Spielfläche fliegt und dann verschwindet.

<!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 Schläger (x, y, breite, höhe) {
              this.x = x;
              this.y = y;
              this.breite = breite;
              this.höhe = höhe;
           }
           var spieler = new Schläger(5, 200, 25, 100);
           var ki = new Schläger(610, 200, 25, 100);
           var ball = { x:320, y: 240, radius: 3, xSpeed:2, ySpeed: 0 };


           function tick() {
                aktualisiereSpiel();
                zeichne();
                window.setTimeout("tick()", 1000/60);
           }
           function aktualisiereSpiel() {
               ball.x += ball.xSpeed;
               ball.y += ball.ySpeed;
           }
           function zeichne() {
              ctx.fillStyle = "black";
              ctx.fillRect(0, 0, 640, 480);
              zeichneSchläger(spieler);
              zeichneSchläger(ki);
              zeichneBall(ball);
           }
           function zeichneSchläger(schläger) {
              ctx.fillStyle = "white";
              ctx.fillRect(schläger.x, schläger.y, schläger.breite, schläger.höhe);
           }
           function zeichneBall(ball) {
              ctx.beginPath();
              ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);
              ctx.fillStyle = "white";
              ctx.fill();
           }
           tick();
        </script>
   </body>
</html>

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