Seiteninhalt

• Projekte
• <canvas> (HTML5-Element)
• Breakout
• Kreuzworträtsel
• x Gewinnt
• Tangram
• Funktionsplotter
• JavaScript-Fun
• HTML-Design
• Fehler im Spiegel

Projekte

Seit ich mich mit Webdesign und -entwicklung beschäftige, sind einige Projekte entstanden. Manche zum Zweck des Lernens, andere einfach nur, um mich austoben zu können. Die für mich wichtigsten will ich hier präsentieren.

Canvas (HTML5-Element)

Mit <canvas> wurde ursprünglich für das Mac OS X ein grafisches Element entwickelt, das wenig später auch in den Browser Safari implementiert wurde. Mittlerweile wurde es von WHATWG und W3C in die Spezifikationen für HTML5 aufgenommen.

Dieses Element bietet die Möglichkeit, dynamisch erstellte Bitmaps zu rendern. Als Hilfsmittel kann hierzu eine Scriptsprache verwendet werden - im Projekt wurde JavaScript eingesetzt.

Motivation dieses Projekt umzusetzen und eine deutsche Dokumentation an- zubieten, ergab sich aus der Tatsache, dass das <canvas>-Element und die vielfältigen Möglichkeiten, die es eröffnet, im deutschsprachigen Raum bisher kaum Beachtung fanden.

Seit dem 19. September 2009 ist die Dokumentation bei Wikipedia unter dem Thema Canvas (HTML-Element) in den Weblinks aufgeführt.

Breakout

Realisiert wurde der Spielhallen-Klassiker Breakout von Atari als JS-Spiel.

Ziel des Spiels ist es, mit dem Schläger den Ball so zu lenken, dass alle farbigen Blöcke getroffen werden. Jeder Farbe entspricht dabei einem Punktwert:
gelb (5 Punkte), orange (10 Punkte), rot (15 Punkte), violett (20 Punkte), blau (25 Punkte), grün (30 Punkte) und grau (unzerstörbar, 0 Punkte).

Um das Spiel vernüftig spielen zu können, sollte der Cache des Browsers so eingestellt sein, dass er nicht jede Datei neu vom Server lädt. Wie sie dies erreichen, hängt vom verwendeten Browser ab.

Kreuzworträtsel

Bereits während meiner Kindheit bereitete mir das Lösen von Kreuzworträtseln großen Spaß. Ob alleine oder gemeinsam mit anderen, es war jederzeit unterhaltsam und kurzweilig.

Die Leidenschaft zu diesem Zeitvertreib hat mir letztendlich inspiriert, eine Onlinevariante zu implementieren. Ziel war eine Anwendung, die in allen gängigen Browsern läuft. Weiterhin sollte die Möglichkeit existieren, unterschiedliche Rätsel zu präsentieren.

Um die benötigten Informationen zu den Rätseln in einem möglichst schlanken und universellen Datenformat zur Verfügung zu stellen, wurde auf JSON zurückgegriffen. Durch den Einsatz von AJAX-Routinen wurde es zudem möglich, neue Rätsel ohne ein Neuladen der Seite anzubieten. Der Benutzer erhält somit den Eindruck einer kontinuierlichen Anwendung.

Um das Projekt umzusetzen, wurde das JavaScript-Framework jQuery eingesetzt.

Viel Spaß beim Rätseln!

x Gewinnt

Bei dem Spiel handelt sich um eine Abwandlung von 4 Gewinnt. Allerdings kann die Spielfeldgrösse, sowie die Anzahl der Steine, die zum Gewinnen notwendig sind, individuell eingestellt werden.

Die Idee zum Spiel wurde geboren, als in einem Forum die Frage nach einem Algorithmus gestellt wurde, mit dem Tic Tac Toe möglichst einfach auf Gewinnreihen überprüft werden sollte. Da ich an einer möglichst allgemeinen Lösung interessiert war, entstand eine Routine, mit der eine beliebige Anzahl an Spielsteinen getestet werden kann, ob sie dem Gewinnkriterium entspricht.

