HTML5-Tutorium: Canvas: MiniPong 04

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3 (zu größeren Teilen überprüft)

Umfang: 3 (einige wichtige Fakten fehlen)

Quellenangaben: 5 (vollständig vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 5 (ausgezeichnet)

HTML-Tutorium: MiniPong

MiniPong: | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5

Musterlösung: Minipong 3 (SVN-Repository)

Ziel

Im dritten Teil des Tutoriums wird beschrieben, wie man MiniPong mit Hilfe einer einzigen JavaScript-Datei erstellt. Wolfgang Kowarschick bezeichnet so eine Datei als „Moloch-Datei“ (Moloch = Monstrum, Ungeheuer, alles verschlingende Bestie).

Neues Projekt anlegen

Legen Sie ein neues Projekt MiniPong02 an und speichern Sie dieses Projekt auf die bekannte Weise in Ihrem SVN-Repository.

Dateien erstellen

Kopieren Sie die Dateien index.html und css/Main.css von Teil 2 des Tutoriums, passen Sie den Projekttitel in der Datei index.html an und erstellen Sie die Dateien js/CONSTANT.js js/Main.js neu.

index.html

Fügen Sie in den HTML-Rumpf (body) folgenden Code vor das canvas-Element ein:

<p id="d_score">&nbsp;</p>

Der Text dieses Elements wird von JavaScript aus geändert, um den jeweiligen Punktestand anzuzeigen.   ist ein Leerzeichen und sorgt dafür, dass sich Eclipse nicht über ein leeres p-Element beschwert.

Fügen Sie in den HTML-Rumpf (body) folgendes Formular hinter das canvas-Element ein:

<form>
  <input id="d_start_stop" type="button"/>
</form>

Dieser Button fungiert – je nach aktuellen Status des Spiels – als Start- oder Stopp-Button. Die Beschriftung sowie die Zuordnung der zugehörigen Aktion wird jeweils mittels JavaScript an den aktuellen Zustand der Anwendung angepasst.

CONSTANT.js

Fügen Sie alle Variablen der beiden Dateien CONSTANT.js von Teil 1 und Teil 2 des Tutoriums in die Datei CONSTANT.js ds dritten Teils ein.

Achtung: Definieren Sie keine Variable doppelt.

Sie werde später noch weitere Konstanten in diese Datei einfügen, wie z.B. Konstanten, die die Startposition von Ball und Schläger definieren, oder eine Konstate PADDLE_FRICTION, die die Reibung des Schlägers festlegt. (Beachten Sie, dass in den Use Cases Folgendes gefordert wurde: Wird der Schläger im Moment der Kollision bewegt, so wird der Ball abhängig von der Bewegungsrichtung und Geschwindigkeit des Schlägers abgelenkt.)

main.js

Fügen Sie die Variablen v_ball, v_paddle, v_context, v_interval und v_score der beiden Dateien main.js von Teil 1 und Teil 2 des Tutoriums in die Datei main.js ds dritten Teils ein.

Achtung: Definieren Sie keine Variable doppelt.

Das Ball-Objekt v_ball

Erweitern Sie das Ball-Objekt v_ball um eine Initialisierungsmethode, deren Aufgabe es ist, den Ball am oberen Bühnenrand zu positionieren und eine Startgeschwindigkeit festzulegen:

init: function()
      { this.x  = CANVAS_WIDTH/2;
        this.y  = this.r + BALL_PADDING;
        this.vx = (Math.random()<0.5?1:-1)*( 50 + Math.random()*100);
        this.vy = 150 + Math.random()* 50;
      }

Beachten Sie, dass der Ball BALL_PADDING Pixel vom oberen Rand entfernt positioniert wird. Den Wert dieser Konstanten müssen Sie in CONSTANT.js festlegen.

Legen Sie im Ball-Objekt für alle Attribute sinnvolle Initialwerte fest. Diejenigen Werte, die später von der init-Methode festgelegt werden, können einfach mit Null vorbelegt werden.

Das Schläger-Objekt v_paddle

Erweitern Sie das Schläger-Objekt v_paddle um eine Initialisierungsmethode, deren Aufgabe es ist, den Schläger am unteren Bühnenrand zu positionieren und die Startgeschwindigkeit des Schlägers (in x-Richtung) auf 0 zu setzen:

init: function()
      { this.x  = (CANVAS_WIDTH - this.width) / 2;
        this.y  = CANVAS_HEIGHT - this.height - PADDLE_PADDING;
        this.vx = 0;
      },

Beachten Sie, dass der Schläger PADDLE_PADDING Pixel vom unteren Rand entfernt positioniert wird. Den Wert dieser Konstanten müssen Sie in CONSTANT.js festlegen.

Legen Sie im Schläger-Objekt für alle Attribute sinnvolle Initialwerte fest. Diejenigen Werte, die später von der init-Methode festgelegt werden, können einfach mit Null vorbelegt werden.

Definieren Sie für das Schläger-Objekt ein weiteres Attribut friction und initialisieren Sie dieses mit der Konstanten PADDLE_FRICTION.

Funktionen, die teilweise wiederverwendet werden können

TO BE DONE

sowie die Methoden f_init (einschließlich des Befehls window.onload = f_init;)

Anwendung testen und sichern

Testen Sie Ihre Anwendung in gewohnter Weise.

Vergessen Sie nicht, sie im SVN-Repository zu sichern.

Erweiterung

Erweitern Sie die Anwendung so, dass Sie zwei Schläger unabhängig voneinander links und rechts am Bühnenrand bewegen können, d.h., dass zwei Spieler gegeneinander spielen können. Jeder Spieler hat seinen eigenen Score. Der erste Spieler, der 10 Punkte erreicht, gewinnt.

Am besten zeigen Sie die erzielten Punkte auch auf der Bühne selbst an (vgl. Bilder im [[Wikipedia:Pong Wikipedia-Artikel zu Pong]). Wie man Text auf der Bühne darstellen kann, wurde im Hello-World-Tutorium gezeigt.

Beachten Sie wieder das Programmierprinzip „Don't repeat yourself“ (Dry).

Quellen

1. Braun (2011): Herbert Braun; Webanimationen mit Canvas; in: c't Webdesign; Band: 2011; Seite(n): 44–48; Verlag: Heise Zeitschriften Verlag; Adresse: Hannover; 2011; Quellengüte: 5 (Artikel)
2. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
3. Musterlösungen, Musterlösungen (SVN)