Cờ vua kỹ thuật số - Theo dõi trò chơi cờ vua của bạn trực tuyến: 5 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:33

Tôi đã chơi rất nhiều cờ kể từ khi tôi còn nhỏ, và vì web có rất nhiều trang web để chơi cờ với máy tính hoặc đối thủ trực tiếp, tôi chưa bao giờ tìm thấy một trang web theo dõi trò chơi cờ của bạn mà bạn thực sự đang chơi trong cuộc sống thực. Vì vậy, với dự án này, tôi hy vọng sẽ hiện thực hóa điều đó!

Tôi hy vọng:

• Có thể theo dõi chuyển động của các quân cờ
• Xem một số bảng xếp hạng về các trò chơi trước đây.
• Theo dõi thời gian và chơi nhanh như một trò chơi chuyên nghiệp.

Đó là một dự án rất phức tạp vì nếu hoàn thành, nó sẽ yêu cầu 64 cảm biến ánh sáng và 8 chip để đọc. Đó đã là một nhiệm vụ lớn và chúng tôi thậm chí không tính đến bất kỳ cảm biến nào khác.

Trường đại học của tôi đã cung cấp cho chúng tôi một danh sách lớn những việc cần làm:

1. Tạo một giản đồ cho dự án của chúng tôi
2. Tạo cơ sở dữ liệu để lưu trữ và lấy dữ liệu.
3. Thiết kế trang web bằng Adobe XD
4. Tạo lại trang web này bằng CSS và HTML
5. Đọc các cảm biến với python
6. Hiển thị dữ liệu cảm biến trên trang web bằng cách sử dụng bình.

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn trong cuộc hành trình của mình, và tất cả những rắc rối và khoảnh khắc cứu rỗi mà tôi đã trải qua trong vài tuần qua.

Bước 1: Nguồn cung cấp / Công cụ

Nguồn cung cấp, vật liệu và công cụ là bước đầu tiên cho một dự án thành công!

Công cụ:

• Sắt hàn
• Hàn thiếc
• Kìm
• Máykhoan
• Băng

Quân nhu:

• Raspberry Pi với thẻ micro SD (4GB là đủ)
• Rasberry Pi T-cobbler
• Bàn cờ với quân cờ
• Màn hình 7 đoạn (TM 1637)
• 2 Cảm biến chạm (TTP223B)
• Đầu đọc RFID với thẻ (MFRC522)
• MCP3008 (Tùy thuộc vào mức độ bạn muốn đi, đối với mỗi MCP, bạn có thể đọc 8 tọa độ Cờ vua)
• Loại điện trở phụ thuộc ánh sáng 5288 (8 cho mỗi MCP bạn có)
• Tiêu đề (Nam thành Nam và Nữ thành Nam)

Nếu bạn cần mua mọi thứ, giá ước tính nên vào khoảng 125 euro bao gồm cả chi phí vận chuyển (Chỉ vật tư)!

Có một tệp Excel được đính kèm với các liên kết và giá cho mọi thứ bạn cần!

Bước 2: Sơ đồ và lập kế hoạch

Bước tiếp theo trong dự án này là tạo một giản đồ. Tôi đã làm 2 cái: Một cái trên breadboard và một cái hoàn toàn bằng điện. Chúng tôi sẽ cần sơ đồ này để giữ mọi thứ sạch sẽ và đảm bảo rằng chúng tôi không kết nối bất kỳ thứ không cần thiết nào!

Tôi đã sử dụng một chương trình có tên "Fritzing" để tạo ra những giản đồ này nếu có ai quan tâm.

Mã màu:

• Red = cung cấp điện
• Màu xanh lá cây = kết nối
• Màu xanh lam = mặt đất

Kết nối Raspberry Pi:

• 3V3 => Dòng VC trên breadboard, cung cấp năng lượng cho mọi thứ
• 5V => VCC của màn hình 7 đoạn

• GND:

  • Tiếp đất trên breadboard
  • Mặt bằng của màn hình 7 đoạn
• GPIO4 => Đồng hồ Chọn chân của MCP3008
• GPIO10 => Chân MOSI của MCP3008
• GPIO9 => Chân MISO của MCP3008
• GPIO11 => chân CLK của MCP3008
• GPIO7 => chân SDA của MFRC522
• GPIO19 => Chân DIG của cảm biến cảm ứng đầu tiên
• GPIO26 => Chân DIG của cảm biến cảm ứng thứ hai
• GPIO20 => Chân CLK của màn hình bảy đoạn
• GPIO21 = chân DIO của màn hình bảy đoạn

