Digital Chess - ติดตามเกมหมากรุกออนไลน์ของคุณ: 5 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:05

ฉันเล่นหมากรุกมามากตั้งแต่ฉันยังเด็ก และเนื่องจากเว็บมีเว็บไซต์มากมายให้เล่นหมากรุกกับคอมพิวเตอร์หรือคู่ต่อสู้แบบสด ฉันจึงไม่เคยพบเว็บไซต์ที่ติดตามเกมหมากรุกของคุณเลย ที่เล่นในชีวิตจริง ดังนั้นด้วยโครงการนี้ ฉันหวังว่าจะเข้าใจ!

ฉันหวังว่าจะ:

• สามารถติดตามความเคลื่อนไหวของตัวหมากรุก
• ดูกระดานผู้นำบางส่วนเกี่ยวกับเกมที่ผ่านมา
• ติดตามเวลาและเล่นอย่างรวดเร็วเหมือนเกมมืออาชีพ

เป็นโปรเจ็กต์ที่ซับซ้อนมาก เนื่องจากหากสร้างเสร็จแล้วจะต้องใช้เซ็นเซอร์วัดแสง 64 ตัวและชิป 8 ตัวในการอ่าน ซึ่งเป็นงานใหญ่อยู่แล้ว และเราไม่นับเซ็นเซอร์อื่นๆ ด้วยซ้ำ

วิทยาลัยของฉันมีรายการสิ่งที่ต้องทำมากมาย:

1. สร้างแผนผังสำหรับโครงการของเรา
2. สร้างฐานข้อมูลสำหรับการจัดเก็บและรับข้อมูล
3. ออกแบบเว็บไซต์โดยใช้ Adobe XD
4. สร้างเว็บไซต์นี้ใหม่ด้วย CSS และ HTML
5. อ่านเซ็นเซอร์ด้วย python
6. แสดงข้อมูลเซ็นเซอร์บนเว็บไซต์โดยใช้ขวด

ในคำแนะนำนี้ ฉันจะแนะนำคุณในการเดินทางของฉัน ปัญหาและช่วงเวลาแห่งความรอดทั้งหมดที่ฉันได้ผ่านช่วงสองสามสัปดาห์ที่ผ่านมานี้

ขั้นตอนที่ 1: วัสดุ/เครื่องมือ

วัสดุ วัสดุ และเครื่องมือเป็นก้าวแรกสู่ความสำเร็จของโครงการ!

เครื่องมือ:

• หัวแร้ง
• บัดกรีดีบุก
• คีม
• เครื่องเจาะ
• เทป

เสบียง:

• Raspberry Pi พร้อมการ์ด micro SD (น่าจะเพียงพอ 4GB)
• Rasberry Pi T-cobbler
• กระดานหมากรุกกับชิ้น
• จอแสดงผล 7 ส่วน (TM 1637)
• 2 เซ็นเซอร์สัมผัส (TTP223B)
• เครื่องอ่าน RFID พร้อมการ์ด (MFRC522)
• MCP3008 (ขึ้นอยู่กับว่าคุณต้องการไปให้ไกลแค่ไหน สำหรับ MCP ทุกตัว คุณสามารถอ่านพิกัดหมากรุกได้ 8 ตำแหน่ง)
• Light Dependent Resistor type 5288 (8 สำหรับทุก MCP ที่คุณมี)
• ส่วนหัว (ชายเป็นชาย และหญิงเป็นชาย)

หากคุณต้องการซื้อทุกอย่าง ราคาต้นทุนโดยประมาณควรอยู่ที่ประมาณ 125 ยูโร รวมค่าขนส่ง (เฉพาะอุปกรณ์สิ้นเปลือง)!

มีไฟล์ Excel แนบพร้อมลิงก์และราคาสำหรับทุกสิ่งที่คุณต้องการ!

ขั้นตอนที่ 2: แผนผังและการวางแผน

