HTML5-Tutorium: Canvas: MiniPong 05

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

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 4 (SVN-Repository)

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

Ziel: Simulation von Klassen in JavaScript

Im vierten Teil des Tutoriums wird beschrieben, wie man Klassen in JavaScript nachbilden kann.

Vier Klassen werden implementiert: Main, Ball, Paddle und Collision. Es wird jeweils ein Objekt pro Klasse erstellt.

miniatur|ohne|709px|Das Datenmodell von MiniPong 04

Anwendung „MiniPongCanvas04“

Neues Projekt anlegen

Legen Sie ein neues Statisches Web-Projekt mit dem Namen MiniPongCanvas04 an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

Dateien erstellen

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

index.html

Jede Klasse soll in einer eigenen Datei definiert werden, wie dies auch bei anderen Programmiersprachen wie z.B. Java üblich ist. Erstellen Sie zu diesem Zweck zunächst drei leere Dateien js/ball.js, js/paddle.js sowie js/collision.js und fügen Sie anschließend folgende drei Zeilen in die Datei index.html ein (vor der Zeile, in der js/main.js geladen wird): 

<script type="text/javascript" src="js/ball.js"     ></script>
<script type="text/javascript" src="js/paddle.js"   ></script>
<script type="text/javascript" src="js/collision.js"></script>

Anmerkung: Um den Kommunikations-Overhead zwischen Client (Browser) und Server möglichst gering zu halten, sollte eine HTML-Seite möglichst wenige weitere Dokumente (Bilder, CSS-Dateien, JavaScript-Dateien etc.) nachladen. Die Definition weiterer JavaSCript-Dateien stellt hier aber kein Problem dar, wenn – sobald die Anwendung fertiggestellt und ausgiebig getestet wurde – alle JavaScript-Dateien komprimiert und in eine einzige Datei (js/all.min.js) eingefügt werden. Natürlich darf in der Datei index.html anschließend auch nur noch diese eine JavaScript-Datei geladen werden.

ball.js

Die Definition der Klasse Ball wird in JavaScript durch zwei Objekte realisiert oder – besser gesagt – simuliert: Eine Konstruktor-Funktion (genauer: ein Konstruktor-Funktion-Objekt) sowie das zugehörige prototype-Objekt.

Die Konstruktor-Funktion Ball erstellt neue Ball-Objekte und initialisiert diese, indem sie im neu erstellten Objekt (this) Attribute erstellt und initialisiert. 

/** 
 *  Creates an instance of <code>Ball</code>.
 *
 *  @constructor
 *  @this {Ball} 
 *  @param {CanvasRenderingContext2D} p_context 
 *         The 2d context of the canvas upon which the ball is to be drawed.
 *  @param {number} p_r
 *         The radius of the ball.
 *  @param {number} [p_x_start = BALL_X]
 *         The starting position of the ball in x-direction.
 *  @param {number} [p_y_start = BALL_Y]     
 *         The starting position of the ball in y-direction.
 *  @param {number} [p_vx_start_min = BALL_VX_MIN] 
 *         The minimal starting velocity of the ball in x-direction. 
 *  @param {number} [p_vx_start_max = BALL_VX_MAX]
 *         The maximal starting velocity of the ball in x-direction.
 *  @param {number} [p_vy_start_min = BALL_VY_MIN]
 *         The minimal starting velocity of the ball in y-direction.
 *  @param {number} [p_vy_start_max = BALL_VY_MAX} 
 *         The maximal starting velocity of the ball in y-direction.
 */
function Ball(p_context, 
              p_r, p_x_start, p_y_start, 
              p_vx_start_min, p_vx_start_max, 
              p_vy_start_min, p_vy_start_max
             )
{this.r = p_r || BALL_RADIUS;

  this.v_x_start        = p_x_start      || BALL_X;
  this.v_y_start        = p_y_start      || BALL_Y;
  this.v_vx_start_min   = p_vx_start_min || BALL_VX_MIN; 
  this.v_vx_start_max   = p_vx_start_max || BALL_VX_MAX; 
  this.v_vy_start_min   = p_vy_start_min || BALL_VY_MIN; 
  this.v_vy_start_max   = p_vy_start_max || BALL_VY_MAX;

  this.v_vx_start_delta = this.v_vx_start_max - this.v_vx_start_min;
  this.v_vy_start_delta = this.v_vy_start_max - this.v_vy_start_min;

  this.v_context  = p_context;
  
  this.reset();
};

Die reset-Methode nimmt weitere Initialisierungen vor. Da diese Initialisierungen bei jedem Spielstart erneut ausgeführt werden müssen, wurden sie in eine Methode ausgelagert.

Beachten Sie bitte, dass der dem Konstruktor vorangestellte Kommentar JSDoc-konform ist. Dies ermöglicht es, mit einem geeigneten JSDoc-Tool eine HTML-API-Dokumentation automatisch zu erstellen.

Insbesondere weist der Konstruktor jedem damit erzeugten Objekt sein eigenes prototype-Objekt als prototype-Objekt zu.

Im Prototype-Objekt des Konstruktor-Funktions-Obje

main.js

TO BE DONE

Weitere Verbesserungsmöglichkeiten

Bei der Realisierung der Anwendung MiniPongCanvas04 wurden wichtige Programmierprinzipien nur eingeschränkt beachtet:
  ★★★★☆ Verständlichkeit/Lesbarkeit: sehr gut
  ★★★★☆ Stetigkeit: sehr gut
  ★★★★☆ Konfigurierbarkeit: sehr gut
  ★★★☆☆ DRY: wenige Wiederholungen
  ★★★★★ Gesetz von Demeter: wurde beachtet
  ★★☆☆☆ Überprüfbarkeit: eine simple formale Spezifikation ist vorhanden
  ★★★☆☆ Modularität: modular (die wesentlichsten Regeln wurden beachet)

<ul><li>„6“ befindet sich nicht in der Liste (0, 1, 2, 3, 4, 5) zulässiger Werte für das Attribut „Codequalität:Schreibbarkeit“.</li> <!--br--><li>„6“ befindet sich nicht in der Liste (0, 1, 2, 3, 4, 5) zulässiger Werte für das Attribut „Codequalität:Interfaces“.</li> <!--br--><li>„6“ befindet sich nicht in der Liste (0, 1, 2, 3, 4, 5) zulässiger Werte für das Attribut „Codequalität:Integritätsbedingungen“.</li> <!--br--><li>„6“ befindet sich nicht in der Liste (0, 1, 2, 3, 4, 5) zulässiger Werte für das Attribut „Codequalität:Ersetzbarkeitsprinzip“.</li></ul>

Das Prinzip der „Verständlichkeit/Lesbarkeit“

TO BE DONE

Das Prinzip der „Schreibbarkeit“

TO BE DONE

Das Prinzip der „Stetigkeit“

TO BE DONE

Das Prinzip der „Konfigurierbarkeit“

TO BE DONE

Das Prinzip „Don't repeat yourself“

TO BE DONE

Das „Gesetz von Demeter“

TO BE DONE

Das Prinzip der „Überprüfbarkeit“

TO BE DONE

Das Prinzip „Design by Contract“

TO BE DONE

Das „Liskovsche Substitutionsprinzip“

TO BE DONE

Das Prinzip der „Modularität“

TO BE DONE

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)

Fortsetzung des Tutoriums

Sie sollten nun das Hello-World-SVG-Tutorium bearbeiten, sofern Sie dies noch nicht gemacht haben. Anderenfalls können Sie gleich mit dem Minipong-SVG-Tutorium forfahren.

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_Canvas:_MiniPong_05&oldid=24566“