Tic Tac Toe Bagian 0: Membandingkan Langsing dan Bereaksi
Tic Tac Toe Bagian 1: Svelte dan Canvas 2D
Tic Tac Toe Bagian 2: Stateless Undo / Redo
Tic Tac Toe, bagian 3: Undo / Redo dengan penyimpanan perintah
Tic Tac Toe Bagian 4: Berinteraksi dengan Flask Backend Menggunakan HTTP
Pada bagian ini, kami membahas implementasi permainan Tic Tac Toe menggunakan pola Command, dengan menyimpan tim Undo / Redo alih-alih menyimpan masing-masing negara, dengan akses acak ke setiap langkah dalam sejarah game.
Mulai kode
Bagian sebelumnya dari artikel berakhir dengan kode berikut: Kode REPL .
Kami mengomentari semua kode yang akan menghasilkan kesalahan saat melakukan perubahan. Kami mengisi semua sel bidang bermain dengan unit: Kode pada REPL
Penyimpanan negara
Kode BANTUAN
Penyimpanan negara ditambahkan. Bidang bermain sekarang menampilkan konten repositori negara . Secara default, lapangan bermain diisi dengan deuces. Menambahkan status keluaran di komponen Aplikasi .
Kelas Perintah
Kode BANTUAN
Kami menambahkan kelas Command ke file helpers.js . Kelas History telah diubah untuk menyimpan perintah alih-alih status.
Di sini saya tidak dapat melakukan pembaruan status yang benar. Jika ada yang tahu, tolong beri tahu saya. Dan, secara umum, apakah mungkin untuk menggunakan penyimpanan keadaan dengan cara ini?
Pindahkan terjemahan
Kode BANTUAN
Menambahkan larangan mengklik sel yang sudah terisi. Konstruktor kelas Command melakukan terjemahan dari langkah tersebut. Output status terkoreksi.
Keadaan lapangan bermain
Kode BANTUAN
Pada tahap sebelumnya, ada keraguan tentang penggunaan yang benar dari penyimpanan keadaan terpisah, jadi itu dihapus, dan penyimpanan keadaan lapangan bermain dipindahkan ke kelas Sejarah - bidang negara ditambahkan.
Akses acak
Kode BANTUAN
Output tambahan dari daftar langkah-langkah. Akses acak ke setiap langkah permainan dilakukan dengan eksekusi berurutan dari perintah Undo atau Redo ke tim yang dipilih.
Penentuan pemenang
Kode BANTUAN
Penentuan pemenang selesai. Penyimpanan status ditambahkan untuk menampilkan status.
Kesimpulan
Menyimpan histori bergerak menggunakan status lebih mudah digunakan, tetapi mahal dalam memori, karena pada setiap langkah, duplikasi seluruh kondisi permainan dilakukan. Dalam hal aplikasi dengan ukuran model besar, lebih baik menggunakan penyimpanan perintah dalam sejarah.
Repositori GitHub
https://github.com/nomhoi/tic-tac-toe-part3
Memasang game di komputer lokal:
git clone https://github.com/nomhoi/tic-tac-toe-part3.git cd tic-tac-toe-part3 npm install npm run dev
Kami meluncurkan game di browser di alamat: http: // localhost: 5000 / .