Legekartenspiel Twins V01
 HomeSpielkram • Twins V01 Download  Demo  Quellcode 

Twins V01 - 16 Kärtchen  100 × 100 Pixel

Legekartenspiel für 8 Kartenpaare. Die Motive der Karten können Sie durch eigene Grafiken festlegen. Wenn sie für den Adventskalender 07 eigene Grafiken hergestellt haben, können Sie die 100 x 100 Pixel großen Grafiken auch für ein Legekartenspiel verwenden.
Spielkram Games Browsergame Quiz Karten Twins

Legekartenspiel für 16 Kärtchen - Script-Version vom 20.12.2014

Natürlich ist ein solches Legekartenspiel auch außerhalb der Weihnachtszeit (selbstverständlich mit passenden Grafiken) eine Bereicherung für eine Kinder- oder Schulseite oder Sie präsentieren ihre Fotos einmal in anderer Form.

Legekartenspiel Twins Legekartenspiel Twins


Es muss ja nicht immer ein teures Spiel sein. Warum also nicht einmal ein simples Legekartenspiel für den Junior, die Enkeltochter oder Neffen auf der Festplatte ablegen? Wenn sie dann noch eigene Fotos verwenden und das Legekartenspiel auf CD schreiben wäre das doch eine Geschenkidee nicht nur für kleinere Kinder.

Die Größe der Grafiken in der Demo des Downloads habe ich mit 100 × 100 Pixel festgelegt. Das könnten Sie anpassen. Sie benötigen 8 Grafiken um Ihr eigenes, individuelles Legekartenspiel zu erstellen.


Vorschau und Demo Twins V01 - Kartengröße 80 × 80 Pixel



     

  Hier in meiner Demo verwende ich farbige Grafiken mit stilisierten Tiermotiven.

Deckblatt:



Karten:




meine Modifizierungen für dieses Script-Modul

Das originale Script von Brian Gosselin habe ich modifiziert. Damit sollten nun auch weniger versierte Webmaster in der Lage sein, eigene Grafiken einzubinden. Außerdem habe ich CSS-Formatierungen eingesetzt, um das Layout ein wenig zu verfeinern.

a) Pfadangaben für Grafiken zentralisiert
b) Eintrag für Grafiken zentralisiert
c) Grafiktyp-Eintrag (gif/jpg) zentralisiert
d) Größenangaben für Grafiken als Variable
e) Randformatierung der Grafiken mit CSS
f) Zeitanzeige/Counter im Textfeld
g) Startbutton hinzugefügt
h) Zähler für die Anzahl der Versuche
i) Ergebnisausgabe als Text
j) Formularfeld-Formatierung mit CSS
k) Script validiert + bereinigt


Geringer Aufwand für den Webmaster

Sie können das fertige Modul mit meinen Grafiken (im Download enthalten) gleich einsetzen. Das Modul kann in eine Seite integriert oder ganzseitig dargestellt werden.

Beispiel herunterladen
ZIP-Datei entpacken
in eine HTML-Seite einkopieren
optional 8 eigene Grafiken einbinden





Legekartenspiel Twins



Twins V01 01 Weihnachtmotive Vorschau    Download
Twins V01 02 Fotomotive Vorschau    Download
Twins V01 04 Braintwister Demo   hoher Schwierigkeitsgrad
Twins V01 05 Fotos Mäuse Demo   mit Grafiken 150 x 150 Pixel




Aufbau der Darstellung

Bei meiner Modifizierung habe ich den Aufbau der Darstellung innerhalb von Tabellenzellen erst einmal belassen. Eine Positionierung der 16 Grafiken in DIV-Bereichen wäre ein nächster Schritt. Innerhalb eines HTML-Formulars, das benötigt wird um in einem Textfeld z.B. die Zeitanzeige zu realisieren, generiert ein JavaScript den Aufbau der Tabelle mit den Mem-Kärtchen. Das geschieht nach dem Zufallsprinzip und stellt eine immer andere Position der Kärtchen für jedes neue Spiel sicher.

Zu Beginn des Spieles werden 16 Startgrafiken angezeigt. Nach dem Anklicken von 2 Kärtchen findet eine Kontrolle der Übereinstimmung statt. Bei gleichen Kärtchen bleiben die Motive aufgedeckt, bei ungleichen Kärtchen werden die 'Vorderseiten' der beiden Karten nach einer Verzögerung wieder ausgeblendet .


eingesetzte Grafiken

Die im Beispiel verwendeten Grafiken sind 100 x 100 Pixel groß und unter Dateinamen mit fortlaufender Endnummer in einem Unterordner abgelegt (Beispiel: 'memory00.gif' bis 'memory08.gif'). Wenn Sie eigene Grafiken verwenden möchten ersetzen Sie die im Download enthaltenen Grafiken durch ihre eigenen.

Benötigt werden 9 Grafiken, wobei die Grafik mit der Ziffer '0' (Null) am Ende des Dateinamens für das nicht aufgedeckte Kärtchen verwendet wird. Siehe Grafik rechts oben. Die restlichen Grafiken haben die Ziffern '1' bis '8' am Ende des Dateinamens.

Ihrer Phantasie sind keine Grenzen gesetzt. Verwenden Sie eigene Fotos, das Schullogo oder Bildausschnitte die das Thema ihrer Webseite widerspiegeln. Für einen Start sind im Download meine Grafiken enthalten die Sie gerne (aber ausschließlich für das Legekartenspiel) verwenden dürfen.


