Vokabel-Memory

html.de-Forum JavaScript
1

Hallo,

ich möchte ein einfaches Vokabel-Memory erstellen. Jeweils eine englische und eine deutsche Vokabel gehören zusammen. Ich habe meine Quelltext auch soweit fertig (bis auf Kleinigkeiten wie Umlaute etc.) Nur leider weiß ich nicht, wie ich meinem Programm klar mache, dass die Werte der einzelnen Karten (Elemente) für ein Paar nicht gleich sein müssen. Ich habe öfter Hashmap als Lösung gefunden, weiß aber nicht so recht, wie und wo ich diese einsetzen muss.

Bin über jeden Tipp dankbar! Und auch, wenn ihr mich dafür wahrscheinlich hasst, aber bitte nicht zu schwer erklären, bin kein Informatiker sondern einfacher Medienstudent :wink:
Vielen dank im Voraus

Hier mein quelltext:

[code=html]

div#memory_board{ background:#CCC; border:#999 1px solid; width:800px; height:800px; padding:24px; margin:0px auto; } div#memory_board > div{ background: url(tile_bg.jpg) no-repeat; border:#000 1px solid; width:71px; height:71px; float:left; margin:10px; padding:20px; font-size:20px; cursor:pointer; text-align:middle; }
[/code]
2

Verstehe ich jetzt nicht. Die Werte sind Strings. Was willst du denn vergleichen?

3

dort wird festgelegt, dass die Tiles nur flipped (also aufgedeckt) bleiben wenn die Inhalte/Werte der Elemente gleich sind. Das sind die ja aber nicht. Ich suche also nach einer Möglichkeit, wie die Werte gleichsetzen kann oder einen Befehl, der definiert, welche Werte zusammengehören, also engl. Vokabel zu dt. Vokabel.

4

In dem Fall würde ich als Ausgangsobjekt kein String-Array sondern eine Collection mit Objekten nehmen. also bsw:

var myObj = [ {card_1: {de: 'einheiten', en: 'units'}}, {card_2: {de: 'verkehr', en: 'traffic'}} ];

Soweit verständlich?

/edit: Syntax Error

5

ja, aber dann habe ich ja auf jeder Karte zwei Werte und die sollen aufgeteilt werden, aber dennoch „flipped“ bleiben wenn ein zusammengehöriges Paar angeklickt wurde.

6

Als erstes brauchst du ein Objekt mit zugeordneten Wortpaaren, das in einfaches Array umgewandelt geshuffelt und im DOM gerendert wird. Ich habe das Array nachfolgend memory genannt.

Dann benötigst du zwei Werte. Den der Karte, die du gerade anklickst und den, welcher zuvor angeklickt wurde. Letzterer lässt sich zwischenspeichern, bsw. im sessionStorage.

Beide Werte übergibst du einer Funktion, welche prüft, ob sie im Ausgangsobjekt korrespondieren. Falls ja, wird das Array memory um diese Werte reduziert. Danach musst du es natürlich neu rendern.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.0/lodash.min.js"></script>
<script>
  (function() {
    let myObj = [
      {words: ['einheiten', 'units']},
      {words: ['verkehr', 'traffic']},
      {words: ['foo', 'bar']}
    ];
    let memory = [];

    memory = _.map(myObj, 'words');
    memory = _.flattenDeep(memory);
    memory = _.shuffle(memory);

    console.log(memory); // ["units", "bar", "einheiten", "foo", "verkehr", "traffic"]

    function reduceArray(selected, corresponding) {
      _.forEach(myObj, function(v, k) {
        if (v.words.indexOf(selected) > -1 &&  v.words.indexOf(corresponding) > -1) {
          memory = _.pullAll(memory, v.words);
          return memory;
        }
      });
    };

    let clickedCard = 'einheiten';
    let storedCard = 'units';

   reduceArray(clickedCard, storedCard);

   console.log(memory); // ["bar", "foo", "verkehr", "traffic"]
  }());