หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Tic-Tac-Toe ผู้เล่นหลายคนออนไลน์

วิดีโอสาธิต:

คำอธิบาย: เว็บแอปนี้มีวัตถุประสงค์เพื่อเป็น "กระดาษ" ออนไลน์สำหรับเกมกระดาษ Tic Tac Toe สุดคลาสสิก แอปนี้ทำหน้าที่เป็นแพลตฟอร์มที่อนุญาตให้เล่นเกม TTT นอกจากนี้ยังมีฟีเจอร์แชทพื้นฐานเพื่ออำนวยความสะดวกในการสื่อสารของผู้เล่น

ข้อมูลจำเพาะมาโคร:

  • “กระดานเกม” ออนไลน์สำหรับเล่นเกม TTT;
    • ผู้เล่นจะต้องสามารถสื่อสารระหว่างกันได้
  • Web App ต้องมีฟีเจอร์หลายห้อง

ง-_-ข

Tic-Tac-Toe ผู้เล่นหลายคนออนไลน์

เครื่องมือและเทคโนโลยี:

การสื่อสารไคลเอนต์เซิร์ฟเวอร์ตามโปรโตคอล Socket.IO

ฝั่งไคลเอ็นต์ * : ฝั่งเซิร์ฟเวอร์:
HTML, CSS, JS (รวมถึงกรอบงาน SocketIO) เฟรมเวิร์ก Python: Flask, Flask SocketIO

* องค์ประกอบส่วนหน้าของบอร์ด Tic Tac Toe ที่ได้รับแรงบันดาลใจจากโครงการ Tic Tac Toe แบบง่ายของ Web Dev - ฟังก์ชั่นผู้เล่น 2 คนด้านเดียว

เฉพาะเกม

  • ผู้เล่น 2 คน ( x | o );
  • ผู้เล่นที่มีการเคลื่อนไหวครั้งที่ 1 => เครื่องหมายสถานที่ ( x | o ):
  • จนกระทั่ง (ชนะหรือเสมอ): เครื่องหมายตำแหน่งผู้เล่น 2 => สลับเทิร์น => เครื่องหมายตำแหน่งผู้เล่นคนที่ 1;

ตรรกะการดำเนินงาน

ในเกม Tic-Tac-Toe สำหรับผู้เล่นหลายคนออนไลน์ การประมวลผลการเคลื่อนไหว การจัดการการเชื่อมต่อของผู้เล่น แชทของผู้เล่น และการจัดการห้องเล่นเกมนั้นจัดทำโดยเซิร์ฟเวอร์ (ในกรณีนี้ด้วยความช่วยเหลือของเฟรมเวิร์ก Flask, Flask SocketIO) ตามกฎของโอเอกซ์ มีผู้เล่นเพียงสองคนในหนึ่งเกม ซึ่งหมายความว่าเซิร์ฟเวอร์จะต้องตรวจสอบการมีอยู่ของห้องเล่นเกมและหากมีผู้เล่นสองคนอยู่แล้วก่อนที่จะเชื่อมต่อใหม่

ขั้นตอนที่ 1 - การเชื่อมต่อ

  • ไคลเอนต์สองรายเชื่อมต่อกับเซิร์ฟเวอร์
    • การตรวจสอบเบื้องต้น: มีห้อง, จำนวนผู้เล่น;

ขั้นตอนที่ 2 - ผู้เล่นจะได้รับแจ้ง

  • ลูกค้าได้รับข้อมูลเกี่ยวกับรหัสผู้เล่นที่ใช้ในการแมปรูปร่างของผู้เล่น (เช่น กากบาทหรือวงกลม)

ขั้นตอนที่ 3 - เริ่มเกม

  • เซิร์ฟเวอร์เริ่มการแข่งขันและแจ้งให้ผู้เล่นทราบว่าใครจะเป็นผู้เริ่มการแข่งขันเมื่อผู้เล่นตกลงที่จะเริ่มเกม
    • ในขั้นตอนที่สาม ผู้เล่นทั้งสองจะแข่งขันกันเอง ขั้นแรก ผู้เล่นจะคลิกที่สนามและข้อมูลนั้นจะถูกส่งไปยังเซิร์ฟเวอร์ ข้อมูลเกี่ยวกับฟิลด์ที่เลือกและผู้เล่นคนต่อไปจะถูกส่งไปยังไคลเอนต์โดยเซิร์ฟเวอร์ในห้อง สิ่งนี้จะทำซ้ำจนกว่าจะเสมอหรือผู้เล่นคนใดคนหนึ่งชนะเกม

