Bangun game Tic Tac Toe menggunakan React – Beragampengetahuan

Selamat datang di versi klasik saya tic-tac-toe permainan! Saya membuat game Tic Tac Toe menggunakan React dan SCSS dan menyelesaikannya dalam waktu sekitar 6 jam. Permainan ini memiliki mode pemain tunggal melawan komputer, pop-up pengumuman pemenang, dan penghitung kemenangan untuk kedua pemain. Meskipun grid dapat dikustomisasi sebagai n x nlogika pemenang saat ini hanya mendukung 3 x 3. Peningkatan di masa depan mencakup pergerakan komputer yang lebih cerdas dan kemampuan multipemain waktu nyata.

Ringkasan

• Total waktu pengembangan yang diperlukan: ~6 jam
• Teknologi yang digunakan: JavaScript (Bereaksi) + SCSS

aturan permainan

1. Tujuan

Tujuan permainan ini adalah menyelaraskan tiga simbol (X atau O) secara horizontal, vertikal, atau diagonal 3 x 3 jaringan.

2. Urutan bulat

• Pemain A selalu memulai dan bermain X.
• permainan lawan komputer oksigen dan bertindak segera setelah pemain A.

3. Permainan

• Pemain bergiliran menandai sel kosong di grid.
• Pemain pertama yang menyelaraskan tiga simbol memenangkan permainan.

4. Ketentuan penghargaan

Seorang pemain menang jika mereka mencapai tujuan berikut:

• tiga simbol dalam satu baris horisontal
• tiga simbol dalam satu kolom vertikalatau
• tiga simbol dalam satu diagonal

5. Menggambar

Jika semua sel terisi dan tidak ada pemain yang memenuhi ketentuan kemenangan, permainan berakhir seri.

6. Pelacakan Skor

Penghitung kemenangan mencatat jumlah total kemenangan untuk Pemain A dan komputer.

Fitur yang diterapkan (MVP)

Inilah yang termasuk dalam versi game ini:

1. Bermain melawan komputer: Mode pemain tunggal menyenangkan yang dapat Anda mainkan di komputer Anda
2. Popup pengumuman pemenang: Di akhir setiap permainan, sebuah jendela akan muncul yang menunjukkan pemenangnya.
3. Penghitung kemenangan: Lacak total kemenangan untuk pemain dan komputer.
4. Kisi yang dapat disesuaikan: Buat sebuah n x n grid (walaupun logika pemenang saat ini hanya mendukung 3 x 3).

Kemungkinan peningkatan

Kedepannya, berikut beberapa hal yang perlu ditingkatkan:

1. [UX] Penyimpanan skor lokal: Simpan skor permainan secara lokal agar tetap ada setelah Anda menyegarkan browser.
2. [UX/Tech] Tindakan komputer yang lebih cerdas: Gantikan tindakan acak dengan algoritme untuk gameplay yang lebih kompetitif.
3. [UX] Multiplayer waktu nyata: Memungkinkan dua pemain untuk bersaing secara real-time menggunakan teknologi berikut soket.io.
4. [Tech] Organisasi SCSS Tingkat Lanjut: Refactoring SCSS menggunakan mixin, variabel, dan teknik penataan yang lebih baik.
5. [UX/Tech] Penurunan versi yang bagus: Pastikan kompatibilitas dengan browser non-modern untuk dukungan yang lebih luas.

Pengaturan dan pengembangan

Prasyarat

Sebelum menyelami, pastikan Anda memilikinya Node.js Terpasang (versi yang disarankan: 6.4.1).

memulai

1. Kloning repositori dari GitHub.

2. Instal dependensi:

npm install

3. Mulai server pengembangan:

npm start

• Buka di browser untuk melihat aplikasi.

4. (Opsional) Bangun proyek produksi:

npm run build

Ini akan membuat dioptimalkan build folder, siap untuk diterapkan.

tes

Jalankan pengujian dalam mode pemantauan interaktif:

npm test

rincian teknis

Struktur file

Proyek mengikuti standar Buat aplikasi reaksi Struktur menggunakan pendekatan berbasis komponen modular.

src
├── index.js
├── App.css
├── App.js
├── Components
│   └── Board
│       ├── Board.scss
│       ├── Cross.jsx
│       ├── ScoreBoard.jsx
│       ├── index.jsx
│       ├── Round.jsx
│   └── Footer
│       ├── Footer.scss
│       ├── index.jsx
│   └── Header
│       ├── Header.scss
│       ├── index.jsx
├── utils
│   └── lib.js
public
├── index.html

Deskripsi dan metode

• Aplikasi ini di-bootstrap melalui Buat aplikasi reaksi Siapkan MVP dengan cepat.
• Permainan ini menginisialisasi a n x n Jaringan permainan.
• Setiap sel memiliki pendengar peristiwa klik yang memungkinkan pemain A (X) melakukan langkah pertama.
• Putaran komputer disimulasikan dengan logika pemilihan sel acak, yang memerlukan augmentasi dengan ukuran kotak khusus.
• digunakan sistem jaminan sosial Sebuah gaya untuk berfokus pada kecepatan daripada kompleksitas selama pengembangan.

Metode pengujian

Pengujian manual

• Pastikan komputer mengambil tindakan setelah Pemain A selesai.
• Permainan verifikasi diakhiri dengan spanduk pengumuman pemenang.
• Uji tindakan otomatis melalui komputer.

Tes unit potensial

• Periksa apakah komputer telah berpindah ke belakang pemain A.
• Verifikasi bahwa permainan menampilkan pemenang yang benar.
• Uji kasus tepi untuk inisialisasi jaringan dan interaksi pengguna.

sebagai kesimpulan

Terima kasih telah menjelajahi proyek saya!

Anda dapat menemukan kode sumber lengkap dan berkontribusi pada proyek ini di GitHub. Mari kita membangun hal-hal keren bersama-sama!