|
|
| (70 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| {{HTML5-Tutorium:Canvas:MiniPong:Menü}} | | {{HTML5-Tutorium:Canvas:MiniPong:Menü}} |
| '''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_04/WebContent/index.html Minipong 4]</code> | | '''Musterlösung''': <code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong05/web/index.html index.html]</code> |
| ([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_04 SVN-Repository]) | | ([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong05/ WK_MiniPong05 (SVN)]) |
|
| |
|
| {{In Bearbeitung}}
| | ==Ziel: Das fertige Spiel „MiniPong“ verbessern== |
| =Ziel: Simulation von Klassen in JavaScript= | | Im fünften Teil des Tutoriums wird beschrieben, wie die funktionsfähige Version von MiniPong verbessert und erweitert werden kann. |
| Im vierten Teil des Tutoriums wird beschrieben, wie man [[Klasse]]n in JavaScript nachbilden kann. | |
| | |
| Vier Klassen werden implementiert: <code>Main</code>, <code>Ball</code>, <code>Paddle</code> und <code>Collision</code>.
| |
| Es wird jeweils ein Objekt pro Klasse erstellt.
| |
| | |
| [[Medium:MiniPong04Canvas.png|miniatur|ohne|709px|Das Datenmodell von MiniPong 04]]
| |
| | |
| =Anwendung „<code>MiniPongCanvas04</code>“=
| |
| | |
| ==Neues Projekt anlegen==
| |
| | |
| Legen Sie ein neues Statisches Web-Projekt mit dem Namen <code>MiniPongCanvas04</code> an.
| |
| | |
| Speichern Sie dieses Projekt wie üblich in Ihrem Repository.
| |
| | |
| ==Dateien erstellen==
| |
| | |
| Kopieren Sie die Dateien <code>index.html</code>, <code>css/main.css</code> und <code>js/CONSTANT.js</code> von [[HTML5-Tutorium: Canvas: MiniPong 03|Teil 3]] des Tutoriums,
| |
| passen Sie den Projekttitel in der Datei <code>index.html</code> an.
| |
| | |
| ===<code>index.html</code>===
| |
| | |
| 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 <code>js/ball.js</code>, <code>js/paddle.js</code> sowie <code>js/collision.js</code>
| |
| und fügen Sie anschließend folgende drei Zeilen in die Datei <code>index.html</code> ein (vor der Zeile, in der <code>js/main.js</code> geladen wird):
| |
| | |
| <source lang="javascript">
| |
| <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>
| |
| </source>
| |
| | |
| '''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 (<code>js/all.min.js</code>) eingefügt werden.
| |
| Natürlich darf in der Datei <code>index.html</code> anschließend auch nur noch diese eine JavaScript-Datei geladen werden.
| |
| | |
| ===<code>ball.js</code>===
| |
| | |
| Die Definition der Klasse <code>Ball</code> wird in JavaScript durch zwei Objekte realisiert oder – besser gesagt – simuliert:
| |
| Eine Konstruktor-Funktion (genauer: ein Konstruktor-Funktion-Objekt) sowie das zugehörige <code>prototype</code>-Objekt.
| |
| | |
| Die Konstruktor-Funktion <code>Ball</code> erstellt neue Ball-Objekte und initialisiert diese,
| |
| indem sie im neu erstellten Objekt (<code>this</code>) Attribute erstellt und initialisiert.
| |
| | |
| <source lang="javascript">
| |
| /**
| |
| * 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();
| |
| };
| |
| </source>
| |
| | |
| Die <code>reset</code>-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 <code>prototype</code>-Objekt
| |
| als <code>prototype</code>-Objekt zu.
| |
| | |
| Im Prototype-Objekt des Konstruktor-Funktions-Obje
| |
| | |
| ===<code>main.js</code>===
| |
| | |
| {{TBD}}
| |
| | |
| =Weitere Verbesserungsmöglichkeiten=
| |
| | |
| {{Codequalität
| |
| | application = MiniPongCanvas04
| |
| | readability = 4
| |
| | writability = 6
| |
| | continuity = 4
| |
| | customizability = 4
| |
| | dry = 3
| |
| | demeter = 5
| |
| | verifiability = 2
| |
| | interfaces = 6
| |
| | contract = 6
| |
| | liskov = 6
| |
| | modularity = 3
| |
| }}
| |
| | |
| ==Das Prinzip der „[[Programmierprinzipien#Verst.C3.A4ndlichkeit.2C_Comprehesibility.2C_Lesbarkeit.2C_Readability|Verständlichkeit/Lesbarkeit]]“==
| |
| | |
| {{TBD}}
| |
| | |
| ==Das Prinzip der „[[Programmierprinzipien#Schreibbarkeit.2C_Writability|Schreibbarkeit]]“==
| |
| | |
| {{TBD}}
| |
| | |
| ==Das Prinzip der „[[Programmierprinzipien#Stetigkeit.2C_Continuity|Stetigkeit]]“==
| |
| | |
| {{TBD}}
| |
| | |
| ==Das Prinzip der „[[Programmierprinzipien#Konfigurierbarkeit.2C_Customizability|Konfigurierbarkeit]]“==
| |
| | |
| {{TBD}}
| |
| | |
| ==Das Prinzip „[[Don't repeat yourself]]“==
| |
| | |
| {{TBD}}
| |
| | |
| ==Das „[[Programmierprinzipien#Gesetz_von_Demeter.5B5.5D.2C_Law_of_Demeter.2C_LoD|Gesetz von Demeter]]“==
| |
| | |
| {{TBD}}
| |
| | |
| ==Das Prinzip der „[[Programmierprinzipien#.C3.9Cberpr.C3.BCfbarkeit.2C_Verifiability|Überprüfbarkeit]]“==
| |
| | |
| {{TBD}}
| |
| | |
| ==Das Prinzip „[[Programmierprinzipien#Benutze_Integrit.C3.A4tsbedingungen.2C_Make_Use_of_Integrity_Constraints.2C_Design_by_Contract.5B2.5D|Design by Contract]]“==
| |
| | |
| {{TBD}}
| |
| | |
| ==Das „[[Programmierprinzipien#Liskovsches_Substitutionsprinzip.5B3.5D.2C_LSP.2C_Ersetzbarkeitsprinzip.2C_Liskov_substitution_principle.5B4.5D|Liskovsche Substitutionsprinzip]]“==
| |
| | |
| {{TBD}}
| |
| | |
| ==Das Prinzip der „[[Programmierprinzipien#Modularit.C3.A4t.2C_Modularity.2C_Teile_und_herrsche.2C_Divide_et_impera|Modularität]]“==
| |
|
| |
|
| {{TBD}} | | {{TBD}} |
|
| |
|
| =Quellen= | | ===Klassenmodell=== |
| <references/>
| | [[Datei:MiniPong05 ClassModel Overview.png|gerahmt|rechts|Klassendiagramm]] |
| <ol start = "2">
| |
| <li>{{Quelle|Braun, H. (2011): Webanimationen mit Canvas}}</li>
| |
| <li>{{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
| |
| </ol>
| |
|
| |
|
| =Fortsetzung des Tutoriums=
| |
|
| |
|
| Sie sollten nun das [[HTML-Tutorium: SVG: Hello World|Hello-World-SVG-Tutorium]] bearbeiten, sofern Sie dies noch nicht gemacht haben.
| | ==Quellen== |
| Anderenfalls können Sie gleich mit dem [[HTML-Tutorium: SVG: MiniPong|Minipong-SVG-Tutorium]] forfahren.
| | # {{Quelle|Kowarschick, W.: Multimedia-Programmierung}} |
| [[Kategorie: HTML5-Tutorium: Canvas: MiniPong]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | | [[Kategorie: HTML5-Tutorium: Canvas: MiniPong]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] |
