Den Schläger des Spielers steuern

Wir wollen, dass der Spieler den Schläger mit Pfeiltasten nach oben und unten bewegen kann. Dazu verwenden wir EventListener und zwei Funktionen, die aufgerufen werden, wenn die Events keydown und keyup eintreten. Verwende die Tastencodes für die Pfeiltasten und sorge dafür, dass sich der Schläger bewegt. Wir müssen auch sicherstellen, dass der Schläger auf dem Spielfeld bleibt und nicht nach oben oder unten hinauswandert. Du kannst jetzt den Schläger bewegen und den Ball treffen.

<!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.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;
                   } else if(tastencode == 38) {
                   yNeu += -5;
                   }
                   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: 3, xSpeed:2, ySpeed: 0, 
               xUmkehren: function() {
                   this.xSpeed *= -1;
               },
               yUmkehren: function() {
                   this.ySpeed *= -1;
               }
           };


           function tick() {
                aktualisiereSpiel();
                zeichne();
                window.setTimeout("tick()", 1000/60);
           }
           function aktualisiereSpiel() {
               ball.x += ball.xSpeed;
               ball.y += ball.ySpeed;
               var kollidiertMitSpieler = spieler.istKollidiertMit(ball)
               var kollidiertMitKi = ki.istKollidiertMit(ball)
               if(kollidiertMitSpieler || kollidiertMitKi) {
                   ball.xUmkehren(); 
               }
               for(var tastencode in gedrückt) {
                   spieler.gehe(tastencode);
               }
           }
           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();
           }
           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