Game_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 แบบที่มีตัวแปรอินพุต