Bildquelle Fotos + Grafiken: Eigene Werke







Größe der Kacheln als Variable im Script

Im Gegensatz zur Originalversion des Scripts habe ich Variablen für die Größenangaben der Bildkärtchen definiert. Die Angaben für Breite und Höhe werden nun an zentraler Stelle notiert. Die Bildränder sind nun über CSS formatiert.

Die Größe der Grafiken in meiner Demo 01, Demo 02 und Demo 03 ist 100 × 100 Pixel. Um Ihnen die Möglichkeiten der Anpassung aufzuzeigen verwende ich in der Demo 05 Bildkärtchen mit den Abmessungen 150 × 150 Pixel. Bedenken Sie bei der Auswahl eigener Grafiken mit abweichenden Größen, dass die Abmessungen des Spiels möglichst den Anzeigebereich eines Bildschirms nicht überschreiten sollten.
// hier die Breite für die Grafiken eintragen
var dbreite = 100;

// hier die Höhe für die Grafiken eintragen
var dhoehe = 100;



Dateiname und Pfad eintragen

Anpassungen im Script

Wie ich oben bereits erwähnte habe ich das Script modifiziert. Während im originalen Script die Informationen für die verwendeten Grafiken mehrmals an unterschiedlichen Stellen eingetragen werden mussten, notieren Sie nun die Angaben für den Dateipfad, den Dateinamen, die Dateiendung 'gif'; 'png' oder 'jpg' und die Größenangaben ganz zentral an nur einer Stelle.

Die Informationen zu den verwendeten Grafiken werden nun gleich in den ersten Zeilen des Scripts eingetragen. Voraussetzungen: Der Dateiname für die leere Kachel hat die Endziffer '0', die Dateinamen für die 8 anderen Grafiken die Endziffern "1" bis "8"

Beispiele für die vergebenen Dateinamen:

bildchen0.gif - bildchen8.gif
grafik00.jpg - grafik08.jpg
memory00.gif - memory08.gif

In meinem ersten Beispiel habe ich die Grafiken mit memory00.gif bis memory08.gif bezeichnet. Wenn Sie es dabei belassen und die Dateinamen nicht ändern, müssen Sie auch keine Änderungen im Script vornehmen. Wenn Sie andere Dateibezeichnungen verwenden möchten oder die Grafiken in einem anderen Ordner abgelegt haben, gehen Sie folgendermaßen vor:

Finden Sie im Quellcode diese Zeilen und tragen die Angaben für Ihre Grafiken ein!
// hier den Pfad für die Grafiken eintragen
var dpfad = 'images/';

// hier den Namen ohne die letzte Ziffer für die Grafiken eintragen
var dname = 'memory0';

// hier Punkt und Dateiendung für die Grafiken eintragen (.gif / .jpg)
var dende = '.gif';

// hier die Breite für die Grafiken eintragen
var dbreite = 100;

// hier die Höhe für die Grafiken eintragen
var dhoehe = 100;



Rand der Grafiken formatieren

Sie können für die einzelnen Grafiken den Rand mittels CSS-Angaben formatieren. Der Default-Wert ist: 1 Pixel, duchgezogene Linie, grau

Ändern Sie die Angaben im CSS-Block wenn Sie das möchten.
.grafik {
border:1px solid #9F9F9F;
}


Leere Kacheln zum Download

Abhängig vom verwendeten Grafiktyp für Ihre eigenen Grafiken ('gif' oder 'jpg') benötigen Sie als leere Kachel natürlich entweder eine GIF-; PNG- oder JPG-Grafik. Hier eine Möglichkeit zum Download (rechtsklicken). Im Download sind alle 100 x 100 Pixel großen Grafiken bereits enthalten!

GIF
100 x 100


blau00.gif


rot00.gif


dunkelgrau00.gif


grau00.gif
JPG
100 x 100


blau00.jpg


rot00.jpg


dunkelgrau00.jpg


grau00.jpg
PNG
100 x 100


memory00.png
- - -
Kacheln
150 x 150


gif


jpg


jpg
-






Button-Grafiken kostenlos in meiner Mini-Image-Box

Ich habe unterschiedliche Sätze unbeschrifteter Button-Grafiken für Menüs zum Download hochgeladen. Die Auswahl soll später noch erweitert werden. Wenn sie möchten, können Sie also weitere, eigene Varianten des Menüs mit diesen Grafiken erstellen.

Eine große Auswahl selbst erstellter Symbole und Mini-Grafiken finden Sie in meiner Mini-Image-Box, die Grafik-Werkstatt der Web-Toolbox. Die Auswahl umfasste 2016 bereits 9000 Grafiken.

⏵Mini-Image-Box - kostenlose Grafiken  

⏵Mini-Image-Box - Menübuttons  





Zum Schluss noch ein rechtlicher Hinweis!

Dieses Legekartenspiel ist nicht zu verwechseln mit dem Spiel 'Memory', für das ein Hersteller die Markenrechte hält (und ein Anwaltsbüro 2003 kräftig abgemahnt hat). Daher sollte das Spiel auch auf ihrer Seite nicht 'M....' heißen.

Deshalb heißt meine Version auch "Twins" (engl. Zwillinge)

(Mal sehen, möglicherweise lasse ich mir nächste Woche einen Gebrauchsmusterschutz für das Einatmen eintragen. Lizenzen können sie dann bei mir erwerben).





Das könnte Sie auch interessieren: