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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Zeile 2: Zeile 2:
=Ziel=
=Ziel=
In diesem Tutorium wird beschrieben, wie man in [[HTML5]] eine kleine interaktive Multimedia-Anwendungen mit Hilfe
In diesem Tutorium wird beschrieben, wie man in [[HTML5]] eine kleine interaktive Multimedia-Anwendungen mit Hilfe
von [[JavaScript]] sowie [[Canvas (HTML5)|Canvas]] erstellt.
von [[JavaScript]] sowie [[Canvas (HTML5)|Canvas]] erstellt. Das Tutorium basiert auf dem Tutorium von
H. Braun<ref>{{Quelle|Braun, H. (2011): Webanimationen mit Canvas}}</ref>.


==Use Cases==
==Use Cases==

Version vom 12. Oktober 2012, 12:46 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

Ziel

In diesem Tutorium wird beschrieben, wie man in HTML5 eine kleine interaktive Multimedia-Anwendungen mit Hilfe von JavaScript sowie Canvas erstellt. Das Tutorium basiert auf dem Tutorium von H. Braun[1].

Use Cases

Musterlösung: Minipong (alle Musterlösungen) Use Cases der Tutoriums-Anwendung Minipong Ein Spieler kann das Spiel starten (Startknopf) und vorzeitig beenden (Stopknopf). Nach Spielstart kann der Spieler den Schläger am unteren Rand des Spielfeldes mit Hilfe der Richtungstasten des Keyboards, mit Hilfe der Kippsensoren eines Smartphones, mit Hilfe von Touch-Events etc. nach links und rechts bewegen.

Nachdem das Spiel gestartet wurde, bewegt sich außerdem 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 = Ausfallswinkel). 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 Puktestand (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.

Tutorium

  1. Teil 1: Ball-Animation
  2. Teil 2: Bewegung des Schlägers
  3. Teil 3: MiniPong mittels einer „Moloch-Datei“

Quellen

<references>

  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
  2. Musterlösungen
  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)