Freecell percuma

Suatu masa dahulu di galaksi yang sama, saya mula mencuba membuat Freecell, sebagai satu cara untuk mempelajari Angular 1.3.

Saya sudah sejauh ini dan kemudian saya terganggu oleh perkara lain, seperti juga cara projek sampingan.

Saya mempunyai sedikit masa lapang baru-baru ini (saya tahu, saya juga tidak menjangkakannya) jadi saya fikir saya akan mencubanya sekali lagi.

Saya pada asasnya bermula dari awal, kerana saya tidak lagi berminat dengan Angular 1.3, dan saya cenderung menggunakan VueJS untuk bahan web saya jika saya memerlukan rangka kerja.

Untuk melihat hasilnya, ia ada di github.io: klik di sini untuk bermain freecell!

Sejak saya belajar WPF sedekad setengah yang lalu, saya sangat menyukai gaya pengaturcaraan MVVM. VueJS membenarkan gaya itu dengan sangat mudah, malah menambah baiknya, tanpa memerlukan acara eksplisit untuk mengemas kini UI.

Ini bermakna logik permainan adalah berasingan sepenuhnya daripada logik pandangan, yang menjadikan penulisan permainan ini mudah.

Ini bukan semua pelayaran kapal terbang, kerana saya, atas sebab tertentu, memutuskan bahawa saya akan menyimpan kad dalam tatasusunan bergerigi 2D. Bukan idea yang buruk, tetapi setiap tatasusunan dalaman ialah lajur, jadi apabila saya cuba mengatur letak kad dengan betul dalam grid CSS, saya tidak boleh melelang ke bahagian luar kemudian yang dalam seperti

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

Kerana itu akan meletakkan lajur sebagai baris. Jadi saya terpaksa menggunakan indeks (mengapa VueJS tidak bermula dari 0???) dan bukannya objek dan gelung ke atas tatasusunan luaran pada gelung dalam:

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

Saya rasa dua lagi keputusan reka bentuk buruk yang saya buat ialah melaksanakan autolengkap dan mempunyai pengendali klik hanya menjadi satu fungsi dalam permainan (iaitu model), dan bukannya dalam paparan dan mempunyai pandangan untuk mengetahui arah mana tindakan yang perlu diambil.

Memandangkan permainan memutuskan tindakan yang dimaksudkan oleh pemain (iaitu pilih kad (atau timbunan kad), letakkan kad pada tindanan lain atau nyahpilih kad) telah membawa kepada beberapa kod spageti yang mungkin saya ingin ubah semula di kemudian hari.

Pada mulanya saya tidak mahu melaksanakan autolengkap kerana saya tidak mahu memikirkan logiknya. Tetapi selepas bermain beberapa permainan tanpanya, saya sangat bosan mengetik setiap kad ke dalam barisan rumah sehingga saya rasa terdorong untuk melaksanakannya.

Saya sepatutnya berpegang pada senjata saya kerana ia hanya buruk. Ia adalah sebahagian besar kod yang pada mulanya menyebabkan sekumpulan pepijat dan menggaru kepala. Ia bukan automatik sepenuhnya. Sebaliknya, kini saya tidak perlu melakukan hampir sebanyak mengetik.

Saya berpegang teguh pada pendirian saya tentang tidak membuat kad seret dan boleh dilepaskan, kerana saya membuat ini kebanyakannya untuk dimainkan pada telefon dan tablet saya, jadi mengetik pada tempatnya adalah lebih mudah dari segi UX (sekurang-kurangnya UX saya, ymmv).

Secara keseluruhannya, saya gembira dengan hasilnya, walaupun terdapat beberapa pepijat yang berlarutan dan tidak dapat dilihat.

Atas ialah kandungan terperinci Freecell percuma. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!