HTML5-Tutorium: Canvas: MiniPong 04

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

Ziel

Im dritten Teil des Tutoriums wird beschrieben, wie man MiniPong mit Hilfe einer einzigen JavaScript-Datei erstellt. Wolfgang Kowarschick bezeichnet so eine Datei als „Moloch-Datei“ (Moloch = Monstrum, Ungeheuer, alles verschlingende Bestie).

Neues Projekt anlegen

Legen Sie ein neues Projekt MiniPong02 an und speichern Sie dieses Projekt auf die bekannte Weise in Ihrem SVN-Repository.

Dateien erstellen

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

CONSTANT.js

Fügen Sie die Variablen der beiden Dateien CONSTANT.js von Teil 1 und Teil 2 des Tutoriums in die CONSTANT.js ds dritten Teils ein. Achtung: Definieren Sie keine Variable doppelt.

Sie können später evtl. noch weitere Konstanten in diese Datei einfügen, wie z.B. Konstanten, die die Startposition von Ball und Schläger definieren, oder eine Konstaten PADDLE_FRICTION, die die Reibung des Schlägers festlegt. (Beachten Sie, dass in den Use Cases Folgendes gefordert wurde: Wird der Schläger im Moment der Kollision bewegt, so wird der Ball abhängig von der Bewegungsrichtung und Geschwindigkeit des Schlägers abgelenkt. )

Anwendung testen und sichern

Testen Sie Ihre Anwendung in gewohnter Weise.

Vergessen Sie nicht, sie im SVN-Repository zu sichern.

Erweiterung

Erweitern Sie die Anwendung so, dass Sie zwei Schläger unabhängig voneinander links und rechts am Bühnenrand bewegen können, so dass zwei Spieler gegeneinader spielen können. Jeder Spieler hat seinen eigenen Score. Der erste Spieler, der 10 Punkte erreicht hat, gewinnt.

Sie können die erzielten Punkte natürlich auch auf der Bühne selbst anzeigen (vgl. Bilder im [[Wikipedia:Pong Wikipedia-Artikel zu Pong]).

Beachten Sie wieder das Programmierprinzip „Don't repeat yourself“ (Dry).

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)
3. Musterlösungen, Musterlösungen (SVN)