Kostenlose Freecell

Vor langer Zeit habe ich in genau derselben Galaxie begonnen, Freecell zu erstellen, um Angular 1.3 zu lernen.

Ich bin so weit gekommen und wurde dann von anderen Dingen abgelenkt, so wie es bei Nebenprojekten so ist.

Ich hatte in letzter Zeit etwas Freizeit (ich weiß, damit hatte ich auch nicht gerechnet) und dachte, ich versuche es noch einmal.

Ich habe im Wesentlichen bei Null angefangen, weil ich kein Interesse mehr an Angular 1.3 habe, und ich neige dazu, VueJS für meine Web-Sachen zu verwenden, wenn ich ein Framework benötige.

Um die Ergebnisse zu sehen, ist es auf github.io: Klicken Sie hier, um Freecell zu spielen!

Seitdem ich vor anderthalb Jahrzehnten WPF gelernt habe, hat mir der MVVM-Programmierstil sehr gut gefallen. VueJS ermöglicht diesen Stil sehr einfach und verbessert ihn sogar, ohne dass explizite Ereignisse zur Aktualisierung der Benutzeroberfläche erforderlich sind.

Das bedeutet, dass die Spiellogik vollständig von der Ansichtslogik getrennt ist, was das Schreiben dieses Spiels zu einem Kinderspiel machte.

Es war nicht alles nur Flugzeugsegeln, da ich aus irgendeinem Grund beschlossen habe, die Karten in einer gezackten 2D-Anordnung zu speichern. Keine schlechte Idee, aber jedes interne Array ist eine Spalte, und als ich versuchte, die Karten in einem CSS-Raster korrekt anzuordnen, konnte ich nicht einfach über das äußere und dann über das innere iterieren, so wie

<template v-for="cardCol in game.table">
    <template v-for="card in cardCol">

Weil das die Spalten als Zeilen anordnen würde. Also musste ich Indizes (warum beginnt VueJS nicht bei 0???) anstelle von Objekten verwenden und das externe Array in der inneren Schleife durchlaufen:

<template v-for="rowi in game.getLargestColumnCount()">
  <template v-for="coli in game.table.length">
    <div v-if="game.table[coli-1].length == 0 && rowi == 1" :class="'card column'+coli+' freecell'">
      <img src="cards/blank.png" @click="game.selectDropClear(coli-1, rowi-1)" >
    </div>
    <div v-else-if="game.getCard(coli-1, rowi-1) != ''" :class="'card '+cardClass(coli-1, rowi-1)">
      <img :alt="cardToCardName(game.getCard(coli-1, rowi-1))" :src="'cards/'+game.getCard(coli-1, rowi-1)+'.png'" @click="game.selectDropClear(coli-1, rowi-1)">
    </div>
  </template>
</template>

Ich denke, die beiden anderen schlechten Designentscheidungen, die ich getroffen habe, sind die Implementierung der automatischen Vervollständigung und die Tatsache, dass die Klick-Handler nur eine Funktion im Spiel (d. h. im Modell) und nicht in der Ansicht sind und die Ansicht herausfinden soll, welcher Vorgang ausgeführt wird zu ergreifende Maßnahmen.

Das Spiel entscheiden zu lassen, welche Aktion der Spieler meint (z. B. eine Karte (oder einen Kartenstapel) auswählen, Karten auf einen anderen Stapel legen oder Karten abwählen), hat zu einem Spaghetti-Code geführt, den ich zu einem späteren Zeitpunkt möglicherweise umgestalten möchte.

Anfangs wollte ich die automatische Vervollständigung nicht implementieren, weil ich nicht über die Logik nachdenken wollte. Aber nachdem ich ein paar Spiele ohne gespielt hatte, wurde es mir so langweilig, jede Karte in der Startreihe anzutippen, dass ich mich gezwungen fühlte, es umzusetzen.

Ich hätte bei meiner Meinung bleiben sollen, denn es ist einfach schlimm. Es ist ein riesiger Codeblock, der anfangs eine Menge Fehler und Kopfzerbrechen verursacht hat. Es ist nicht einmal vollautomatisch. Andererseits muss ich jetzt nicht annähernd so viel klopfen.

Ich bin bei meiner Meinung geblieben, dass die Karten nicht per Drag-and-Drop verschoben werden können, da ich sie hauptsächlich zum Spielen auf meinem Handy und meinem Tablet erstellt habe, so dass das Anklicken der Karten UX-technisch viel einfacher ist (zumindest meine UX, ymmv).

Im Großen und Ganzen bin ich mit dem Ergebnis zufrieden, auch wenn noch ein paar Bugs außer Sichtweite sind.

Mellen / Freecell

Eine Umsetzung des Kartenspiels Free Cell

Das obige ist der detaillierte Inhalt vonKostenlose Freecell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!