Một vài lưu ý trên sơ đồ:

• Giản đồ này chỉ chứa 1 MCP, điều này có nghĩa là chỉ có 8 tọa độ sẽ có thể được đọc đầy đủ.
• Tôi sẽ sử dụng các chân GPIO làm Chip Chọn của mình. Vì chỉ có 2 chân chọn Chip có sẵn với 8 MCP.
• Màn hình 7 đoạn do một giáo viên gợi ý, chỉ cần 4 dây vì nó hoạt động trên giao thức riêng.
• Các điện trở trên chân kỹ thuật số của cảm biến cảm ứng không hoàn toàn cần thiết, nhưng được khuyến khích.

Giải thích các thành phần:

• MCP với cảm biến ánh sáng:

  • MCP3008 là một ADC 8 kênh 10 bit:

    • MCP3008 sẽ đọc giá trị tương tự của cảm biến ánh sáng, giá trị này phụ thuộc vào lượng ánh sáng hiện đang chiếu vào cảm biến.
    • Trong mã python của tôi, tôi sẽ nhận giá trị tương tự đó và chuyển đổi nó thành 1 hoặc 0

Cảm ứng chạm:

Hoạt động giống như một nút, tôi sử dụng một lớp cho điều này với một phương thức gọi lại. Thêm về điều này sau

Đầu đọc RFID (MFRC 522):

• Sử dụng một giao thức cụ thể (SPI) với một gói đã cài đặt.
• Không khó để viết mã với một gói đã cài đặt
• Đọc thẻ và trả về giá trị của thẻ
• Bạn cũng có thể ghi giá trị vào thẻ, vì vậy thay vì trả về giá trị thập lục phân, nó sẽ trả về một tên chẳng hạn

7 phân đoạn (TM1637)

• Cũng sử dụng một gói đã cài đặt để mã hóa dễ dàng
• Tạo một biến có giá trị số nguyên, sau đó chia nó thành 4 ký tự và hiển thị các ký tự đó

Bước 3: Cơ sở dữ liệu SQL

Bước thứ ba đối với dự án này là tạo cơ sở dữ liệu SQL chuẩn hóa 3NF!

Chúng tôi sẽ cần điều này cho:

• Chèn dữ liệu
• Nhận dữ liệu và hiển thị nó trên trang web của chúng tôi
• Có thể xem chính xác có bao nhiêu lượt đi trong trò chơi cờ vua hiện tại!

Bàn giải thích:

• Trò chơi

  • Phần này theo dõi ai đã thắng một trò chơi nhất định và khi trò chơi được chơi
  • Khóa chính ở đây là một GameID
  • Ngày có giá trị tiêu chuẩn của ngày hiện tại
  • Người chiến thắng và điểm số sẽ được cộng vào sau, sau khi trò chơi kết thúc!

• Người chơi (Spelers bằng tiếng Hà Lan)

  • Chúng được đưa vào theo cách thủ công, nhưng cũng có thể được lắp bằng hệ thống thẻ RFID.
  • Viết tên vào thẻ của bạn, sau đó đọc thẻ và điền tên vào bảng này
  • Nó cũng theo dõi thành tích thắng / thua của từng người chơi, được hiển thị trên trang web

• Historiek (Lịch sử)

  • Đây là lịch sử lần lượt
  • khi quân cờ được di chuyển, nó sẽ được cập nhật ở đây
  • Nó có 3 phím ngoại, máy nghe nhạc, trò chơi và bàn cờ
  • Ngày đọc (InleesDatum) là ngày mà cảm biến đã đọc
  • ReadTime giống như ReadDate nhưng có dấu thời gian
  • ID vị trí (LocatieID) là tên cho tọa độ nơi nó được định vị. ví dụ "a3"

• Quân cờ (Schaakstukken bằng tiếng Hà Lan)

  • Mỗi quân cờ đều có ID, đội, tên và trạng thái
  • Đội là 1 hoặc 2, đen hoặc trắng;
  • Tên của từng mảnh sẽ là "Cầm đồ 1"
  • Trạng thái có nghĩa là mảnh còn sống hoặc đã chết!

Bước 4: Phần cứng

Bây giờ chúng tôi đã có tất cả các phần chính xác tại chỗ, chúng tôi có thể bắt đầu tạo ra thứ gì đó!

