HTML5-Tutorium: Canvas: MiniPong 05: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Zeile 24: Zeile 24:
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,
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.
passen Sie den Projekttitel in der Datei <code>index.html</code> an.
===<code>ball.js</code>===


===<code>main.js</code>===
===<code>main.js</code>===

Version vom 5. November 2012, 10:17 Uhr

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.

ball.js

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.