บทที่ 14 – สร้างเกม Pong

คุณสมบัติของแอพ

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

คอมโพเนนต์ที่กล่าวถึง

• Canvas เป็นคอมโพเนนต์สำหรับการวาดเส้น และทำภาพเคลื่อนไหว
• ImageSprite ในบทนี้จะใช้ในหลายจุด เช่น ใช้เป็นปุ่มเริ่มเกม, ลูกปิงปอง, ไม้ตี และส่วนควบคุมไม้ตี

Properties ที่สำคัญ

ในแอพนี้ จะมีการกำหนด properties ของ Screen1 เพื่อให้สามารถใช้พื้นที่ได้เต็มจอ

• Show Status bar ในแอพนี้ ให้นำเครื่องหมายถูกหน้าช่องนี้ออก เพื่อซ่อน Status bar
• TitleVisible ในแอพนี้ ให้นำเครื่องหมายถูกหน้าช่องนี้ออก เพื่อซ่อนแถบ Title

บล็อกที่สำคัญ

• ImageSprite Touched เป็นอีเวนต์ที่เกิดขึ้นเมื่อมีการใช้นิ้วแตะที่ ImageSprite โดยจะให้ตำแหน่ง co-ordinate X, Y ที่มีการแตะ
• ImageSprite Dragged เป็นอีเวนต์ที่เกิดขึ้นเมื่อมีการใช้นิ้วลาก ImageSprite โดยจะให้ตำแหน่ง co-ordinate X, Y 3 ชุด คือ
• start X, Y จุด co-ordinate เมื่อเริ่มลาก
• prev X, Y จุด co-ordinate ก่อนหน้า
• current X, Y จุด co-ordinate ล่าสุด
• ImageSprite CollidedWith เป็นอีเวนต์ที่เกิดขึ้นเมื่อ ImageSprite เคลื่อนที่มาชนกัน โดยในตัวแปร other จะบอกให้รู้ว่า ชนกับ ImageSprite ตัวไหน
• ImageSprite EdgeReached เป็นอีเวนต์ที่เกิดขึ้นเมื่อ ImageSprite เคลื่อนที่มาชนขอบของ Canvas โดยในตัวแปร edge จะบอกให้รู้ว่า ชนกับขอบด้านไหน ขอบแต่ละด้านจะมีค่าเป็นหมายเลข ดังนี้
• 1 คือ ด้านบน
• -1 คือ ด้านล่าง
• -3 คือ ด้านซ้าย
• 3 คือ ด้านขวา
• MoveTo ใช้สำหรับเคลื่อนย้าย ImageSprite ไปยังตำแหน่ง X, Y ที่กำหนด
• Bounce ใช้สั่งให้ ImageSprite กระเด้งกับขอบ (edge) ที่กำหนด
• set X, Y กำหนดตำแหน่ง co-ordinate ของ ImageSprite
• set Heading กำหนดค่ามุม หรือทิศทางที่ ImageSprite จะเคลื่อนที่ไป
• set Speed กำหนดจำนวนพิกเซลที่ ImageSprite จะเคลื่อนที่ในแต่ละช่วง Interval
• set Interval กำหนดช่วงเวลาที่ ImageSprite จะเคลื่อนที่ในแต่ละครั้ง โดยมีหน่วยเป็น millisecond
• random integer ใช้สำหรับ random ตัวเลขจำนวนเต็ม ในช่วงที่กำหนด โดยในบทนี้ ใช้เพื่อ random ตำแหน่งเริ่มต้นของลูกปิงปอง และมุมที่จะเริ่มวิ่ง

ความรู้อื่นๆ

• การสร้าง Procedure แบบที่มีตัวแปรอินพุต