無料のフリーセル

ずっと前、まったく同じ銀河系で、私は Angular 1.3 を学ぶ方法としてフリーセルを作ろうと試み始めました。

ここまで進んだのに、他のことに気を取られてしまうのはサイドプロジェクトの常です。

最近少し時間があったので (もちろん、私も期待していませんでした)、もう一度挑戦してみようと思いました。

Angular 1.3 にはもう興味がなく、フレームワークが必要な場合は Web のものに VueJS を使用する傾向があるため、私は基本的にゼロから始めました。

結果を見るには、github.io にあります: ここをクリックしてフリーセルをプレイしてください!

10 年半前に WPF を学んで以来、私は MVVM スタイルのプログラミングがとても好きでした。 VueJS では、UI を更新するための明示的なイベントを必要とせずに、そのスタイルを非常に簡単に実現でき、さらに改良することもできます。

これは、ゲーム ロジックがビュー ロジックから完全に分離されていることを意味し、このゲームの作成が簡単になりました。

私は何らかの理由でカードを 2D ギザギザの配列に保存することに決めたので、すべてが飛行機で航行したわけではありません。ひどいアイデアではありませんが、各内部配列は列であるため、カードを CSS グリッド内で正しくレイアウトしようとしたとき、
のように外側を反復処理してから内側を反復処理するだけでは済みませんでした。

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

それは列を行としてレイアウトすることになるからです。そのため、オブジェクトではなくインデックスを使用し（なぜ VueJS は 0 から開始しないのですか？）、内部ループで外部配列をループする必要がありました。

<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>

私が行った他の 2 つの悪い設計上の決定は、オートコンプリートを実装することと、クリック ハンドラーをビュー内ではなくゲーム (モデル) 内の 1 つの関数にすぎず、ビューにどのコースを理解させるかであると思います。取るべき行動

プレイヤーがどのアクションを意味するかをゲームに決定させる (つまり、カード (またはカードのスタック) を選択する、カードを別のスタックに置く、またはカードの選択を解除する) と、後日リファクタリングする可能性のあるスパゲッティ コードが生成されました。

当初、ロジックについて考えたくなかったため、オートコンプリートを実装するつもりはありませんでした。しかし、これを使わずにいくつかのゲームをプレイした後、各カードをホーム列にタップするのにとても飽きたので、それを実装する必要があると感じました。

それは悪いことだから、銃を持ち続けるべきだった。これは膨大なコードの塊であり、当初は多くのバグや頭を悩ませる原因となっていました。完全自動でもありません。一方で、今ではほとんどタップする必要がなくなりました。

私はカードをドラッグ アンド ドロップできないようにすることにこだわりました。これは主に携帯電話とタブレットでプレイするためにこれを作成したためです。そのため、所定の位置にタップする方が UX 的にはるかに簡単です (少なくとも私の UX、 ymmv).

目に見えないところにいくつかのバグが残っているとしても、全体的には結果に満足しています。

メレン / フリーセル

カードゲーム「フリーセル」の実装

以上が無料のフリーセルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。