Einen fliegenden Ball hinzufügen

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>

Beispiel ansehen

Zurück zur Mission