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.
Die Idee, das Spiel in einer Online-Variante zur Verfügung zu stellen, wurde aufgrund einer Nachfrage geboren,
die mir im Rahmen dieses <canvas>
-Projekts gestellt wurde. Zunächst wurde es derart umgesetzt, dass jeder Figur ein
<canvas>
-Element spendiert wurde. Nachteilig war die dadurch entstehende rechteckige Grundstruktur und die damit
einhergehenden Probleme beim Selektieren von nicht-rechteckigen Elementen.
Nachdem eine Routine implementiert wurde, die es ermöglicht, zu erkennen, ob sich der Mauszeiger über einer
Figur befindet, wurde der Programmcode neu geschrieben. Es befinden sich nun alle Polygone innerhalb des
<canvas>
-Elements und wurden mit den notwendigen Drag-and-Drop- sowie Drehfunktionalitäten ausgestattet.
Die verfügbaren Möglichkeiten, das Spiel zu steuern, finden sich in der nachstehenden Liste.
Dabei gilt:
• Element = Quadrat, Dreieck, Parallelogramm
• Figur = Kombination der zur Verfügung stehenden Elemente
Die Tangram-Elemente (Dreiecke, Quadrate, Parallelogramme) werden in einer Polygron-Kollektion zur Verfügung gestellt.
objPoly = {'key_1': {/* 1. Element */}, 'key_2': {/* 2. Element */}, // ... weitere Polygon-Objekte 'key_n': {/* n. Element */} };
In jeder Komponente der Polygon-Kollektion ist ein Einzelelement (Polygon-Objekt) enthalten, welches eine Figur (Dreieck, Quadrat, Parallelogramm) beschreibt.
Die Eigenschaften, die ein Polygon beschreiben, werden im Folgenden genau beschrieben.
Ein Polygon wird durch seinen Schwerpunkt (Position), seine Eckpunkte und seiner Drehung definiert. Der Schwerpunkt wird beim Zeichnen des Elements zum Koordinatenursprung (0, 0). Die Eckpunkte werden in Abhängigkeit des Ursprungs angegeben, ebenso die Lage (Drehung).
Mit:
[x_off, y_off] = [w/2, h/2] [x0,y0] = [-w/2, -h/6] [x1,y1] = [w/2, -h/6] [x2,y2] = [0, h/3] phi = 0
Zunächst wird der grundsätzliche Aufbau eines Polygon-Objekts gezeigt.
'key_0': {off: [x_off, y_off], coords: [[x_0, y_0], [x_1, y_1], ..., [x_n, y_n]], color: [r, g, b, a], phi: grad_winkel[,lsg: ['key_1', .. , 'key_n']]}
Dabei gilt:
Eindeutiger Schlüssel, über den die Polygonkomponente referenziert werden kann
Datentyp: string
Koordinaten des Schwerpunkts im <canvas>
-Element
Datentyp: array
Array, das die Koordinaten der Eckpunkte des Polygons enthält
Datentyp: array
Farbe, mit der das Polygon gefüllt werden soll.
Hierbei gilt: r=rot (0..255), g=grün (0..255), b=blau (0..255), a=Transparenz (0.0 .. 1.0)
Datentyp: array
Drehwinkel des Elements
Datentyp: integer
Schlüssel gleichgeformter Elemente (Polygone), deren Position ebenfalls als Lösungsmöglichkeit in Frage kommen.
Datentyp: array of strings
<canvas>
-Elements platziert.translate(x_off, y_off)
lineTo(x_i, y_i), mit i=0…n
Das Tangram-Objekt qpTangram stellt für das Spiel das <canvas>
-Element sowie zahlreiche Methoden
zur Verfügung, mit deren Hilfe das Arbeit mit den enthaltenen Polygonen sowie deren Manipulation ermöglicht wird.
var objCvs = qpTangram([id], [optionen]);
Beim Initialisieren können folgende Argumente übergeben werden:
Wird eine ID übergeben, wird das zugehörige Element zum
Container, der das <canvas>
-Element mit den Tangram-Figuren enhält.
Datentyp: string
Über optionen können Verhalten, Aussehen und Eigenschaften des Tangram-Objekts beeinflusst werden. Es stehen hierfür nachstehende Eigenschaften zur Verfügung.
Datentyp: object
Folgende Optionen stehen zum individuellen Konfigurieren des qpCanvas-Objektes zur Verfügung.
ID des Holderelements
Datentyp: string
Breite des <canvas>
-Elements in Pixeln (default: 300)
Datentyp: integer
Höhe des <canvas>
-Elements in Pixeln (default: 300)
Datentyp: integer
vertikaler Abstand des <canvas>
-Elements zum Holder-Element in Pixeln (default: 0)
Datentyp: integer
horizontaler Abstand des <canvas>
-Elements zum Holder-Element in Pixeln (default: 0)
Datentyp: integer
z-Index des <canvas>
-Elements (default: 1)
Datentyp: integer
CSS-Klasse zum Auszeichnen des Canvas-Elements (default: null)
Datentyp: string
zum Canvas gehörendes Polygon-Objekt
Datentyp: object
Winkel in Grad, um den eine Figur gedreht wird (default: 45)
Datentyp: float
Transparenz des aktiven Elements (default: 0.5)
Datentyp: float
Linienstärke um aktives Element (default: 2.0)
Datentyp: float
Gibt an, ob Polygone in ihrer Lage und ihrem Drehwinkel beim Initialisieren zufällig (true) oder wie im Objekt vorgegeben (false) in den Context gezeichnet werden. (default: false)
Datentyp: boolean
Gibt an, ob das aktive Polygon immer grafisch hervorgehoben werden soll. (default: true)
Datentyp: boolean
Zeigt die Lösungsform an (true) oder nicht (false). (default: true)
Datentyp: boolean
Transparenzwert der Lösungsform, 0.0 .. 1.0. (default: 0.5)
Datentyp: float
Toleranz in Pixeln, die ein Polygon neben der Zielkoordinate abgelegt werden darf. (default: 20)
Datentyp: integer
Geschwindigtkeit beim animierten Drehen - kleiner = schneller. (default: 10)
Datentyp: integer
Zeigt in der Lösungsform die Linien der Polygone an (true) oder nicht (false). (default: false)
Datentyp: boolean
Funktion, die nach der Translation/Rotation ausgeführt werden soll
Datentyp: function
Das zurückgegebene Objekt objCvs
stellt die nachstehenden Methoden zur Verfügung:
Löscht den Inhalt des <canvas>
-Elements
Datentyp: function
Zeichnet das zugehörige Polygon in das <canvas>
-Element
Datentyp: function
Erhöht den Drehwinkel der zugehörigen Figur um den übergebenen Winkel phi
(im Gradmaß).
Datentyp: function
Versorgt das Tangram-Objekt mit einer neuen Polygon-Kollektion (objPoly
).
Zudem kann optional ein Optionen-Objekt optionen
wie oben beschrieben gegeben werden,
um das Verhalten des Spiels zu manipulieren.
Datentyp: function
Das Script wurde in folgenden Browsern erfolgreich getestet.