ขั้นตอนต่อไปในโครงการนี้คือการสร้างแผนผัง ฉันทำ 2: อันหนึ่งบนเขียงหั่นขนมและอีกอันแบบอิเล็กทรอนิกส์ล้วนๆ เราต้องการแผนผังนี้เพื่อให้ทุกอย่างสะอาด และทำให้แน่ใจว่าเราจะไม่เชื่อมโยงสิ่งที่ไม่จำเป็นใดๆ เข้าด้วยกัน!

ฉันใช้โปรแกรมที่เรียกว่า "Fritzing" เพื่อสร้างแผนผังเหล่านี้หากใครสนใจ

การเข้ารหัสสี:

• สีแดง = แหล่งจ่ายไฟ
• สีเขียว = การเชื่อมต่อ
• สีน้ำเงิน = พื้น

การเชื่อมต่อ Raspberry Pi:

• 3V3 => VC line บนเขียงหั่นขนม เปิดเครื่องทุกอย่าง
• 5V => VCC ของจอแสดงผล 7 ส่วน

• จีเอ็นดี:

  • บดบนเขียงหั่นขนม
  • กราวด์ของจอแสดงผล 7 ส่วน
• GPIO4 => นาฬิกา เลือกพินของ MCP3008
• GPIO10 => หมุด MOSI ของ MCP3008
• GPIO9 => พิน MISO ของ MCP3008
• GPIO11 => CLK พินของ MCP3008
• GPIO7 => พิน SDA ของ MFRC522
• GPIO19 => DIG pin ของเซ็นเซอร์สัมผัสตัวแรก
• GPIO26 => DIG pin ของเซ็นเซอร์สัมผัสตัวที่สอง
• GPIO20 => CLK พินของจอแสดงผลเจ็ดส่วน
• GPIO21 = พิน DIO ของจอแสดงผลเซกเมนต์ที่เจ็ด

หมายเหตุสองสามข้อเกี่ยวกับแผนผัง:

• แผนผังนี้มีเพียง 1 MCP ซึ่งหมายความว่าจะอ่านได้ทั้งหมดเพียง 8 พิกัดเท่านั้น
• ฉันจะใช้พิน GPIO เป็น Chip Select ของฉัน เนื่องจากมีเพียง 2 พินเลือกชิปเท่านั้นที่มี 8 MCP ที่อาจเกิดขึ้น
• การแสดงผล 7 เซ็กเมนต์เป็นจอแสดงผลที่ครูแนะนำ ต้องใช้สายไฟเพียง 4 เส้นเท่านั้น เนื่องจากมันทำงานบนโปรโตคอลของตัวเอง
• ตัวต้านทานบนพินดิจิตอลของเซ็นเซอร์สัมผัสไม่จำเป็นต้องใช้อย่างเต็มที่ แต่แนะนำให้ใช้

อธิบายองค์ประกอบ:

• MCP พร้อมเซ็นเซอร์วัดแสง:

  • MCP3008 เป็น ADC 8 ช่อง 10 บิต:

    • MCP3008 จะอ่านค่าอะนาล็อกของเซ็นเซอร์วัดแสง ค่านี้ขึ้นอยู่กับปริมาณแสงที่ส่องอยู่บนเซ็นเซอร์
    • ในรหัสหลามของฉันฉันจะได้รับค่าแอนะล็อกนั้นและแปลงเป็น 1 หรือ 0

เซ็นเซอร์สัมผัส:

ทำงานเหมือนปุ่ม ฉันใช้คลาสนี้ด้วยวิธีโทรกลับ เพิ่มเติมเกี่ยวกับเรื่องนี้ในภายหลัง

เครื่องอ่าน RFID (MFRC 522):

• ใช้โปรโตคอลเฉพาะ (SPI) กับแพ็คเกจที่ติดตั้ง
• ไม่ยากเลยที่จะโค้ดด้วยแพ็คเกจที่ติดตั้งไว้
• อ่านแท็กและส่งกลับค่าของแท็ก
• คุณยังสามารถเขียนค่าลงในแท็กได้ ดังนั้นแทนที่จะคืนค่าเป็นเลขฐานสิบหก ก็จะส่งกลับชื่อเช่น

7 เซ็กเมนต์ (TM1637)

