20128 – 2110
การเขียนโปรแกรมประยุกตบ์ นอปุ กรณ์พกพา
Kodular
Andriod Application by KruFam
ผู้สอน นางสาวรัชฎาเนตร สุราไพ
แผนกวิชาเทคโนโลยีคอมพิวเตอร์ วิทยาลยั เทคนคิ สิงหบ์ รุ ี
20128 – 2110 Workshop เกมปงิ ปอง
การเขยี นโปรแกรมประยกุ ตบ์ นอปุ กรณพ์ กพา
ผสู้ อน นางสาวรัชฎาเนตร สุราไพ
แผนกวิชาเทคโนโลยีคอมพิวเตอร์ วทิ ยาลัยเทคนคิ สงิ ห์บรุ ี
ร้จู กั กบั คอมโพเนนต์ Drawing and Animation
ใน App นี้เราจะใช้ component ในกล่มุ drawing and Animation ซ่งึ มกั จะนาไปใช้ทาเกม
ภาพเคลื่อนไหวและการวาดภาพ หรอื การลงลายเซน็ ช่อื เปน็ ตน้ โดยมคี อมโพเนนตส์ าคัญที่ตอ้ งใชร้ ว่ มกัน
คือ canvas, Ball และ Image Sprite
Canvas (0,0) X
คอมโพเนนตน์ ีจ้ ะเปน็ เหมือนๆผ้าใบสาหรบั ให้เราวาดภาพใส่ Y
ขอ้ ความ หรอื ทาภาพเคล่ือนไหว ท่ีตาแหน่งใดก็ได้บน Canvas โดยระบบ
พิกัด ( co - ordinate) ของ Canvas นั้นกาหนดใหม้ มุ บนซ้ายของ
Canvas เป็นจดุ (0,0) แนวนอนเปน็ แกน X สวนแนวต้ังเปน็ แกน Y ส่วน
ขนาดความกวา้ งและความสงู ของ canvas น้นั ขึ้นอยูก่ บั หนา้ จอของ
อปุ กรณ์ Android แตล่ ะรนุ่
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
Canvas กาหนดสีพนื้ หลัง
กาหนดภาพพื้นหลงั
ใน Canvas มีคาส่ังสาหรบั วาดจุด เส้นตรง เสน้ โคง้
วงกลม รูปหลายเหลย่ี มเป็นต้น โดยทเ่ี ราสามารถกาหนด กาหนดฟอนต,์ ขนาด,
ขนาดและสขี องเส้นได้ ตวั หนา, ตวั เอน
นอกจากน้ยี งั มีคาสัง่ สาหรบั แสดงขอ้ ความ (Draw Text) กาหนดความสูง ความ
เราสามารถกาหนด Font ( หรอื นาเขา้ Font) สี ขนาด กวา้ ง
ตัวอักษร ทาตวั หนา ตัวเอน จัดข้อความชดิ ซ้าย - ขวา หรือ กาหนดความกว้างของสี
กงึ่ กลาง และเสน้ ทวี่ าด
สดุ ท้าย เราสามารถจะบนั ทึกทุกอย่างทเ่ี ราวาดบน จดั ข้อความชดิ ซ้าย ชดิ ขวา หรือ
canvas รวมท้ังภาพพื้นหลงั ไว้ในเคร่อื งเปน็ ไฟล์ jpg หรือ กึ่งกลาง แสดง/ซ่อน Canvas
PNG กไ็ ด้
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
นาเข้าฟอนตส์ าหรบั ตัวอักษร
Canvas
นอกจากวาดภาพแลว้ เรายังสามารถทาภาพเคล่อื นไหว
หรอื เกม บน canvas ไดด้ ว้ ย โดยเราจะตอ้ งทา คอมโพเนนต์
อย่าง Ball หรือ Image Sprite มาวางบนแคนวาสแล้ว
กาหนดตาแหน่งพกิ ัด X,Y ความเร็วและทศิ ทาง ในการ
เคล่อื นที่ นอกจากน้เี รายงั สามารถใชน้ ิ้วกับ Sprite เช่น แตะ
(Touch) ลาก(Drag) ปดั (Flung) รวมท้ังสามารถตรวจสอบ
การชนกันของ Sprite หรือชนขอบ canvas ไดด้ ้วย
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
Ball
เปน็ Sprite สาเร็จรปู ท่มี ลี ักษณะเปน็ วงกลมเหมอื นลูกบอล ซง่ึ เรา
สามารถกาหนดพร๊อพเพอรต์ ้ตี ่างๆได้ดงั นี้
Heading คอื ค่ามมุ ในการเคลื่อนท่ดี งั ภาพโดยมีหนว่ ยเป็นองศา
90° ความเรว็ ในการเคลื่อนท่ี
ความจริงแลว้ คา่ Speed คือจานวน
พิกเซลในการเคล่อื นทีแ่ ต่ละครงั้ สว่ น
180° 0° interval คอื คาบเวลาในการเคลอื่ นทีแ่ ต่ละ
คร้งั หน่วยเปน็ ms (millisecond) ยกตัวอยา่ ง
เช่น เรากาหนดคา่ Speed =10 และ
interval = 30 นนั้ หมายความว่า Sprite น้ีจะ
270° เคลอื่ นทีไ่ ปท่ี 10 พกิ เซลทกุ ๆ 30 ms นนั่ เอง
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
Ball คลกิ ถกู เพ่อื ให้ Sprite ทางาน
ค่ามมุ ในการเคล่ือนที่
อย่างไรก็ตาม มีข้อท่ีต้องพจิ ารณาคือ หากเรากาหนดค่า Speed ตาแหนง่ ของลูกบอลอยทู่ ่จี ดุ
มากเกินไปเชน่ 100 กจ็ ะทาให้การเคลือ่ นท่ีเหมือนไม่ต่อเนื่อง เพราะ ศนู ยก์ ลาง
Sprite จะย้ายตาแหน่งไปหางมาก สว่ นการกาหนดคา่ interval ต่า สขี องลูกบอล
เกนิ ไป จะทาให้เกิดการขยับ Sprite บ่อยเกินความจาเป็น ดงั น้นั จึง รัศมขี องลูกบอล
ต้องกาหนดค่าให้เหมาะสม เช่น Speed อยูใ่ นช่วง 10 - 50 และ แสดง/ซอ่ น Sprite
interval ไมค่ วรนอ้ ยกว่า 5-10 ms ตาแหน่ง X, Y
แกน Z
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
นอกจากตาแหนง่ X,Y แลว้ ยังมีพร๊อพเพอรต์ ี้ Z ซึ่งใชร้ ะบวุ า่ แต่
ละ Sprite อยใู่ นชัน้ หรอื เลเยอร์ใด ค่า Z ทม่ี ากกวา่ แสดงว่า Sprite
น้นั อยู่ในเลเยอร์ทสี่ งู กว่า เชน่ เม่อื Sprite เคล่ือนทมี่ าอยูใ่ นตาแหนง่
X,Y เดียวกัน เราจะเห็น Sprite ท่มี คี ่า Z มากกว่า บงั Sprite ที่มีคา่
Z น้อยกวา่
Image Sprite คลิกถูกเพ่อื ให้ Sprite ทางาน
คา่ มุมในการเคลือ่ นท่ี
เปน็ Sprite ทเ่ี ราสามารถกาหนดใหแ้ สดงภาพใดๆก็ได้โดยกาหนด ขนาดความกวา้ งและความ
ช่ือไฟลภ์ าพในพรอ๊ พเพอรต์ ี้ Pictures สูงของ Sprite
ในการกาหนดความกว้างและความสงู ของ Sprite ต้องคานวณให้ ภาพทีแ่ สดงเปน็ Sprite
ถกู ต้องเพอื่ ใหภ้ าพไม่ผดิ เพย้ี นไป โดยรกั ษาอัตราสว่ นระหวา่ งความ หมุนภาพ Sprite ตามคา่ มมุ
กวา้ งกบั ความสงู (Aspect ratio) ให้คงเดมิ Heading
แสดง/ซ่อน Sprite
Image Sprite มีพร๊อพเพอรต์ ้ี Rotates ซงึ่ หากคลกิ ถกู จะทาให้
ภาพ Sprite หมุนไปตามทศิ ทางทเ่ี คลอื่ นที่ (ค่ามุม Heading) ดังนั้นใน ตาแหน่ง X, Y
การเตรียมภาพ Sprite กจ็ ะต้องหนั ด้านบนไปทางขวา ดงั ตัวอย่าง
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
0°
Sound ใหเ้ อาอพั โหลดไฟลเ์ สยี งไป
เก็บไวใ้ น Assets ของโปร
เพอื่ ให้เกมมรี สชาตมิ ากข้ึน เราก็จะเพิม่ Sound effect อย่างเชน่ เจกต์ แล้วกาหนดในช่อง
เสยี งลกู ปิงปองกระทบไม้ หรือให้เคร่อื งส่นั เมื่อรับลูกปิงปองไม่ได้เป็น Source ใชไ้ ฟล์เสยี งน้นั
ต้น เราสามารถทาได้โดยใช้ Sound ซง่ึ เปน็ คอมโพเนนตใ์ นกลุ่ม
media ใช้สาหรบั เล่นไฟลเ์ สียงในฟอรแ์ มตตา่ งๆ เชน่ mp3, 3gp, JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
m4a, ogg เป็นตน้
นอกจากเล่นไฟลเ์ สียงแลว้ ยังมคี าสั่งในการสั่นเครื่อง (Vibrate) รวมทัง้
กาหนดหมวดของเสียงเรยี กเขา้ (Ringer mode) ใหม้ เี สยี งรงิ โทน หรือ
สั่น หรอื เงียบ
CREATIVE IDEA
Conveniently iterate
top-line alignments for
wireless metrics
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
CREATIVE IDEA
Conveniently iterate
top-line alignments for
wireless metrics
Jhon Dee / General Manager
CREATIVE IDEA
Conveniently iterate
top-line alignments for
wireless metrics
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
CREATIVE IDEA
Conveniently iterate
top-line alignments for
wireless metrics
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
CREATIVE IDEA
Conveniently iterate
top-line alignments for
wireless metrics
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
CREATIVE IDEA
Conveniently iterate
top-line alignments for
wireless metrics
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
CREATIVE IDEA
Conveniently iterate
top-line alignments for
wireless metrics
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
CREATIVE IDEA
Conveniently iterate
top-line alignments for
wireless metrics
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
เมื่อแอปเร่มิ ทางาน เมอ่ื คลกิ ปุ่ม Start เมื่อลกู ปิงปองกระทบ
กCาหRนEดAตTาแIVหEน่งIขDอEงตAัวเลข Digit1-3, ซ่อนปุ่ม Start กบั ไม้
ปลอ่ ยลูกปงิ ปอง
Conveniently iterate เลน่ ไฟลซ์ าวดเ์ อฟเฟกต์
ปมุ่ Start และไมต่ ี Battop-line alignments for ลกู ปงิ ปองกระเด้ง
wireless metrics ไดค้ ะแนนเพ่มิ
เริม่ เกมใหม่ แสดงคะแนน
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
เร่ิมเกมส์ใหม่ ปล่อยลกู ปงิ ปอง แสดงคะแนน
แยกตัวเลขคะแนนเป็น
แสดงปมุ่ Start สมุ่ ตาแหน่งทางแกน X ของ
ลกู ปงิ ปอง ตัวเลข 3 หลัก
แสดง Lift 1-3 นาตวั เลขแต่ละหลักไป
กาหนดตาแหนง่ ทางแกน Y กาหนดภาพท่จี ะแสดงใน
CREATIVE IDEA ของลกู ปิงปองเป็น 0
Digit 1 -3
Conveniently iterate สุ่มทศิ ทางการเคล่อื นทข่ี อง
top-line alignments for ลูกปงิ ปอง JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
wireยleา้ssยmBeatrticsมาอยตู่ รงกลาง กาหนดความเรว็ เริม่ ตน้ ของ
รเี ซตคะแนนเปน็ 0 ลกู ปงิ ปอง
แสดงคะแนน
เมือ่ ลูกปงิ ปองชนของ
Canvas
ชนขอบ ไม่ใช่
ล่าง
ชนขอบ ไม่ใช่
ใช่ ลา่ ง
ลบ Life ออก 1
ใช่ เมอื่ ผูใ้ ช้ลากน้ิวบนหนา้ จอไป
ทางซ้าย- ขวา
ยงั เหลอื Life หมด เพิม่ ความเรว็ ลกู ปงิ ปอง
ปลอ่ ยลูกปิงปอง หรือยัง เลอื่ นไม้ตีไปทางซ้าย – ขวา
ลกู ปิงปองกระเดง้ ตามน้วิ ของผใู้ ช้
ไมเ่ ลน่ แลว้ หมดแลว้
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
ปิดแอป ถามผ้เู ล่นวา่
จะเลน่ ตอ่
หรอื ไม่
เล่นตอ่
เริ่มเกมส์ใหม่
Screen1 Image Sprite เปลย่ี นชอ่ื เปน็ Life1
Screen Orientation
Scrollable Portrait Hight 50px
Title Visible ลบเคร่อื งหมายถกู
ลบเครอ่ื งหมายถูก Width 36px
Picture Life.png
X 20
Canvas Y 10
Background Color
Hight #1C292DFF Image Sprite เปล่ยี นช่อื เป็น Digit1
Width Fill parent
Fill parent Hight 50px
Width 30px
Picture 0.png
Y 10
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
Ball Image Sprite เปลยี่ นชือ่ เปน็ Bat
Paint Color
Radius Teal Height 10px
z 10
2 Width 50px
Picture bat.png
Image Sprite เปลย่ี นชอื่ เปน็ Start
Height 108px
Width 108px
Picture Start.png
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
การต่อบล็อก
ในตอนเรม่ิ ตน้ เราจะสรา้ งตัวแปร Global ขึน้ มา 1 ตวั ชอ่ื ว่า Score เพอื่ ใช้เกบ็ คะแนน จากนั้นก็
สร้าง procedure ตามทเ่ี ราออกแบบการทางานไว้ สาหรับ procedure แรกทเี่ ราจะเขียนโปรแกรม
คอื resetGame ใชส้ าหรับเรม่ิ เกมใหมโ่ ดยจะสงั่ ให้
แสดงผล Start และ Sprite Life 1-3 ดว้ ยการ
กาหนดพร็อพเพอร์ตี้ visible ใหเ้ ปน็ True
จากนัน้ รเี ซต็ คะแนนในตัวแปร score ให้เป็น 0
แลว้ แสดงคะแนนดว้ ย ShowScore
Canvas Width/2
และคาส่ังสุดทา้ ย คือ การกาหนดตาแหนง่ ทางแกน x
ของไม้ตี (Bat) ซ่งึ สามารถคานวณได้โดยนาครง่ึ หนงึ่ x Bat
ของความกวา้ ง canvas ลดครง่ึ หน่ึงของความกว้าง Bat width/2JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
Bat ไดต้ ามสูตรนี้ ℎ − ℎ
2
การต่อบลอ็ ก Modulo (กลุม่ Math) ใช้
คานวณหาเศษท่ไี ดจ้ ากการหาร
Procedure ถดั มาคือ ShowScore ใชส้ าหรบั แสดงคะแนนท่ีเกบ็ ไว้ใน ตัวเลข 2 จานวน
ตวั แปร Score โดยแยกตวั เลขออกเปน็ 3 หลกั แล้วนาตวั เลขหนว่ ยไป
แสดงผลที่ Sprite Digit1 ส่วนตัวเลขหลักสิบ และหลกั ร้อย ใหแ้ สดงผล จากตวั อย่าง เมอ่ื หาร 7 ด้วย 3
ที่ Digit2 และ Digit3 ตามลาดบั จะเหลอื เศษ 4
การแยกตัวเลขแตล่ ะหลักออกมามหี ลกั การดงั น้ี Floor (กลุ่ม Math) ใช้ปดั เศษให้
• การแยกตวั เลขหลกั หนว่ ย ใชบ้ ลอ็ ก modulo เพือ่ หาเศษจากการ เป็นจานวนเต็ม
หาร score ด้วย 10 จากตวั อยา่ ง จะปดั เศษลงเปน็
• การแยกตัวเลขหลักรอ้ ย ให้หาร score ด้วย 100 แล้วปัดเศษลงให้ จานวนเต็ม 2
เหลือจานวนเตม็ ดว้ ยบล็อก floor JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
• การแยกตัวเลขหลักสิบ จะตอ้ งหารสกอร์ด้วย 10 แลว้ ปัดเศษลง
ดว้ ยบล็อก floor จากนั้นจึงใช้ modulo เพอ่ื หาเศษจากการหาร
ดว้ ย 10
การตอ่ บล็อก
อาศัยบล็อก modulo และ floor ทาให้เราสามารถ แยกตวั เลขคะแนนออกเปน็ 3 หลกั ได้ ใหน้ าตวั เลขมา join
กบั ขอ้ ความ .png เพื่อใหไ้ ดช้ อ่ื ไฟล์ภาพ แลว้ นาชอื่ ไฟลภ์ าพน้ไี ปกาหนด Property Pictures ของ Sprite แตล่ ะตัว ทา
ใหแ้ สดงตวั เลขคะแนนได้
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
การตอ่ บล็อก
Procedure สุดท้ายคือ newBall ใช้สาหรบั ปลอ่ ยลกู ปิงปองออกมาจากขอบดา้ นบนของ canvas ( Y = 0) โดยสูง
ทงั้ ตาแหน่งทางแกน X และทศิ ทางการเคล่ือนที่ (ค่ามุม heading)
ใช้บลอ็ ก Random integer ( จากกล่มุ Math) เพอ่ื ส่งตวั เลขจานวนเต็มในช่วงทก่ี าหนด นน่ั
คอื ตลอดชว่ งความกวา้ งของ canvas สาหรับกาหนดตาแหนง่ ทางแกน X ของ Ball1
กาหนดความเร็วในการเคลือ่ นที่ของลกู ปงิ ปอง ดว้ ยค่า Speed
=15px และ interval = 30ms ซ่ึงเท่ากบั ความเรว็ 500 พิกเซล
ต่อวนิ าที JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
การตอ่ บล็อก
เพ่อื ควบคุมการสมุ่ คา่ Heading จึงแบ่งการสง่ ออกเปน็ 2 ชว่ ง คือคา่ มมุ 226 องศา ถงึ 260 องศา และ 280 องศา
ถงึ 314 องศาองศา แล้วใช้คา่ จาก random faction เพื่อเลือกวา่ จะส่งชว่ งไหน
ใชส้ มุ่ จานวนเตม็ ในชว่ งที่กาหนด
ใชส้ ุ่มทศนยิ มตั้งแต่ 0 และไมเ่ กนิ 1
Jhon Dee / General Manager
การต่อบลอ็ ก
เม่อื แอปเร่มิ ทางาน สิง่ ทตี่ อ้ งทาก่อนคือ การกาหนดตาแหน่งของ sprite ตา่ งๆไดแ้ ก่ Digit1-3, ป่มุ Start และ
ไม้ตี (Bat) เนอ่ื งจากไมส่ ามารถกาหนดตาแหนง่ ในหนา้ Designer ได้ก่อน เสรจ็ แล้วจึงเรยี กใช้ procedure
resetGame เพอ่ื เริม่ เกมใหม่ Canvas Width
ในการคานวณตาแหน่งทางแกน X ของ Digit1-3 ใช้
หลกั เดยี วกบั ทผี่ า่ นมา
ความกว้างของ Sprite = 30px 10px
ระยะห่างระหวา่ ง Sprite = 5px 20px
ดังนัน้ ตาแหน่งทางแกน x ของ Digit 1
= canvas width-20-30
สว่ นตาแหน่งทางแกน x ของ Digit 2
= canvas width-50-5-30
สว่ นตาแหน่งทางแกน x ของ Digit 3
= canvas width-85-5-30 ระยะหา่ งระหวา่ ง Sprite = 5pxJhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
การต่อบล็อก ตาแหน่งทางแกน x ของ Digit 1
= canvas width-20-30
เรากาหนดให้ตาแหน่งทางแกน Y ของ สว่ นตาแหนง่ ทางแกน x ของ Digit 2
ไม้ตี (Bat) อย่ทู ี่ 85% ของ Canvas = canvas width-50-5-30
Height เพื่อให้เหลือพนื้ ท่ีด้านล่างอกี ส่วนตาแหน่งทางแกน x ของ Digit 3
15% สาหรับใช้นวิ้ ควบคมุ ไมต้ ี = canvas width-85-5-30
เราใชส้ ูตรนีเ้ พือ่ กาหนดตาแหนง่ ของปุ่ม
Start ให้อยู่กง่ึ กลางของ Canvas พอดี
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
การต่อบลอ็ ก
เมอ่ื ผู้ใช้ตอ้ งการเลน่ เกม กจ็ ะแตะปมุ่ start แต่เนื่องจากไมม่ ีอเี วนต์ Click ในคอมโพเนนต์ Image Sprite เรา
จงึ ประยุกต์ใช้อีเวนต์ Touch Up เมื่อเราแตะป่มุ แล้วกจ็ ะตอ้ งซอ่ นปมุ่ ไม่ใหเ้ กะกะ แลว้ เริ่มปลอ่ ยลูกปงิ ปองออกมา
ดว้ ย procedure newBall
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
การตอ่ บลอ็ ก
เมื่อ procedure newBal กาหนดค่า speed ใหก้ บั ลูกทมี (Ball1) แล้ว ลูกปิงปองกจ็ ะเคลื่อนทีท่ นั ที ซ่งึ ลกู
ปงิ ปองอาจว่งิ ไปชน sprite อ่ืน ๆ แตท่ เ่ี ราสนใจคอื ไปชนไมต้ ี (Bat) แสดงวา่ ผเู้ ล่นรับลกู ได้ กจ็ ะตอ้ งมเี สยี งปิงปอง
กระทบไม้ จากน้ัน ลกู ก็จะกระเดง้ กลับไปและผู้เลน่ ได้คะแนนเพิม่ -4 1 2
เมือ่ sprite มาชนกันก็จะเกิดอเี วนต์น้ี ภายในอี ใช้ If เพอื่ ตรวจสอบว่าในตวั แปรคอื
เวนตม์ ีตวั แปร other ซึ่งบอกใหร้ ู้วา่ ชนกับอะไร คอมโพเนนต์ Bat หรือไม่
-3 3
เลน่ ไฟลเ์ สยี งท่กี าหนดไว้
เพม่ิ คะแนนอีก 1 แล้วแสดงผล -2 -1 4
คาส่งั Bounce ใชท้ าให้ sprite กระเด้ง โดยเราตอ้ ง ขอบ (edge) แตล่ ะด้าน
กาหนดหมายเลขของขอบ (edge) ในทนี่ ้ีคือ -1 เพราะ JhonมADeหีnedมr/าiGoยednเeAลraขplpตMli่าacnงaatกgioeันnr by KruFam
เหมอื นขอบดา้ นลา่ ง
การต่อบล็อก
นอกจากลูกปงิ ปองจะชน sprite อน่ื ๆแล้ว กย็ ังสามารถวง่ิ ไปชนขอบของ canvas ได้
ดว้ ย ซง่ึ เม่อื ชนขอบ (edge) ก็จะเกดิ อีเวนต์ Edge Reached ขนึ้ ภายใน อีเวนต์ มีตัวแปร edge
ซ่ึงจะบอกเปน็ ตัวเลขวา่ ชนขอบดา้ นไหน
ใช้ If ตรวจสอบคา่ ในตัวแปร edge หากเท่ากับ -1 แสดงว่าชนขอบด้านล่าง นนั่ หมายความวา่ ผเู้ ลน่ รบั
ลกู ไมท่ นั
คาสง่ั Vibrate จะส่นั เคร่อื งนาน 500ms หรือครึ่งวินาที เพื่อใหผ้ ู้เลน่ รบั รู้
If อันท่ี 2 น้ี จะตรวจสอบไลไ่ ปทลี ะอนั ตั้งแต่ Life 3 ว่ายังแสดงผลอยู่หรือไม่ โดยดจู าก
Property visible หากยังแสดงอยู่ ก็จะซอ่ นเสยี แล้วปลอ่ ยลกู ใหม่
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
การตอ่ บลอ็ ก
จนมาถึง Life แสดงวา่ รับพลาดครบ 3 ครั้ง กจ็ บเกม จงึ หยุดลูกปงิ ปองโดยกาหนด Speed เปน็ 0
แสดงไดอะลอ็ กเพ่อื ถามผเู้ ลน่ วา่ ตอ้ งการเลน่ อีกไหม If น้จี ะตรวจสอบว่า ชนขอบด้านบน (edge = 1)
หรอื ไม่ หากใช่ ก็จะเพม่ิ ความเร็วของลูกปงิ ปอง
โดยลดคา่ interval ลงอกี 1
แต่เนอ่ื งจากไมต่ อ้ งการใหล้ ดต่าเกนิ ไป จึงใช้ and เพื่อเชอ่ื มเงื่อนไขโดยเพ่ิมคา่ interval
ต้องมากกว่า 6 ด้วย จงึ จะลดค่าลงได้ นน่ั หมายความว่าจะลดJhไoดnAต้Deา่nedสr/ดุ iGoถednงึ eAr6aplpเMlทiacา่naaนtgiนั้oenr by KruFam
การตอ่ บล็อก
หากชนขอบดา้ นอนื่ กจ็ ะมา
ที่ else น้ี
สุดท้ายให้ลกู ปงิ ปองกระเดง้ กบั ขอบด้านนัน้ ดว้ ย
คาส่ัง Bounce โดยใช้ตวั เลขในตวั แปร edge
เพ่ือระบวุ า่ เป็นขอบดา้ นใด
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
การต่อบลอ็ ก
ตอ่ เนื่องจาก Show Choose Dialog เม่อื ผู้ใชเ้ ลอื กคลกิ ปุ่ม เร่มิ ใหม่ หรอื ปดิ แอป ก็จะเกิดอเี วน้ ต์ After
Choosing ในตัวแปร choice จะมีข้อความบนปมุ่ ที่ผู้ใช้คลกิ
ใช้ If เพ่ือตรวจสอบค่าในตวั แปร choice หาก
เป็นข้อความ “เริม่ ใหม่” ก็จะเรมิ่ เกมใหมโ่ ดย
เรียกใช้ procedure resetGame
หรอื ปดิ แอปดว้ ยคาสัง่ close application
บล็อกนอี้ ยู่ในกลมุ่ Control
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
การตอ่ บลอ็ ก
ผ้ใู ชส้ ามารถควบคมุ ไม้ตีได้ โดยการวางน้วิ ลงบริเวณด้านลา่ งของ canvas แล้วลากน้วิ ไปทางซา้ ยหรอื ขวา ซ่งึ เม่อื ผใู้ ช้
ลากน้วิ บน canvas กจ็ ะเกดิ อีเวน้ ต์ Dragged ขึ้น พรอ้ มกับใหค้ า่ พิกดั X,Y 3 คู่คือ
• Start X,Y คอื พกิ ดั ณ ตาแหนง่ ท่ีเร่มิ ต้นลากน้วิ
• Current X,Y คอื พกิ ดั ปัจจุบันทน่ี ้ิวแตะอยู่
• Prev X,Y คือพิกดั ทีน่ ิ้วแตะกอ่ นตาแหนง่ ปจั จุบัน
เนือ่ งจากเราต้องการควบคุมไมต้ ี ให้เคล่อื นท่ไี ปทางซ้าย-ขวาเทา่ นน้ั จงึ กาหนดตาแหนง่ ทางแกน X ตามตาแหนง่
ปัจจบุ นั ของนิว้ (current x) แตอ่ ยา่ ลมื วา่ ต้องลบดว้ ยครึง่ หนงึ่ ของความกวา้ งของไมต้ ีด้วย เพอ่ื ไมใ่ ห้ไมต้ อี ยู่ใน
ตาแหน่งทถ่ี ูกต้อง JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam
อ้างอิง
- ณรงคพ์ ร เหล่าศรสี ิน. คมู่ อื สร้าง android
Application ด้วย Kodular.—สมุทรสาคร :
บริษัท พิมพ์ดี จากดั
JhonADenedr/ iGoedneAraplpMliacnaatgioenr by KruFam