tictactoe

Tic-Tac-Toe Multipemain Daring

Demo Video:

Deskripsi: Aplikasi web ini dimaksudkan untuk menjadi "kertas" online untuk permainan kertas klasik Tic Tac Toe. Aplikasi ini berfungsi sebagai platform yang memungkinkan untuk memainkan permainan TTT, di samping itu juga disediakan fitur obrolan dasar untuk memfasilitasi komunikasi pemain.

Spesifikasi Makro:

• Sebuah “papan permainan” online untuk memainkan permainan TTT;
  • Pemain harus bisa berkomunikasi satu sama lain;
• Aplikasi Web harus menyediakan fitur multi-ruangan.

d-_-b

Alat dan teknologi:

Komunikasi Klien Server berdasarkan protokol Socket.IO

Sisi Klien * :	Sisi server:
HTML, CSS, JS (termasuk kerangka SocketIO)	Kerangka kerja Python: Flask, Flask SocketIO

^* Elemen front-end papan Tic Tac Toe terinspirasi dari proyek Tic Tac Toe Sederhana Dev Web - fungsionalitas satu sisi 2 pemain

Spesifik permainan

• 2 pemain ( x | o );
• pemain dengan langkah pertama => tanda tempat ( x | o ):
• Sampai (menang atau seri): tanda tempat pemain ke-2 => tukar giliran => tanda tempat pemain ke-1;

Logika implementasi

---

Dalam game Tic-Tac-Toe Multipemain Online , pemrosesan gerakan, penanganan koneksi pemain, obrolan pemain, dan manajemen ruang permainan disediakan oleh server (dalam hal ini dengan bantuan kerangka kerja Flask, Flask SocketIO). Sesuai aturan tic tac toe, hanya ada dua pemain dalam satu permainan. Artinya server harus memeriksa keberadaan ruang permainan dan apakah sudah ada dua pemain sebelum menghubungkan yang baru.

Langkah 1 - Koneksi

• Dua klien terhubung ke server.
  • Pemeriksaan awal: keberadaan ruangan, jumlah pemain;

Langkah 2 - Pemain diberitahu

• Klien menerima informasi tentang id pemainnya yang digunakan untuk memetakan sosok pemain (misalnya salib atau lingkaran).

Langkah 3 - mulaiPermainan

• Server memulai pertandingan dan memberi tahu para pemain tentang siapa yang akan memulai pertandingan ketika para pemain telah setuju untuk memulai permainan.
  • Pada langkah ketiga, kedua pemain bermain melawan satu sama lain. Pertama, pemain akan mengklik suatu bidang dan informasi itu dikirim ke server. Informasi tentang bidang yang dipilih dan pemain berikutnya dikirim ke klien oleh server di dalam ruangan. Ini akan diulang sampai seri atau ada satu pemain yang memenangkan permainan.

app.py

File tempat semua kesenangan dimulai... Berikut adalah konfigurasi framework Flask dan Flask Socket IO. Setelah dikonfigurasi, rute Flask dihiasi dengan @app.route() dan handler Flask SocketIO dihiasi dengan @socketio.event . Di bagian bawah file, ada socketio.run(app, debug=True) yang akan memulai server. "Fungsi socketio.run() merangkum permulaan server web dan menggantikan permulaan server pengembangan Flask standar app.run() ." Soket LabuIO

oophelpers.py

Ada pemodelan objek Player() dan GameRoom() . Di dalam dirinya sendiri, kelas mendefinisikan perilaku dan atribut yang dibutuhkan.

templates/

Pada dasarnya, templates/index.html hanyalah halaman HTML yang mendeskripsikan konten halaman - permainan papan dan area log. Di atas halaman ada "Tampilan salam" sebagai tampilan modal yang akan mengubah status: display: show -> display: none ketika acara server memancarkan ketersediaan ruangan.

static/styles/

Disitulah letak file CSS yang digunakan untuk menggambarkan estetika halaman.

static/scripts/

Dalam file main.js terdapat skrip yang memungkinkan interaksi aplikasi web. File dimulai dengan " DEKLARASI VARIABEL " di bagian atas, kemudian pada fungsi anonim joinButton addEventListener diverifikasi roomAvailability() melalui fungsi async & await . Setelah ketersediaan ruangan dikonfirmasi, userConnectedHandlers() dipanggil. Fungsi obrolan dan permainan disediakan di seluruh EventListener yang dilampirkan pada tombol sendButton , startGameButton , restartButton .

requirements.txt

File itu hanya menentukan paket dependensi untuk aplikasi web ini.

Reproduksi aplikasi web

Salah satu cara untuk menjalankan aplikasi ini:

• buat lingkungan virtual Python;

python -m venv [directory]

• instal persyaratan di lingkungan virtual;

pip install -r requirements.txt

• jalankan python app.py atau flask run dan kunjungi http://localhost:5000 di dua tab browser terpisah.

python app.py

atau

flask run

Kontainerisasi menggunakan buruh pelabuhan

Bangun Gambar dari Dockerfile

docker build -t < img_name > .        

docker build -t flask-tictactoe .        

Jalankan kontainer di latar belakang dan publikasikan port kontainer ke host

docker run -d -p < host_port > : < container_port > < image_name >    

docker run -d -p 80:5000 flask-tictactoe  

Akses wadah di browser menggunakan: http://localhost atau http://127.0.0.1