• ยังใช้แพ็คเกจที่ติดตั้งไว้เพื่อให้เขียนโค้ดได้ง่าย
• สร้างตัวแปรด้วยค่าจำนวนเต็ม แล้วแยกเป็น 4 อักขระแล้วแสดงอักขระเหล่านั้น

ขั้นตอนที่ 3: ฐานข้อมูล SQL

ขั้นตอนที่สามของโครงการนี้คือการสร้างฐานข้อมูล SQL แบบนอร์มัลไลซ์ 3NF!

เราต้องการสิ่งนี้สำหรับ:

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

ตารางอธิบาย:

• เกม

  • แทร็กนี้ผู้ชนะบางเกมและเมื่อเล่นเกม
  • คีย์หลักที่นี่คือ GameID
  • วันที่มีค่ามาตรฐานของวันที่ปัจจุบัน
  • ผู้ชนะและคะแนนจะถูกเพิ่มในภายหลังหลังจากจบเกม!

• ผู้เล่น (ผู้สะกดคำในภาษาดัตช์)

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

• ประวัติศาสตร์ (ประวัติศาสตร์)

  • นี่คือประวัติการเลี้ยว
  • เมื่อตัวหมากรุกถูกย้าย จะอัพเดทที่นี่
  • มีกุญแจต่างประเทศ 3 อัน ผู้เล่น เกม และหมากรุก
  • ReadDate (InleesDatum) คือวันที่ที่เซ็นเซอร์ได้รับการอ่าน
  • ReadTime เหมือนกับ ReadDate แต่มี timestamp
  • LocationID(LocatieID) คือชื่อสำหรับพิกัดที่อยู่ในตำแหน่ง เช่น "a3"

• หมากรุก (Schaakstukken ในภาษาดัตช์)

  • หมากรุกทุกชิ้นมี ID ทีม ชื่อและสถานะ
  • ทีมคือ 1 หรือ 2 สีดำหรือสีขาว
  • ชื่อของชิ้นที่เคยเป็นคือ "จำนำ 1"
  • สถานะหมายความว่าชิ้นส่วนนั้นยังมีชีวิตอยู่หรือตายไปแล้ว!

ขั้นตอนที่ 4: ฮาร์ดแวร์

ตอนนี้เราได้ชิ้นส่วนที่ถูกต้องแล้ว ก็เริ่มสร้างบางสิ่งได้!

ลองแบ่งส่วนนี้เป็นขั้นตอนย่อย เพราะจะอธิบายได้ง่ายขึ้น:

• ขั้นตอนที่ 1: คุณต้องการเจาะรูในทุกพิกัดของกระดานหมากรุกตามที่แสดงในภาพแรก และเจาะรูที่คุณต้องการวางเซ็นเซอร์สัมผัส เครื่องอ่าน RFID และจอแสดงผล 7 ส่วน

  อย่าลืมเจาะรูที่ด้านข้างของบอร์ด รูเหล่านี้มีไว้สำหรับสายไฟของส่วนประกอบต่างๆ ที่ด้านบนของบอร์ด เจาะเยอะนะรู้ยัง

• ขั้นตอนที่ 2: ลองต่อเซ็นเซอร์หนึ่งหรือสองตัวกับ Raspberry Pi ตรวจสอบว่าใช้งานได้หรือไม่ คุณต้องการเชื่อมต่ออุปกรณ์เหล่านี้กับเครื่องอ่านแอนะล็อก MCP ตามที่อธิบายไว้ก่อนหน้าในขั้นตอนที่ 2 (แผนผัง)

• ขั้นตอนที่ 3: นี่อาจเป็นเรื่องยุ่งยากและทำลายประสาทมาก เนื่องจากส่วนหัวของจัมเปอร์ไม่ได้ติดอยู่กับที่ คุณอาจต้องการติดเทปทั้งหมดเข้ากับบอร์ด ไม่ว่าจะทีละอันหรือหลายอันในคราวเดียว คุณต้องแน่ใจว่ามันติดอยู่บนกระดานหมากรุก มิฉะนั้น คุณจะไม่สามารถอ่านเซ็นเซอร์ได้สำเร็จ

  เคล็ดลับ! ถ้ามันทำให้คุณง่ายขึ้น กาวบางชนิดอาจช่วยรักษาเซ็นเซอร์ให้เข้าที่มากขึ้นในขณะที่ทำการอัดเทป ฉันพบว่าวิธีนี้ยาก

