สร้างเกมนกหลบท่อด้วยแพลตฟอร์ม IOXESP32

IOXESP32 เริ่มต้นจากบอร์ดพัฒนา ESP32 รุ่น IOXESP32 ที่พัฒนาโดยร้านไอโอเอ็กซ์ฮ๊อบ ปัจจุบันยกระดับเป็นแพลตฟอร์ม IOXESP32 แพลตฟอร์มพัฒนา ESP32 สำเร็จรูป ที่เน้นออกฮาร์ดแวร์ใหม่ ๆ ที่เอื้อต่อการสร้างนวัตกรรมด้วยฮาร์ดแวร์และเอกสารการใช้งานเข้าใจได้ง่ายมากที่สุด

IOXESP32 Mini LCD shield เป็นโมดูลเสริมในแพลตฟอร์ม IOXESP32 ใช้ดีบัค และแสดงผลข้อมูลทั่วไป เช่น แสดงค่าที่ได้จากเซ็นเซอร์ แสดงผลระดับแบตเตอรี่ (กรณีใช้ไฟจากแบตเตอรี่) แสดงค่าอัตราการเต้นของหัวใจ (กรณีต่อกับเซ็นเซอร์วัดอัตราการเต้นของหัวใจ) แสดงผลข้อมูลในรูปแบบกราฟ และสร้างเกม

ในบทความนี้เราจะมาสร้างเกมนกหลบท่อแบบง่าย ๆ โดยใช้ IOXESP32 Mini LCD shield กัน เขียนโปรแกรมภาษา C++ พัฒนาด้วย ArduinoIDE

อุปกรณ์ที่ใช้

บนความนี้จำเป็นต้องใช้อุปกรณ์ดังนี้

ประกอบอุปกรณ์เข้าด้วยกัน

เสียบบอร์ด IOXESP32 ไว้ที่ช่องด้านซ้าย โดยให้หัว MicroUSB หันลงด้านล่าง จากนั้นเสียบ IOXESP32 Mini LCD shield ไว้ที่ช่องด้านขวา โดยให้คำว่า IOXESP32 บนโมดูล IOXESP32 Mini LCD shield หันไปด้านขวา (ดังรูป)

เตรียมไลบรารี่ให้พร้อม

สำหรับเกมนกที่สร้างขึ้นมานั้น จะใช้ไลบรารี่ TFT_eSPI ซึ่งจำเป็นจะต้องติดตั้งลงโปรแกรม ArduinoIDE ก่อน และตั้งค่าไลบรารี่ให้ใช้งานได้กับจอที่อยู่บน IOXESP32 Mini LCD shield โดยอ่านขั้นตอนได้ที่ การใช้งาน IOXESP32 Mini LCD shield กับ ArduinoIDE 

ส่วนประกอบบนหน้าจอ

ส่วนประกอบบนหน้าจอมีด้วยกัน 4 ส่วน คือ

1.พื้นหลังสีน้ำเงิน

เป็นพื้นหลังที่แทนเป็นท้องฟ้า อยู่กับที่ตลอดเวลา เริ่มวาดที่มุมบนซ้ายบนของหน้าจอ (พิกัด 0,0) ความกว้างเท่าขนาดของหน้าจอ (หน้าจอกว้าง 160 พิกเซล) และความสูงคือความสูงของจอ (จอสูง 80 พิกเซล) ลบ 5 พิกเซล ไว้สำหรับพื้นเขียวเข้ม (พื้นดิน)

2.พื้นสีเขียวเข้ม

เป็นพื้นที่แทนดิน ไว้แยกระหว่างดินกับท้องฟ้า (นกจะเคลื่อนที่ได้เฉพาะพื้นที่บนท้องฟ้าเท่านั้น จะลงไปต่ำกว่าพื้นที่ดินไม่ได้) วาดต่อจากท้องฟ้าที่พิกัด 0, 155 ความกว้างเท่าของหน้าจอ และความสูง 5 พิกเซล

3.รูปนก

เป็นรูปที่ใช้แทนตัวนก โดยรูปนี้สามารถเคลื่อนที่ขึ้นลงเพื่อหลบสิ่งกีดขวางได้ เมื่อกดสวิตช์ SW1 นกจะเลื่อนขึ้น (พิกัดแกน y ของนกลดลง) และเมื่อกดสวิตช์ SW2 นกจะเลื่อนลง (พิกัดแกน y ของนกเพิ่มขึ้น)

4.ท่อสีเขียว

ใช้เป็นสิ่งกีดขวาง แบ่งออกเป็นท่อ 1 ที่ติดกับด้านบน และท่อ 2 ที่ติดกับพื้นดิน โดยความสูงของท่อทั้ง 2 จะถูกสุ่มขึ้นมา และท่อทั้ง 2 จะวิ่งจากขวาไปซ้ายของหน้าจอตลอดเวลา (พิกัด x = 160 ไป -20 เมื่อ 20 คือความกว้างของท่อ) เมื่อท่อออกนอกจอ (พิกัด x ท่อ = -20) ท่อจะกลับมาที่ตำแหน่งขวาสุดของจอใหม่ (x ท่อ = 160) และสุ่มความสูงของท่อ 1 ใหม่ นำค่าที่ได้จากการสุ่มมาคำนวนค่าพิกัดแกน y ของท่อ 2 และความสูงของท่อ 2

เริ่มเขียนโปรแกรมเพื่อสร้างเกม

เริ่มต้นจาก include ไลบรารี่ TFT_eSPI เข้ามา เรียกใช้คำสั่งที่จำเป็นต่อการใช้งานจอ ใช้คำสั่ง pinMode() เตรียมพร้อมรับค่าจากสวิตช์ และคำสั่งอื่น ๆ ดังนี้

ใน void setup() สั่งให้วาดพื้นหลังสีฟ้า และพื้นดินสีเขียวเข้ม ดังนี้

สร้างตัวแปรต่าง ๆ เพื่อกำหนดตำแหน่งเริ่มต้นของวัตถุต่าง ๆ บนหน้าจอดังนี้

เริ่มเขียนโปรแกรมใน void loop() ตรวจสอบการกดสวิตช์เพื่อเปลี่ยนตำแหน่งของนกดังนี้

คำนวณพิกัดของนกและจอบนหน้าจอ แล้ววาดท่อและนกบนหน้าจอดังนี้

ใช้ if ตรวจสอบว่านกเข้ามาอยู่ในพื้นที่ของท่อกั้นหรือไม่ หากเข้ามาอยู่ในพื้นที่ ให้แสดงข้อความ Game over แล้วรอกดปุ่มเริ่มเกมใหม่ แล้วเปลี่ยนค่าต่าง ๆ เป็นค่าเริ่มต้นดังนี้

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

สุดท้ายใช้คำสั่ง delay เพื่อกำหนดความเร็วของการเลื่อนท่อดังนี้

โค้ดฉบับเต็ม

โค้ดโปรแกรมเต็ม ๆ มีดังนี้

แต่หากก๊อบไปใส่โปรแกรม ArduinoIDE เลย จะพบ Error ว่าไม่พบไฟล์ bird01.h ซึ่งเป็นไฟล์รูปนก ท่านสามารถดาวน์โหลดไฟล์รูปนกได้ที่ https://ioxhop.info/files/bird01.h ในโปรแกรม ArduinoIDE ให้กด 

แล้วอัพโหลดโปรแกรมลงบอร์ด IOXESP32 ได้เลย

ผลที่ได้ เป็นไปตามวีดีโอด้านล่างนี้