Hãy chia phần này thành các bước phụ vì sẽ dễ giải thích hơn:

• Bước 1: Bạn muốn khoan một lỗ trên mọi tọa độ bàn cờ của mình như trong hình đầu tiên, cũng hãy khoan một lỗ mà bạn muốn đặt các cảm biến cảm ứng, đầu đọc RFID và màn hình 7 đoạn.

  Đừng quên khoan một số lỗ trên mặt của bảng, những lỗ này dành cho dây dẫn của các thành phần khác nhau trên đầu bảng. Rất nhiều khoan, tôi biết

• Bước 2: Thử đấu dây một hoặc hai cảm biến vào Raspberry Pi, kiểm tra xem chúng có hoạt động không. Bạn muốn kết nối chúng với đầu đọc tương tự MCP như đã giải thích trước đó trong Bước 2 (Sơ đồ).

• Bước 3: Điều này có thể phức tạp và rất căng thẳng, vì các tiêu đề của jumper không được gắn chặt vào vị trí, bạn có thể muốn dán tất cả chúng vào bảng, riêng lẻ hoặc nhiều đầu cùng một lúc. Bạn phải đảm bảo rằng chúng vẫn bị mắc kẹt trên bàn cờ, nếu không bạn sẽ không thể đọc thành công các cảm biến

  TIỀN BOA! Nếu nó giúp bạn dễ dàng hơn, một số loại keo thực sự có thể giúp giữ các cảm biến ở đúng vị trí hơn trong khi dán chúng, tôi đã phát hiện ra điều này một cách khó khăn

Bước 5: Phần mềm

Sau khi bạn đã tạo ra phần cứng mà bạn có thể kiểm tra, hãy thử viết một số mã cho nó! Nếu bạn muốn xem mã của tôi, vui lòng truy cập github của tôi.

Back-end Đầu tiên, chúng tôi sẽ cần cài đặt một vài gói, tôi đã tiếp tục và tạo một danh sách cho bạn:

• bình giữ nhiệt

  Đây là những gì mã python của bạn sẽ chạy trên

• Ổ cắm bình

  Để giao tiếp giữa front-end và back-end

• numpy

  Hữu ích để đọc các cảm biến ánh sáng, hoạt động với ma trận

• netifaces

  Để in địa chỉ IP của riêng bạn trên màn hình 7 đoạn

• Bình-CORS

  Chia sẻ truy đòi nguồn gốc chéo, cho phép các gói được chia sẻ trên các miền khác nhau

Bên cạnh đó, tôi đã viết một vài lớp học và bạn có thể sử dụng chúng miễn phí.

Giao diện người dùng

Mã trang web cũng có sẵn trên trang github của tôi!

Đối với giao diện người dùng, tôi sẽ sử dụng Chessboard.js. Điều này chèn một bàn cờ dễ sử dụng với các quân cờ dễ di chuyển!

Tất cả mọi thứ trên bảng đều có thể tùy chỉnh để vui chơi! Sau khi tải xuống phiên bản mới nhất, bạn sẽ phải kéo các tệp vào dự án của mình và liên kết chúng với trang mà bạn muốn hiển thị bàn cờ!

Sau đó, chúng ta hãy thử tạo một bảng, trông không quá khó:

Đầu tiên, trong html của bạn:

Thứ hai, trong tệp javascript của bạn:

board1 = ChessBoard ('board1', 'start');

và ở đó bạn có nó, bạn sẽ có thể nhìn thấy một bàn cờ ngay bây giờ! Hãy thoải mái tùy chỉnh bảng trong các tệp CSS!

Bây giờ, chúng ta muốn xem một số nước đi trên bàn cờ, không quá khó. Nhưng chúng ta cần phải tùy chỉnh nó để lệnh di chuyển được gửi bởi back-end. Tôi sẽ không đi vào quá nhiều chi tiết, nhưng chúng tôi muốn làm điều gì đó như sau:

new_lijst = [Data.data [0], Data.data [1]; commando = new_lijst [0].concat ('-', new_lijst [1]); board1.move (biệt kích);

Chúng tôi nhận được một danh sách từ chương trình back-end của chúng tôi và đặt một dấu gạch ngang giữa hai tọa độ, sau đó sử dụng lệnh board.move để thực hiện di chuyển!

Đó là lời giải thích của tôi về những gì chúng ta cần đối với plugin flagsboard.js, hãy truy cập github của tôi để tự xem mã