ขั้นตอนที่ 5: ซอฟต์แวร์

หลังจากที่คุณสร้างฮาร์ดแวร์ที่สามารถทดสอบได้แล้ว มาลองเขียนโค้ดสำหรับฮาร์ดแวร์กัน! หากคุณต้องการดูรหัสของฉัน โปรดตรงไปที่ github ของฉัน

Back-end อันดับแรก เราจะต้องติดตั้งแพ็คเกจสองสามชุด ฉันทำรายการให้คุณ:

• กระติกน้ำ

  นี่คือสิ่งที่รหัสหลามของคุณจะทำงาน

• กระติกน้ำ-ซ็อกเก็ตIO

  เพื่อสื่อสารระหว่าง front-end และ back-end

• งี่เง่า

  มีประโยชน์สำหรับการอ่านเซ็นเซอร์วัดแสง ทำงานร่วมกับ matrix's

• ชาวเน็ต

  การพิมพ์ที่อยู่ IP ของคุณเองบนจอแสดงผล 7 ส่วน

• กระติกน้ำ-CORS

  การแชร์รีคอร์สข้ามต้นทาง ช่วยให้สามารถแชร์แพ็กเกจข้ามโดเมนต่างๆ ได้

ถัดจากนั้น ฉันได้เขียนบทเรียนสองสามคลาส และคุณสามารถใช้มันได้

ส่วนหน้า

รหัสเว็บไซต์ยังมีอยู่ในหน้า github ของฉันด้วย!

สำหรับส่วนหน้า ฉันจะใช้ Chessboard.js สิ่งนี้แทรกกระดานหมากรุกที่ใช้งานง่ายพร้อมชิ้นส่วนที่เคลื่อนย้ายง่าย!

ทุกอย่างบนกระดานนั้นปรับแต่งได้ ดังนั้นขอให้สนุก! หลังจากดาวน์โหลดเวอร์ชันล่าสุดแล้ว คุณจะต้องลากไฟล์ไปยังโปรเจ็กต์ของคุณและเชื่อมโยงไปยังหน้าที่คุณต้องการแสดงกระดานหมากรุก!

หลังจากนั้นเรามาลองสร้างบอร์ดกัน ไม่ยากเกินไป:

อันดับแรกใน html ของคุณ:

ประการที่สอง ในไฟล์จาวาสคริปต์ของคุณ:

board1 = กระดานหมากรุก ('board1', 'start');

และเมื่อคุณมีแล้ว คุณควรจะสามารถเห็นกระดานหมากรุกได้แล้วตอนนี้! ปรับแต่งบอร์ดในไฟล์ CSS ได้ตามสบาย!

ตอนนี้ เราต้องการเห็นการเคลื่อนไหวบนกระดานหมากรุก ไม่ยากเกินไป แต่เราจำเป็นต้องปรับแต่งมันเพื่อให้คำสั่ง move ถูกส่งโดยแบ็คเอนด์ ฉันจะไม่ลงรายละเอียดมากเกินไป แต่เราต้องการทำสิ่งนี้:

new_lijst = [Data.data[0], Data.data[1];commando = new_lijst[0].concat('-', new_lijst[1]); board1.move(คอมมานโด);

เราได้รับรายการจากโปรแกรมแบ็คเอนด์ของเรา และใส่เส้นประระหว่างสองพิกัด จากนั้นใช้คำสั่ง board.move เพื่อดำเนินการย้าย!

นั่นคือคำอธิบายของฉันเกี่ยวกับสิ่งที่เราต้องการของปลั๊กอิน chessboard.js ตรงไปที่ github ของฉันเพื่อดูโค้ดด้วยตัวคุณเอง