Tangram

Tangram ist ein altes chinesisches Legespiel, das Anfang des 19-ten Jahrhunderts auch in Europa und Amerika Verbreitung fand. Ziel des Spiels ist es, aus den sieben Einzelfiguren ein Quadrat zu legen.

Das Spiel wurde mit Hilfe des HTML 5 Elements canvas umgesetzt.

Die Idee, das Spiel in einer Online-Variante zur Verfügung zu stellen, wurde aufgrund einer Nachfrage geboren, die mir im Rahmen meines canvas-Projekts gestellt wurde. Bei der Umsetzung wurde jeder Einzelfigur ein Canvas-Element spendiert. In diesem erfolgen die benötigten Drehungen. Um die Bewegung der Figuren zu realisieren, wurden die HTML-Elemente mit einer Drag and Drop Funktionalität versehen.

03. März 2010: Update des Spiels
Es werden nun alle Polygone in ein einziges Canvas-Element gezeichnet. Ermöglicht wurde dieses Vorgehen, da eine Klickerkennung (Punkt in Polygon) für das Canvas-Element implementiert wurde. Damit wurde das gezielte Ansteuern einzelner Elemente komfortabler.

Funktionsplotter

Der Plotter wurde als Visualisierungswerkzeug entwickelt

Weil während der Entwicklungsarbeit zu einem Projekt häufiger Kurvenver- läufe einfacher Funktionen benötigt wurden, entstand ein einfacher Funktionsplotter.

Eine Funktion wird in einem vorge- gebenen Intervall untersucht. Ermittelt werden die Funktionswerte anhand einer übergebenen Schrittanzahl, die lokalen Extremas (Maximum und Minimum), sowie die Nullstellen. Letzteres kann ebenfalls durch die Anzahl der Untersuchungsintervalle beeinflusst werden.

Letztendlich wird der Graph mit den ermittelten Werten ausgegeben.

JavaScript-Fun

Ein Layout, das als Spielerei verstanden werden soll. Es wurden viel JavaScript integriert, so dass ein Praxiseinsatz wohl eher unwahr- scheinlich bleiben wird.

Besondere Features sind die freie Beweglichkeit der Navigation, das Ein- und Ausfaden des Contentes in der Mittel sowie das Stretchen des rechten Bereiches, wenn sich der Inhalt ändert.

Es hat mir riesengroßen Spaß gemacht, alles zu implementieren - einfach mal richtig austoben!

HTML-Design

In den ersten Monaten im Jahr 2000 weckte ein seiten- starkes Kompendium über HTML 4 mein Interesse für die Auszeichnungssprache des Internets. Irgendwann habe ich begonnen, alles Interessante sowie Tipps und Tricks rund um das Webdesign und die Webentwicklung zusammenzutragen. Um die gesammelten Informationen besser auffinden zu können, habe ich eigens dieses HTML-Projekt ins Leben gerufen. Da der Informationsgehalt im Vordergrund stand, wurde bei der Umsetzung weniger auf Optik und Design Wert gelegt.

Da ich zu Beginn des Projektes weder Wissen über mySQL noch PHP besaß, ist es auf kein Datenbanksystem aufgesetzt. Wenn ich allerdings die Zeit finden sollte, werde ich mich dessen annehmen, da der Umfang langsam eine manuelle Pflege zu Qual werden lässt.

Fehler im Spiegel

Realisiert wurde ein kleines selbst programiertes JavaScript-Spiel.

Ziel des Spiels ist es, ein verkehrt an- geordnetes Symbol zu finden. Auf der linken Seite befinden sich kleine Bilder, die die Orginale darstellen. Im rechten Bereich sind die Duplikate der Symbole horizontal gespiegelt.

Bis auf eins - das gilt es zu finden!