Ergebnis 1 bis 11 von 11
  1. #1
    lachgummi09 ist offline Grünschnabel
    registriert
    17-07-2009
    Beiträge
    2

    Question Memory Spiel vom Urschleim an

    Hallo ihr Lieben,
    bin ganz motiviert und möchte gern ein Memory-Spiel erstellen. Leider habe ich nur Grundkenntnisse in Javascript und bisher habe ich nur einen BildWECHSEL realisiert bekommen. :o

    Das Memory soll die Funktionen erfüllen, dass es zwei zusammengehörige Karten erkennt (klar^^), wobei ein Pärchen aus zwei unterschiedlichen Bildern besteht und nicht aus zwei identischen (also nicht aus derselben datei). Weiterhin wär ein Mischen der Karten beim Neustart gut und ein Timer, der die Karten nur für einige Sekunden anzeigen lässt.

    Das wär super lieb, wenn mir jemand von euch helfen könnte. Bin wie gesagt gerade am Anfang und hab versucht aus Quelltexten bestehender Memory-Spielseiten schlau zu werden, aber dafür fehlen mir wohl noch einige Kenntnisse.

    Habt ihr zudem vielleicht noch eine Buchempfehlung zum Selbstlernen?

    Also habt vorab schon mal vielen Dank!!

  2. #2
    tobias7777777 ist offline Eroberer
    registriert
    02-06-2008
    Beiträge
    72

    AW: Memory Spiel vom Urschleim an

    Also eine Möglichkeit wäre jede karte als einen 2 dimensionalen Array anzusehen.
    also zum Beispiel so:
    PHP-Code:
    var karte = new Array()
    var 
    anzahlkarten=16
    for(var i=0;i<anzahlkarten;i++){
    karte[i]=new Array()

    jetzt überlegst du dir wie du die arrays "behandeln" willst.

    Dazu legst du ne .js-Datei an,
    in der du jede Karte definierst, zum Beispiel so:
    PHP-Code:
    karte[0][0]=//position der karte
    karte[0][1]="http://forum.jswelt.de/images/0.jpg" //absoluter Pfad zu deinem Bild das zu der Karte   //gehöhrt. (Falls du nicht weist was mit absolut gemeint ist, einfach mal //googlen
    karte[0][2]=//Karte die zu dieser Karte passt
    karte[0][3]=//eigene Id der Karte 
    Das oben ist jetzt vielleicht nicht die einfachste lösung schongr nicht für einen Anfänger, aber halt ne Möglichkeit.

    Das was jetzt kommt ist wohl das komplizierteste am ganzen script, aber wenn du das nachvollzogen hast, kannst du wirklich ohne probleme den rest des scriptes selber schreiben.

    Code:
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="0" style="position:absolute;left:0;top:0" onClick="karteaufdecken(this.id)">
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="1" style="position:absolute;left:100;top:0" onClick="karteaufdecken(this.id)">
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="2" style="position:absolute;left:200;top:0" onClick="karteaufdecken(this.id)"> 
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="3" style="position:absolute;left:300;top:0" onClick="karteaufdecken(this.id)">
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="4" style="position:absolute;left:0;top:100" onClick="karteaufdecken(this.id)"> 
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="5" style="position:absolute;left:100;top:100" onClick="karteaufdecken(this.id)"> 
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="6" style="position:absolute;left:200;top:100" onClick="karteaufdecken(this.id)"> 
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="7" style="position:absolute;left:300;top:100" onClick="karteaufdecken(this.id)"> 
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="8" style="position:absolute;left:0;top:200" onClick="karteaufdecken(this.id)">
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="9" style="position:absolute;left:100;top:200" onClick="karteaufdecken(this.id)">
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="10" style="position:absolute;left:200;top:200" onClick="karteaufdecken(this.id)">
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="11" style="position:absolute;left:300;top:200" onClick="karteaufdecken(this.id)">
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="12" style="position:absolute;left:0;top:300" onClick="karteaufdecken(this.id)">
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="13" style="position:absolute;left:100;top:300" onClick="karteaufdecken(this.id)">
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="14" style="position:absolute;left:200;top:300" onClick="karteaufdecken(this.id)">
    <img src="http://forum.jswelt.de/images/rueckseite.jpg" id="15" style="position:absolute;left:300;top:300" onClick="karteaufdecken(this.id)">

    Du kannst das auch in ner Tabelle lösen damit kenn ich mich aber nicht so gut aus. Desswegen hab ich dir jetzt die Variante gezeigt. Tabelle wär aber wahrcheinlich übersichtlicher.

    Jetzt schreibst du dir noch ne function:

    PHP-Code:
    <script>
    var 
    akkarte=new Array()
    var 
    j=0
    function karteaufdecken(id){

    akkarte[j]=karte[id][3]
    j++

    if(
    j==2){
    if(
    karte[akkarte[0]][2]==akkarte[1]){
    document.getElementById(akkarte[0]).src=karte[akkarte[0]][1]
    document.getElementById(akkarte[1]).src=karte[akkarte[1]][1]
    alert("Paar!")

    }else{
    document.getElementById(akkarte[0]).src="http://forum.jswelt.de/images/rueckseite.jpg"
    document.getElementById(akkarte[1]).src="http://forum.jswelt.de/images/rueckseite.jpg"
    }
    j=0
    }

    }

    </script> 
    Jetzt musst dus nur noch hinbekommen das nach jedem klick auf ein Bild das angezeigt wird, sollte aber nach dem obrigen code einfach sein.

    Ich hab den Code nicht getestet, daher kann es sein das er fehlerhaft ist. Das ding hab ich jetzt ja auch ohne groß drüber nachzudenken geschrieben da ich so was ähnliches vor kurzem erst selbst geschrieben hab (Doppelkopfspiel).

    setTimeout() ist noch ne sinnvolle function für dein script
    Geändert von tobias7777777 (17-07-2009 um 22:52 Uhr) Grund: Übersichtlichkeit

  3. #3
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501

    AW: Memory Spiel vom Urschleim an

    Ich habe das Konzept von tobias nur mal so grob überflogen, aber ein Paradebeispiel ist das nicht gerade.

    Prinzipiell solltest Du Dir darüber klar sein, dass Du mindestens drei Komponenten brauchst:
    - Datenstruktur
    - Logik
    - Darstellung

    Alle Teile sind wichtig und greifen ineinander. Eine gute Datenstruktur erleichtert nicht nur die Logik, sondern auch die Darstellung, wohin die Darstellung unabhängig von der Logik sein sollte, damit man diese beliebig ändern kann.
    Alles aus Arrays zusammenzubauen, weil man sich nur mit Arrays auskennt, mag zwar wie eine tolle Idee aussehen, aber eine solche Lösung ist nur dann vorzuziehen, wenn es keine bessere gibt. Javascript bietet eine solche, also ist ein Vorschlag mit einem zweidimensionalen Array pro Karte Humbug.

    Sicherlich wird Dein erster Entwurf nicht perfekt sein, aber wenn Du versuchst die drei genannten Teile zu trennen (auch gedanklich), dann stimmt die grobe Richtung schon mal.
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  4. #4
    lachgummi09 ist offline Grünschnabel
    registriert
    17-07-2009
    Beiträge
    2

    AW: Memory Spiel vom Urschleim an

    hm... verwirrt*... danke auf jeden Fall für die Hilfe, werds trotz kritischer Worte einfach mal ausprobieren und sehen wie weit ich komme

    DANKE

  5. #5
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501

    AW: Memory Spiel vom Urschleim an

    Zitat Zitat von lachgummi09 Beitrag anzeigen
    werds trotz kritischer Worte einfach mal ausprobieren und sehen wie weit ich komme
    Die kritischen Worte waren mehr an den Lösungsvorschlag von tobias mit den vielen Siebenen gerichtet, als an Dich.
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  6. #6
    tobias7777777 ist offline Eroberer
    registriert
    02-06-2008
    Beiträge
    72

    AW: Memory Spiel vom Urschleim an

    Mein Lösungsvorschlag sollte aber trotz der eventuelle Unübersichtlichkeit funktionieren. Und stimmt es zwar das ich bis jetzt noch nichts mit tabellen und selbstdefinierten-objekten viel gemacht hab, diese habe ich bis jetzt aber auch nicht gebraucht.
    Ich habe probiert einem Anfänger mit so wenig wie möglich neuen sachen zu zeigen wie (einfach) man ein Spiel programmieren kann. Und da finde ich es wirklich unangebracht, diesen lösungsVORSCHLAG schlecht zu reden und noch nicht einmal bessere Varianten vor zuschlagen.

    Stattdessen sagst du ihm nur wie verschiedene Dastellungsweisen am besten in ein andergreifen, was meiner meinung nach grade für einen Anfänger verwirender ist, als sich durch einen (funktionierenen) code durchzuarbeiten, als sich gleich beim ersten spiel mit irgendwelchen komplizierten css-styles und unötigen html-tags rumzuschlagen.
    Geändert von tobias7777777 (18-07-2009 um 13:18 Uhr)

  7. #7
    tobias7777777 ist offline Eroberer
    registriert
    02-06-2008
    Beiträge
    72

    AW: Memory Spiel vom Urschleim an

    hm... verwirrt*...
    Das er verwirrt ist liegt nich an meinem code sondern an deiner unnötig komplizierten art it einem anfänger zu reden.
    Das deine kritischen worte an mich gerichtet waren ist ihm glaub ich schon klar.

  8. #8
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501

    AW: Memory Spiel vom Urschleim an

    Zitat Zitat von tobias7777777 Beitrag anzeigen
    Mein Lösungsvorschlag sollte aber trotz der eventuelle Unübersichtlichkeit funktionieren. Und stimmt es zwar das ich bis jetzt noch nichts mit tabellen und selbstdefinierten-objekten viel gemacht hab, diese habe ich bis jetzt aber auch nicht gebraucht.
    Ich habe probiert einem Anfänger mit so wenig wie möglich neuen sachen zu zeigen wie (einfach) man ein Spiel programmieren kann.
    Wenn ein Anfänger eine solche Datenstruktur vorgesetzt bekommt, ohne dass er / sie / es weiß, was Datenstrukturen sind und warum man sie braucht oder wie man sie einsetzt, dann hilft es auch nicht gleich mit verschachtelten Arrays anzufangen. Und nur weil man einen Hammer hat, heißt das nicht, dass man gleich alles wie einen Nagel behandeln sollte.
    Wenn man statt der zweiten Array-Hierarchie ein Objekt einsetzen würde, dann wäre dies, gerade wegen der sprechenden Namen, die man dabei verwenden kann, für einen Anfänger mit Sicherheit kaum komplizierter, sondern eher leichter, als ein geschachteltes Array.

    Ein Array ist per Definition ein Kontainer zum Speichern einer unbestimmten Anzahl Elemente, typischerweise vom selben Datentyp, in einer vorgegebenen Reihenfolge mit Zugriff über die absolute Position des Elementes im Array. Seinen Code aber darauf auszulegen, dass an einer bestimmten Array-Position ein bestimmter Inhalt mit bestimmter Bedeutung hinterlegt werden muss, zeugt von einem schlechten Design. Sobald nur eine Änderung kommt, muss jede Stelle überprüft und gfs. angepasst werden. Außerdem muss man sich beim Zugriff immer wieder überlegen, welche Indexpositionen denn jetzt wieder abgefragt werden muss, um das Datenfeld X zu bekommen.

    Sicherlich kann man sich als Anfänger auch mal mit solch einem Design befassen, man sollte aber auch wissen, dass es da noch was anderes gibt.

    Zitat Zitat von tobias7777777 Beitrag anzeigen
    Stattdessen sagst du ihm nur wie verschiedene Dastellungsweisen am besten in ein andergreifen, was meiner meinung nach grade für einen Anfänger verwirender ist, als sich durch einen (funktionierenen) code durchzuarbeiten, als sich gleich beim ersten spiel mit irgendwelchen komplizierten css-styles und unötigen html-tags rumzuschlagen.
    Ich habe nichts von irgendwelchen HTML-Tags oder CSS-Stilen gesagt, noch hatte ich irgendetwas derartiges im Sinn, als ich von Darstellung sprach. Eventuell hast Du nicht nur Defizite bei den Datenstrukturen.

    Zitat Zitat von tobias7777777 Beitrag anzeigen
    Das er verwirrt ist liegt nich an meinem code sondern an deiner unnötig komplizierten art it einem anfänger zu reden.
    Das deine kritischen worte an mich gerichtet waren ist ihm glaub ich schon klar.
    Ein gewisser Grad an Verwirrung ist am Anfang der Lernkurve "Programmierung" nicht zu vermeiden.
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  9. #9
    tobias7777777 ist offline Eroberer
    registriert
    02-06-2008
    Beiträge
    72

    AW: Memory Spiel vom Urschleim an

    vom 1. bis zum 2. zitat würde ich in hinblick auf deine Argumetation, jetzt zustimmen.
    Meine Überlegung einen 2 Dimensionalen Array einzusetzen kam nur daher das dies den vorteil hätte das man so alle werter einer karte mit einer for-schleife abklappern könnte. Bei einem Memory-Spiel ist dies logischerweise unnötig, aber es gibt auch andere Beispiele, wo 2 dimensionale arrays gebracuht werden. Und da in einem solchen fall definitiv keine objekte genutz werden können, und man sich dann erst einmal ausführlich mit arrays beschäftigen müsste, würde in diesem fall ein Anfänger 2 "Unterelemente" von javascript lernen müssen, anstatt nur eins welches dann eventuell unsauber erscheinen mag, aber dennoch funktioniert.
    Ich denke letztendlich bleibt es jedem selbst überlassen, welche variante man für sich nutzt.

    Das am Anfang eine gewisse Verwirrung auftritt bezweifel ich ja auch nich. Nur Sätze wie
    Alle Teile sind wichtig und greifen ineinander. Eine gute Datenstruktur erleichtert nicht nur die Logik, sondern auch die Darstellung, wohin die Darstellung unabhängig von der Logik sein sollte
    nicht nur die Verwirrung erhöhen sondern auch abschrecken, wenn man eigendlich ein vermeintlich einfaches memory-spiel schreiben wollte. Diese Beiden Sätze sind wirklich äußert kompliziert, und um die zu verstehen braucht man wirklich mehr als nur ein paar Grundkenntnisse in javascript. Und wie gesagt schreckt sowas Anfänger auch ab sich weiter in die Materie einzuarbeiten.

    Edit: Das Beispiel mit dem Hammer finde ich ist zwar ganz passend, aber wenn jemand sich vorher noch nie mit Hammern beschäftigt hat, wird er aber wahrscheinlich nicht wissen welcher hammer denn jetzt genau zu welchem Nagel passt. Und im Endeffekt ist es egal wie der Nagel in die Wand kommt.
    Eine Frage hab ich dann aber noch:
    Woran hast du denn gedacht als du von Dastellung sprachst? Denn irgendwie müssen die Bilder jetzt ja nun angezeigt werden.
    Geändert von tobias7777777 (19-07-2009 um 01:19 Uhr)

  10. #10
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501

    AW: Memory Spiel vom Urschleim an

    Zitat Zitat von tobias7777777 Beitrag anzeigen
    Meine Überlegung einen 2 Dimensionalen Array einzusetzen kam nur daher das dies den vorteil hätte das man so alle werter einer karte mit einer for-schleife abklappern könnte.
    Da in Deinem Beispiel jeder Wert einer Karte eine unterschiedliche Bedeutung hat, macht eine Schleife über die Werte nicht sonderlich viel Sinn.

    Zitat Zitat von tobias7777777 Beitrag anzeigen
    Bei einem Memory-Spiel ist dies logischerweise unnötig, aber es gibt auch andere Beispiele, wo 2 dimensionale arrays gebracuht werden.
    Ein zweidimensionales Array kann auch bei einem Memory Spiel eingsetzt werden, wenn es z.B. darum geht die Position der Karte auf dem rechteckigen Spielfeld im Code nachzubilden. Wobei man dieses auch mit einem eindimensionalen Array und einer Abbildungsfunktion tun könnte, wenn man denn diese Information überhaupt im Code benötigt.

    Zitat Zitat von tobias7777777 Beitrag anzeigen
    Das am Anfang eine gewisse Verwirrung auftritt bezweifel ich ja auch nich. Nur Sätze wie
    ...
    nicht nur die Verwirrung erhöhen sondern auch abschrecken, wenn man eigendlich ein vermeintlich einfaches memory-spiel schreiben wollte. Diese Beiden Sätze sind wirklich äußert kompliziert, und um die zu verstehen braucht man wirklich mehr als nur ein paar Grundkenntnisse in javascript. Und wie gesagt schreckt sowas Anfänger auch ab sich weiter in die Materie einzuarbeiten.
    Wenn irgendwas unklar ist, dann kann man ja nachfragen. Ein Forenpost kann aber nur als Einstieg in die Materie dienen und keine umfassende Erklärung oder Einleitung in die Thematik bieten.

    Zitat Zitat von tobias7777777 Beitrag anzeigen
    Woran hast du denn gedacht als du von Dastellung sprachst? Denn irgendwie müssen die Bilder jetzt ja nun angezeigt werden.
    Die Darstellungskomponente kümmert sich z.B. darum, dass die durchgemischten Karten auf den Bildschirm kommen, d.h. dass das richtige Bild an der richtigen Stelle liegt, außerdem steuert sie z.B. das Umdrehen, bzw. wieder Zurückdrehen im Fehlerfall. Auch die Anzeige der Punktzahl oder Zeit kann zu den Aufgaben der Darstellung gehören. Natürlich muss die Darstellung mit den HTML-Tags und CSS-Stilen zusammenarbeiten, weil diese letztendlich die Präsentation der Ergebnisse, bzw. aller Zwischenstände vom frischen Spielfeld bis zum Ende übernehmen müssen.
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  11. #11
    tobias7777777 ist offline Eroberer
    registriert
    02-06-2008
    Beiträge
    72

    AW: Memory Spiel vom Urschleim an

    dein letzter post hat mich jetzt komplett überzeugt.
    Ist ja in irgendeinerweise auch klar, dass ein js experte mehr ahnung hat als einer der js nur als hobby macht.
    Nur die Argumente haben mich davon zuerst nich überzeugt.
    Geändert von tobias7777777 (19-07-2009 um 20:05 Uhr)

Ähnliche Themen

  1. Ein Spiel in JavaScript Programmieren
    Von Cookie1990 im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 29-05-2008, 10:32
  2. Javascript Memory Spiel
    Von Maurizio im Forum JavaScript
    Antworten: 24
    Letzter Beitrag: 26-05-2007, 12:21
  3. memory spiel in javascript
    Von cliff im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 06-10-2000, 18:39
  4. Memory - spiel
    Von wudmx im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 17-06-2000, 20:30

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •