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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Kowa (Diskussion | Beiträge)
Keine Bearbeitungszusammenfassung
Kowa (Diskussion | Beiträge)
Zeile 10: Zeile 10:


Im vierten Teil des Tutoriums wird eine funktionsfähige Version von MiniPong erstellt.
Im vierten Teil des Tutoriums wird eine funktionsfähige Version von MiniPong erstellt.
===Use Cases===
[[Datei:MiniPong04 Use Cases.png|ohne|882px|Use Cases der Tutoriums-Anwendung <code>MiniPong</code>]]
Ein Spieler kann das Spiel starten (Startknopf) und vorzeitig
beenden (Stopp-Knopf). Nach Spielstart kann der Spieler den Schläger
am unteren Rand des Spielfeldes mit Hilfe der Richtungstasten des
Keyboards nach links und rechts bewegen.
Nachdem das Spiel gestartet wurde, bewegt sich
der Ball geradlinig im Spielfeld, wobei die Startrichtung zufällig
gewählt wird. Kollisionen mit der linken, oberen oder
rechten Wand haben eine Richtungsänderung des Balls
zur Folge (Einfallswinkel = Ausfallwinkel).
Eine Kollision mit der unteren Wand beendet das Spiel.
Ziel des Spiels sind möglichst viele Kollision des Balls mit
dem Schläger. Eine derartige Kollision hat eine Richtungsänderung
sowie einen Punktgewinn zur Folge. Der aktuelle Punktestand (Score)
wird der Benutzer jederzeit angezeigt.
Wird der Schläger im Moment der Kollision bewegt, so wird der Ball abhängig von der
Bewegungsrichtung und Geschwindigkeit des Schlägers abgelenkt (Simulation von Reibung).


==Neues Projekt anlegen==
==Neues Projekt anlegen==

Version vom 29. November 2016, 13:15 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: index.html (WK_MiniPong04 (SVN))

Leeres Projekt: index.html (WK_MiniPong04_empty (SVN))

Ziel: Das fertige Spiel „MiniPong“

Datei:MiniPong04 Model Overview.png
Klassendiagramm

Im vierten Teil des Tutoriums wird eine funktionsfähige Version von MiniPong erstellt.

Use Cases

Use Cases der Tutoriums-Anwendung MiniPong
Use Cases der Tutoriums-Anwendung MiniPong

Ein Spieler kann das Spiel starten (Startknopf) und vorzeitig beenden (Stopp-Knopf). Nach Spielstart kann der Spieler den Schläger am unteren Rand des Spielfeldes mit Hilfe der Richtungstasten des Keyboards nach links und rechts bewegen.

Nachdem das Spiel gestartet wurde, bewegt sich der Ball geradlinig im Spielfeld, wobei die Startrichtung zufällig gewählt wird. Kollisionen mit der linken, oberen oder rechten Wand haben eine Richtungsänderung des Balls zur Folge (Einfallswinkel = Ausfallwinkel). Eine Kollision mit der unteren Wand beendet das Spiel.

Ziel des Spiels sind möglichst viele Kollision des Balls mit dem Schläger. Eine derartige Kollision hat eine Richtungsänderung sowie einen Punktgewinn zur Folge. Der aktuelle Punktestand (Score) wird der Benutzer jederzeit angezeigt.

Wird der Schläger im Moment der Kollision bewegt, so wird der Ball abhängig von der Bewegungsrichtung und Geschwindigkeit des Schlägers abgelenkt (Simulation von Reibung).

Neues Projekt anlegen

Legen Sie ein neues Projekt mit dem Namen „MiniPong04“ an.

Kopieren Sie die Dateien des Projektes MiniPong03 in das neue Projekt.

Die Klasse „ViewButton

Datei:MiniPong04 Model ViewButton1.png
Die Funktion „minipong“ hat direkten Zugriff auf das ViewButton-Objekt
Datei:MiniPong04 Model ViewButton2.png
Die Funktion „minipong“ hat Zugriff auf die init-Funktion
Datei:MiniPong04 Model ViewButton3.png
Das ViewButton-Objekt aktualisiert sich bei jeder Änderung des ModelButton-Objekts von selbst

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)