Deine Aufgabe: Gestalte dein Spiel

Hier ist der komplette Quellcode für Tischtennis. Darin sind schon einige Anregungen zur Weiterentwicklung aus dem Buch umgesetzt.
Tischtennis ist ein Echtzeit-Sport-Spiel, bei dem es auf die Reaktionsfähigkeit des Spielers ankommt. Dieselbe Art der Steuerung – mit Pfeiltasten nach oben, unten, rechts und links – kann auch für andere Spiele verwendet werden, z. B. Space Invaders, Asteroids und andere Action-Spiele.
<!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;
              this.speedModifizierer = 0;
              this.istKollidiertMit = function(ball) {
                  var linkeKante = this.x;
                  var rechteKante = this.x + this.breite;
                  var oberkante = this.y;
                  var unterkante = this.y + this.höhe;
                  if(ball.x > linkeKante  
                     && ball.x < rechteKante
                     && ball.y > oberkante
                     && ball.y < unterkante) {
                       return true;
                  }
                  return false;

               };
               this.gehe = function(tastencode) {   
                   var yNeu = this.y;
                   if(tastencode == 40) {
                      yNeu += 5;
                      this.speedModifizierer = 1.5;
                   } else if(tastencode == 38) {
                      yNeu += -5;
                      this.speedModifizierer = 1.5;
                   } else {
                       this.speedModifizierer = 0;
                   }
                   yNeu = yNeu < 0 ? 0 : yNeu;
                   yNeu = yNeu + this.höhe > 480 ? 480 - this.höhe : yNeu;
                   this.y = yNeu;
               };

           }
           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: 7, xSpeed:2, ySpeed: 0, 
               xUmkehren: function() {
                   this.xSpeed *= -1;
               },
               yUmkehren: function() {
                   this.ySpeed *= -1;
               },
               reset: function() {
                   this.x = 320;
                   this.y = 240;
                   this.xSpeed = 2;
                   this.ySpeed = 0;
               },
               pralltAb: function() {
                  return ball.ySpeed != 0;
               },
               ändereXSpeedUm: function(änderung) {
                   änderung = this.xSpeed < 0 ? änderung * -1 : änderung;
                   var nächsterWert  = this.xSpeed + änderung;
                   nächsterWert = Math.abs(nächsterWert) > 9 ? 9 : nächsterWert; 
                   this.xSpeed = nächsterWert;
               },
               ändereYSpeedUm: function(änderung) {
                   änderung = this.ySpeed < 0 ? änderung * -1 : änderung;
                   this.ySpeed += änderung;
               }
           };


           function tick() {
                aktualisiereSpiel();
                zeichne();
                window.setTimeout("tick()", 1000/60);
           }
           function aktualisiereSpiel() {
               ball.x += ball.xSpeed;
               ball.y += ball.ySpeed;
               if(ball.x < 0 || ball.x > 640) {
                   ball.reset();
               }
               if(ball.y <= 0 || ball.y >= 480) {
                   ball.yUmkehren();
               }
               var kollidiertMitSpieler = spieler.istKollidiertMit(ball)
               var kollidiertMitKi = ki.istKollidiertMit(ball)
               if(kollidiertMitSpieler || kollidiertMitKi) {
                   ball.xUmkehren(); 
                   ball.ändereXSpeedUm(0.25);
                   var beschleunigung = kollidiertMitSpieler ? 
                               spieler.speedModifizierer : ki.speedModifizierer;
                   ball.ändereYSpeedUm(beschleunigung);

               }
               for(var tastencode in gedrückt) {
                   spieler.gehe(tastencode);
               }
               var kiMitte = ki.y + (ki.höhe / 2);
               if(kiMitte < ball.y) {
                    ki.gehe(40);
               }
               if(kiMitte > ball.y) {
                    ki.gehe(38);
               }



           }
           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 = "blue";
              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 = "pink";
              ctx.fill();
           }
           var gedrückt = {};
           window.addEventListener("keydown", 
                 function(keyInfo) { gedrückt[event.keyCode] = true; }, false);
           window.addEventListener("keyup", 
                 function(keyInfo) { delete gedrückt[event.keyCode]; }, false);
           tick();
        </script>
   </body>
</html>
Beispiel ansehen
Zurück zur Mission