Spiele(reien) mit und durch Javascript *
Dezember 2012
Februar - März 2013
März/April 2013
März 2014
Die hier vorgestellten Webdinge wurden mit und durch Javascript zum Leben erweckt. Jedoch es lässt sich schwer sagen, ob zuerst die Idee zur Sache da war und dann gesucht wurde, um das passende Script zu finden - oder ob ein durch Zufall euntdecktes Script eine Idee anregte... Doch ganz generell gibt es bei mir kein "Webding", das nicht durch Javascript aufgepeppt und aufgewertet würde. Doch das dürfte so gut wie auf die gesamte Webwelt, auch da draußen, zutreffen.
* Um Screens, Beschreibungen und Besonderheiten der Projekte zu sehen, bitte eine Vorschaubox anklicken.
Das Märchenquiz zum Toggeln
Diese kleine Spieleseite hält 16 Fragen zu Märchen der Gebrüder Grimm parat. Zum Beispiel wird gefragt: "In welchem Märchen kommt ein blutiger Schlüssel vor, und woher stammt das Blut?" Die Fragen befinden sich auf hellgrauen klickbaren Boxen mit der Grafik eines Fragezeichens. Bei Klick auf die Box klappt sie auf und zeigt die Antwort.
Eine aufgeklappte Antwort kann mit Klick auf die Fragebox, die jetzt ein Ausrufezeichen zeigt, wieder geschlossen werden. Muss aber nicht sein: auch bei aufgeklappter Antwort kann eine neue aufgetoggelt werden, so dass so viele Antworten sichtbar sind, wie man will. Die Antwortbereiche haben je ein anderes Hintergrundbild. Dazu mehr siehe unten.
Eine Besonderheit: Die Gestaltung des Seitenhintergrundes
Der Seitenhintergrund setzt sich aus fünf Bildern (PNGs) zusammen. Zunächst erhält der body 1 das breiteste aller Bilder mit dem zarten hellgrauen Verlauf und 4 Sternen. Es wird auf "no-repeat" und zentriert gesetzt, soll sich also nicht wiederholen. Auch erhält der body 2 das Bild mit den grauen "Bleistift"-Linien links und rechts, welches sich auf der y-Achse wiederholt: es reicht vom oberen Rand der Seite unendlich nach unten. Da dies Bild der Body erhält, ist es unter der Stern- und Kopfgrafik auch zu sehen.
Der Content-Wrapper erhält die Hintergrundgrafik 3 mit den Sternen oben. Sie wird mit 100 Pixeln Abstand nach oben positioniert- um Platz für die Kopfgrafik zu lassen. Unten schließen sich die gezeichneten Randlinien mit Grafik 2 an, sodass der Übergang nahtlos wirkt. Die schmale Headergrafik 4 oben ist center top positioniert. Sie "trägt" den Titel der Seite. Die Fußgrafik 5 ist center bottom, also am unteren Rand der Seite und auf fixed gesetzt. Sie bleibt wo sie ist, trägt den Link zu bettinagraf.info, und scrollbarer Content "flutscht" hinter sie.
Wie wird getoggelt? Javascript und CSS
Fragen und Antworten sind in einer sogenannten Definitionsliste <dl> sortiert. Ein Frage- und Antwortpaar besteht aus <dt> und <dd>. Das <dd> enthält Hintergrundbild und Antworttext und wird im Css zunächst auf unsichtbar (display: none) gesetzt. Das Javascript befiehlt, bei Klick auf ein <dt>, das eine Frage zeigt, die darunter liegende <dd> aufzutoggeln.
Ein weiteres "Kind" jedes <dt> ist ein Anker-Tag <a>, welcher im Css die Hintergrundgrafik mit Ausrufe- und Fragezeichen erhält.
Diese Grafik ist ein PNG mit transparentem Hintergrund, von dem je nur die Hälfte zu sehen ist: das Fragezeichen bei geschlossener Frage-Box oder das Ausrufezeichen, wenn der Spieler die Box per Klick aufgetoggelt hat.
Dem <a> Tag wird die Höhe des PNGs und die halbe Länge zugewiesen sowie ein text-indent: -9999px, eine Einrückung der Grafik nach links um 9999 Pixel, so dass sie theoretisch unsichtbar ist. Initial hat <a> die Klasse "closed": sie erhält background: url(images/button2_fz_az_60x25.png) left no-repeat; d.h. nur das Fragzeichen ist sichtbar. Ein Klick auf die <dt> ändert seine Klasse von "closed" zu "open" und erhält right no-repeat. So ist das Ausrufezeichen sichtbar.
Die Hintergrundbilder der Antworten
Im Herbst und Winter des Jahres 2011 und auch in Anfang 2012 arbeite ich mehrere märchenartige Bildkompositionen mit Photoshop aus. Im Herbst 2011 hatte ich mit meiner damaligen Weiterbildungsklasse Schloss und Park Sanssouci besucht. Der wunderschöne Schlosspark erbrachte viele inspirierende Fotos - perfektes Grundlagenmaterial.
Ich finde Märchen und Fabelwesen von jeher faszinierend... nun bevölkerte ich den Burggraben mit halbtransparenten Libellen oder ließ durch die Weiden am Weiher ein Einhorn jagen. 82 Ausschnitte dieser Sanssouci-Märchen-Fotoarbeiten wählte ich aus. Sie bildeten den Pool, aus dem die Hintergründe der Antworten so angeordnet wurden, dass sie zueinander passen. - Die verwendeten Fotokompositionen siehe hier in der Slideshow:
Märchenhafte Bildkompositionen
Libellen über dem Schlossgraben
Der Engel im Park
Das Einhorn: eines der Letzten seiner Art
Geisterhafte Libellen am Teich bei Gewitterstimmung
Die Elbe des Flusses
Switch den Style - 1 Startseite in 3 Designs
Als ich im Herbst 2012 ein wenig mit PHP in Berührung kam und einiges lernte und ausprobierte, entstanden auch "aufhebenswerte" PHP-Spielereien bzw. -schnipsel. Zu Hause installierte ich in der Folgezeit den lokalen Server XAMPP, um auch hier PHP üben und die "Schnipsel" zeigen zu können - PHP läuft nur serverseitig, so dass ein Browser (=Client) zur Wiedergabe z. B. eines PHP-basierten Quiz' nicht ausreicht.
Um mir selbst übersichtlich zu machen, was ich bereits an PHP-Kram gemacht hatte, erstellte ich im entsprechenden Ordner eine index.html als PHP-Startseite, die natürlich schön gestylt werden wollte. Mir schwebten mehrere Designs vor - das Gestalten macht ja bei einer Site immer am meisten Spaß. Doch nicht zuletzt weil PHP so komplex ist und so vielgestaltig, konnte und wollte ich mich nicht für ein Design entscheiden...
...und entwarf zunächst drei an der Zahl. Ich dachte mir, dass es doch möglich sein müsse, sie alle zu zeigen. So googelte ich nach einer Art "Switcher" für den Style und fand ein Stück Javascript. Dieses implementiert, ist es dem Besucher der Site (mir!) möglich, durch Klick auf die platzierten "Wähl-Deinen-Style"-Buttons zwischen den Styles zu wechseln.
So funktioniert's
Ich erstellte 3 Stylesheets, jedes für sich wie gewohnt Schritt für Schritt, während es normal im Head der index.html eingebunden ist. Ich nannte sie hipp_style.css, klassisch_style.css und xyz_style.css. Im HTML legte ich unten an der Site eine Leiste mit drei Style-Wahl-Buttons an - zu deren Belegung gleich Näheres.
Nachdem alle Stylesheets komplett waren, verlinkte ich das Hipp-like Stylesheet, das standardmäßig bei Aufruf der Site aktiv sein sollte, auf herkömmliche Weise: <link href="style/hipp_style.css" rel="stylesheet" type="text/css" title="Hipp-like Layout"> Außergewöhnlich ist hier die Zuweisung eines title - hier braucht man ihn für die Referenz im Button.
Die beiden alternativen Stylesheets wurden, ebenfalls im Head, so eingebunden: <link href="style/klassisch_style.css" rel="alternate stylesheet" type="text/css" title="Klassisches Layout"> und gleich darunter: <link href="style/xyz_style.css" rel="alternate stylesheet" type="text/css" title="Black-Neon Layout">.
Das im Web aufgestöberte Javascript switch.js band ich ebenfalls im Head ein. Die Wahl-Buttons sehen, am Beispiel des zweiten Buttons, im HTML so aus: <a id="klassisch" href="javascript:setStyle('Klassisches Layout')">Klassisches Layout</a>. Die id des Ankers bezieht sich auf das Aussehen des Buttons.
Das Wichtigste hier ist javascript:setStyle. Denn mit Klick auf die Buttons wird jeweils auf die title der im Head eingebundenen Stylesheets referiert. Drei "Style-Wahl-Buttons" referieren auf drei title, die wiederum mit dem eingebundenen Script kommunizieren, so dass auf das jeweils referierte Stylesheet zugegriffen und es damit aktiviert wird.
Hintergrund & Umsetzung einer Inspirationsquelle
Ich achte beim Kauf meiner wenigen Kosmetik - bei Cremes für's Gesicht und den Körper und bei Waschlotion - auf schönen Duft, schöne Textur, Hautverträglichkeit... und ja, vor Allem auf's Packungsdesign. Dies hat, glaube ich, oft mit den größten Einfluss auf Kaufentscheidungen vieler Konsumenten. Auf jeden Fall bin ich ein dankbarer visuell-inspirierter Käufer :)
Hipp-Produkte duften herrlich warm-pudrig nach Baby. Konnotierte Gefühle sind heimatliche Mama-Nähe, Wohligkeit, Geborgenheit. Was Hipp dementsprechend richtig gut macht, ist das Produktdesign. Sanft geschwungene Formen & Fonts; Pastelltöne, die sowohl zu Mädchen als auch zu Jungs passen; die kluge Entscheidung des "neutral" lindgrünen Deckels.
Die Illustration des Baumes erinnert an Heile-Welt-Kinderbücher und hebt sich wohltuend ab von den ewig pausbäckigen Babys auf den Verpackungen für Babyprodukte. Neben dem Logo hat Hipp 2 verschiedene Schriften in mehreren Schnitten in perfekter Abstimmung und im Logo die tradierten Hipp-Farben, die eigentlich nicht zu Pastell passen - hier aber irgendwie doch.
Für die Blattornamente auf der PHP-Startseite zeichnete ich in Illustrator die Blätter der gescannten Cremedose ab und ordnete sie "im Flug" an. Entsprechende Farben übernahm ich für die entsprechenden Site-Elemente und verwendete Fonts so ähnlich wie möglich denen bei Hipp; ich wählte Cuprum und Dancing Script. Schriftarten und -farben sortierte ich in ähnlicher Rangordnung wie auf der Cremetube.
Die drei Styles als Screens
Snippetside Javascript
Im Spätherbst des Jahres 2012 schenkte mir ein guter Freund ein Buch über Javascript. Ich begann es systematisch durchzuarbeiten. Die Erkenntnisse der ersten grundlegenden Kapitel setzte ich in diese Snippets JavaScript @ Lilli Site um. Aber nicht staubtrocken bzw. allzu theoretisch; zur Erläuterung der Funktionen erfand ich ein kleines Haustier, das nach menschlicher Aufmerksamkeit, Zuwendung und Kommunikation sucht...
JavaScript von Kopf bis FußM. Morrison (Autor)
O'Reilly 2008
Die Startseite erzählt, worum es geht. Auf 4 Seiten werden 4 Snippets vorgestellt - tatsächlich sind es zwar mehr als vier, doch vier sinnvolle bzw. zusammenhängende "Aktionen" mit und um das Haustier werden gezeigt und erläutert.
Beispielsweise... Snippet 1: Grünes Tier grüßt
a.) Einführung, um welche Snippets es geht
Jede Snippet-Seite stellt zunächst kurz die geplante Aktion vor. Sie zeigt auf der rechten Seite den blauen das kommt raus Button sowie den grünen das steckt drin. Ein Klick auf "das kommt raus" zeigt die Aktion / Reaktion des Tierchens an sich in modalen Dialogboxen, d. h. das Ergebnis: als Beispiel siehe im Folgenden die 6er Bildfolge.
b.) Was passiert bei Klick auf "das kommt raus"?
Sobald der Besucher hier bei Snippet 1 den Button "das kommt raus" klickt, öffnet sich die Datei mit dem platzierten Tierchen als modale Dialogbox über der eigentlichen Seite. Dass diese Box eine bestimmte Größe hat (450 x 450 px), ist mittels des "das kommt raus"-Buttons festgelegt. Er trägt das Onclick-Event onclick="window.showModalDialog(...);" und nennt die zu öffnende Datei samt Größe.
In dieser Datei, die sich über der eigentlichen Seite öffnet, liegt das Tier-Bild und der Javascript-Code, der die folgenden "Aktionen" bzw. "Reaktionen" des Tierchens generiert:
function begruessen() {
var benutzer = prompt("Wie heißt du?", "Gib deinen Namen ein.");
if (benutzer) {
alert("Freut mich, Dich kennen zu lernen, " + benutzer + ".");
document.getElementById("tierchen").src = "images/tier_gluecklich.png";
}
}
function begruessen() {
var benutzer = prompt("Wie heißt du?", "Gib deinen Namen ein.");
if (benutzer) {
alert("Freut mich, Dich kennen zu lernen, " + benutzer + ".");
document.getElementById("tierchen").src = "images/tier_gluecklich.png";
}
}
c.) Was hat es mit dem Button "das steckt drin" auf sich?
Ganz einfach: Wie der Name schon sagt, öffnet sich eine Textbox. Aus der heraus kann nun der gesame Quelltext kopiert, bei Wunsch in ein eigenes Dokument eingefügt und so die Übung nachgemacht und nachvollzogen werden.
Ein Tag im Leben des Berndt | Frühjahr 2013
Berndt ist ein blaues Wesen mit Kugelkopf (doch ohne Ohren). Er ist sehr entscheidungsfaul, wie man auf der ersten Seite lesen kann. Deshalb lädt diese Site zu einem Spiel ein: statt Berndt soll der Nutzer/Betrachter Berndts Entscheidungen treffen. Der Nutzer kann steuern, was mit Berndt passiert.
So geht es los:
Initialisiert wird das Spiel durck Klick auf Button 1 oder 2. Egal, welcher geklickt wird, die Startszene ist gleich: Berndt, schlafend unter Sternen. Der Text erörtert die Situation: Berndt habe bereits 6 Tiefschlafphasen durchlaufen, sei knapp einem Alptraum entronnen... nun stelle sein Unterbewusstsein die Frage, ob Berndt nun endlich aufwachen (=Button 1) oder immer noch weiterschlafen solle (=Button 2).
So geht es weiter:
Sobald der Nutzer sich für eine Alternative entschieden und Button 1 oder 2 geklickt hat, kommt die nächste, seiner Entscheidung entsprechende Szene: ein Bild zur Illustration samt Beschreibung. Wieder werden 2 Handlungsalternativen geboten, u.s.w. und so fort... - Je nach Entscheidungen des Nutzers geht Berndts Tag in sehr unterschiedliche Richtungen; in die Stadt, auf's Land, in's Gebirge... es gibt offene Enden, ein Happy End oder ein Unglück - es kommt darauf an, wie der Nutzer entscheidet. Jederzeit kann das Spiel durch Klick auf "Neustart des Tages" neu begonnen werden.
Hier die megagroße Übersichtsgrafik: Das Storyboard von Berndts Tag als Bild.
Die Entscheidungsstruktur im Hintergrund ist so konzipiert, dass auf ganz verschiedene Weise zu einer Szene gelangt werden kann. Durch entsprechende Entscheidungen des Nutzers kann es auch sein, dass er mehrere Male während eines Spieldurchganges auf dieselbe Szene trifft.
Beispielsweise gibt es relativ spät an Berndts Tag die Situation, dass ein böses Erlebnis sich lediglich als Alptraum entpuppt - und so trifft man Berndt wieder in seinem Bett, über diesen seltsamen Traum nachsinnend. Die jeweiligen Situation-erklär-Texte sind dann natürlich anders - angepasst an den variierten Entscheidungsweg, der hier hin führte...
Theoretisch und praktisch ist es sogar möglich, dass sich der Nutzer ewig in Berndts Tag aufhält. Die Geschichte ist im Hintergrund sozusagen wie eine Endlosschleife gestrickt - es kann ein Ende geben, muss aber nicht.
Alle Illustrationen zu Berndts Tag:
Berndt schläft
Ein schöner Traum in Rosa mit fluffy Mini-Berndts
Böses Alptraummonster will Berndt verspeisen
Berndt sinnt über Traum nach
Berndt ist skeptisch wegen Ei-Form
Berndts Magen revoltiert wegen Frühstücksei
Berndt weiß nicht wo er lang soll
Stadt ist gesperrt - Berndt genervt
Dunkles Wäldchen lockt und ängstigt zugleich
Soll Berndt die Berge erklimmen oder nicht?
Was hockt da hinterm Baum?
Bösartiger Gnom wollte Aufmerksamkeit
Gnom war in Echt nämlich DOCH lieb
Das war ein schöner Tag, Berndt!
Übrigens... Berndts Geschichte findet in einer einzigen HTML-Datei statt, die eine gewaltige Javascript Switch-Case-Fallentscheidung (If-Else-Schleife) beherbergt. Beim Klicken durch die Story - bei jedem Klick - wird diese Schleife durchlaufen. Alle Inhalte, also die verschiedenen Texte und die Illus, werden beim Durchlauf der Schleife ausgetauscht - je nachdem, welcher Case (ausgelöst durch Klick des Nutzers) eingetreten ist. Diese "Herstellungsweise" setzt ein komplexes Storyboard voraus, das zuerst auf dem Papier entworfen wurde.
Das Spannende ist, dass verschiedene Wege zu denselben Szenen (-bildern) führen. Da die Voraussetzungen, die zu einer Szene führen, variieren, gibt es bei 14 verschiedenen Szenenbildern fast doppelt so viele Situation-erklär-Texte (26). Bei Berndt besonders zum Tragen kommt also sowohl meine (strukturierte) Fabulierkunst sowie natürlich die Liebe zur Gestaltung der zum Teil sehr aufwendigen Illustrationen.