app.py

ไฟล์ที่ความสนุกเริ่มต้นขึ้น... นี่คือการกำหนดค่าของเฟรมเวิร์ก Flask และ Flask Socket IO เมื่อกำหนดค่าแล้ว เส้นทางของ Flask จะ ถูกตกแต่ง ด้วย @app.route() และตัวจัดการ Flask SocketIO จะ ถูกตกแต่ง ด้วย @socketio.event ที่ด้านล่างของไฟล์ มี socketio.run(app, debug=True) ที่จะเริ่มต้นเซิร์ฟเวอร์ "ฟังก์ชัน socketio.run() สรุปการเริ่มต้นของเว็บเซิร์ฟเวอร์และแทนที่การเริ่มต้นเซิร์ฟเวอร์การพัฒนา Flask มาตรฐาน app.run() " ซ็อกเก็ตขวดIO

oophelpers.py

มีการสร้างแบบจำลองของวัตถุ Player() และ GameRoom() ภายในตัวมันเอง คลาสจะกำหนดพฤติกรรมและคุณลักษณะที่จำเป็น

templates/

โดยพื้นฐานแล้ว templates/index.html เป็นเพียงหน้า HTML ที่อธิบายเนื้อหาของหน้า - พื้นที่เกมกระดานและบันทึก ด้านบนของหน้าจะมี "มุมมองคำทักทาย" เป็นมุมมองโมดอลที่จะเปลี่ยนสถานะ: display: show -> display: none เมื่อเหตุการณ์เซิร์ฟเวอร์ปล่อยห้องว่าง

static/styles/

นั่นคือที่ไฟล์ CSS ที่ใช้อธิบายความสวยงามของหน้า

static/scripts/

ในไฟล์ main.js คือสคริปต์ที่ทำให้การโต้ตอบของ webapp เป็นไปได้ ไฟล์เริ่มต้นด้วย " การประกาศตัวแปร " ที่ด้านบน หลังจากนั้นฟังก์ชันที่ไม่ระบุชื่อ addEventListener ของ joinButton ได้รับการตรวจสอบ roomAvailability() โดยค่าเฉลี่ยของฟังก์ชัน async & await เมื่อยืนยันห้องว่างแล้ว ระบบจะเรียก userConnectedHandlers() ฟังก์ชันแชทและเกมมีให้ทั่วทั้ง EventListener ที่แนบมากับปุ่ม sendButton , startGameButton , restartButton

requirements.txt

ไฟล์นั้นเพียงกำหนดแพ็คเกจการขึ้นต่อกันสำหรับเว็บแอปนี้

ทำซ้ำแอปพลิเคชันเว็บ

วิธีหนึ่งในการรันแอปพลิเคชันนี้:

  • สร้างสภาพแวดล้อมเสมือน Python 
python -m venv [directory]
  • ติดตั้งข้อกำหนดในสภาพแวดล้อมเสมือน 
pip install -r requirements.txt
  • เรียกใช้ python app.py หรือ flask run และไปที่ http://localhost:5000 ในแท็บเบราว์เซอร์สองแท็บแยกกัน 
python app.py

หรือ 

flask run

การบรรจุคอนเทนเนอร์โดยใช้นักเทียบท่า

สร้างภาพจาก Dockerfile 

docker build -t < img_name > .        
docker build -t flask-tictactoe .

เรียกใช้คอนเทนเนอร์ในเบื้องหลังและเผยแพร่พอร์ตของคอนเทนเนอร์ไปยังโฮสต์ 

docker run -d -p < host_port > : < container_port > < image_name >    
docker run -d -p 80:5000 flask-tictactoe

เข้าถึงคอนเทนเนอร์ในเบราว์เซอร์โดยใช้: http://localhost หรือ http://127.0.0.1

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด