การเรียนการสอนเขียนโปรแกรมระดับประถมศึกษา

9. โปรแกรมจะแสดงผลออกมาวา่ “บรรทดั น้ีสมบูรณ์แลว้ ” ใหก้ ดป่ ุม เพ่ือแสดง
ผลลพั ธข์ องโปรแกรมคาสง่ั ท่ีสร้างไว้

10. หนา้ จอจะแสดงผลลพั ธข์ องโปรแกรมท่ีเพ่ิงเขียนไปในข้นั แรก เป็นหนา้ จอของเกมส์
มีหวั ใจแสดงชีวติ ของผเู้ ล่นเกมส์ และมุมขวาเป็นคะแนน กด เพ่ือทาต่อ

คู่มือการเรียนการสอน หลกั สูตรการเขียนโปรแกรมเบือ้ งต้น โครงการ Microsoft YouthSpark 51

11. หนา้ จอจะแสดงวดี ีโอของข้นั ต่อไป ผสู้ อนอธิบายวิธีการสร้างเกมส์ Flatverse ไปทีละ
ข้นั ตอน และใหผ้ เู้ รียนลองทาตาม (รายละเอียดข้นั ตอนท้งั หมด ดูภาคผนวก)

คู่มือการเรียนการสอน หลกั สูตรการเขียนโปรแกรมเบือ้ งต้น โครงการ Microsoft YouthSpark 52

12. หนา้ จอของการเขียนโปรแกรมจะมีป่ ุมหลกั ๆ อยทู่ ้งั หมด 4 ป่ ุมดา้ นซา้ ยดงั น้ี

เป็นป่ ุมที่แสดงผลลพั ธ์ของโปรแกรมท่ีเขียนไว้
เป็นป่ ุมเพ่ือยอ้ นกลบั ไปยงั คาสง่ั เก่า
เปลี่ยนมุมมองของการเขียนโปรแกรมเป็นดงั แสดงดา้ นล่าง คือมีหนา้ จอ
แสดงผลลพั ธก์ ารเขียนโปรแกรมอยดู่ า้ นขา้ ง ค่กู บั หนา้ จอเขียนโปรแกรม

คู่มือการเรียนการสอน หลกั สูตรการเขียนโปรแกรมเบือ้ งต้น โครงการ Microsoft YouthSpark 53

เป็นป่ ุมท่ีนาไปสู่หนา้ เมนูหลกั หรือการออกจาก tutorial ดงั ภาพดา้ นล่าง ซ่ึงจะมี
ป่ ุมคาสง่ั หลกั ดงั น้ี

เป็นป่ ุมคาสง่ั เพื่อจะไปเรียน Tutorial ต่อจากจุดเดิม

เป็นป่ ุมคาสง่ั เพื่อลองเล่นโปรแกรมท่ีเขียนไว้

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

13. เมื่อจบส่วนของการอธิบายการสร้างเกมส์ Flatverse แลว้ ผสู้ อนลองทา้ ทายใหผ้ เู้ รียน
คิดเพิ่มเติมดงั น้ี

- ในเกมส์ Flatverse ที่มีอยนู่ ้นั สามารถปรับส่วนไหนของเกมส์เพิ่มเติมไดบ้ า้ ง

เพ่ือใหเ้ กมส์มีความทา้ ทายยงิ่ ข้ึน และตอ้ งปรับท่ีบริเวณใดของ Code

คู่มือการเรียนการสอน หลกั สูตรการเขียนโปรแกรมเบือ้ งต้น โครงการ Microsoft YouthSpark 54

ภาคผนวก

กิจกรรม 2: เขียนโปรแกรมกระดาษกราฟ (โจทย)์

อ้างอิง: code.org 55

คู่มือการเรียนการสอน หลกั สูตรการเขียนโปรแกรมเบือ้ งต้น โครงการ Microsoft YouthSpark

กิจกรรม 2: เขียนโปรแกรมกระดาษกราฟ

อ้างอิง: code.org 56

คู่มือการเรียนการสอน หลกั สูตรการเขียนโปรแกรมเบือ้ งต้น โครงการ Microsoft YouthSpark

กิจกรรม 4: ทดลองเขียนโปรแกรมดว้ ยตนเองผา่ นเกมส์ Flatverse โดยใช้ Microsoft Touch Develop

ข้นั ตอนท่ี การดาเนนิ การ ถอดบทเรียนทสี่ าคญั

1 สร้างกระดานเปลา่

2 ปรับคา่ จานวนชีวติ เหลือ 1 ชีวติ

3 สร้างวงกลมยานอวกาศ รู้จกั Sprite

4 เปล่ียนสีวงกลมยานอวกาศเป็ นสีเขียว เรียกใชฟ้ ังกช์ นั ของ Sprite

5 เปล่ียนค่าแรเงาวงกลมยานอวกาศออก (ใหเ้ ป็ น Flat Design)

6 เร่ิมสร้าง Event ของการ Tap หนา้ จอ (เพื่อใหย้ านวง่ิ ไปตามทิศท่ีแตะหนา้ จอ) รู้จกั Event Handle

7 ต้งั คา่ Speed เริ่มตน้ ของยานเป็ น 80

8 เพมิ่ การเรียกฟังกช์ นั คานวณความเร็วยานในแกน x, y โดยรับพารามิเตอร์เป็ น

ค่า x, y ของตาแหน่งท่ีผเู้ ลน่ แตะจอ

9 เพิ่มการเรียกฟังกช์ นั ท่ีใหย้ านวง่ิ ในฟังกช์ นั main เขา้ ใจการทางานของฟังกช์ นั main

และฟังกช์ นั อื่นๆ

10 เอาการต้งั ค่า Speed 80 ออกจากฟังกช์ นั main

11 วางการต้งั ค่า Speed 80 ไวท้ ่ีฟังกช์ นั set game control value ซ่ึงเป็ นฟังกช์ นั

รวมการต้งั ค่าเกมส์ท้งั หมดแทน

12 เพม่ิ ใหม้ ีการเรียกฟังกช์ นั set game control value ในฟังกช์ นั main เพ่อื ใหม้ ี

การต้งั คา่ ที่จาเป็ นเม่ือเริ่มเกมส์

13 เพ่มิ การต้งั คา่ bounce on sides ใหก้ บั เกมส์เพ่ือใหย้ านชนขอบจอแลว้ จะ

กระเดง้ กลบั ไม่ใช่ทะลอุ อกนอกจอไป

14 สร้างวงกลม Chaser (ผไู้ ลล่ ่ายานอวกาศ)

15 ต้งั คา่ ให้ Chaser มีตาแหน่งเกิดแบบสุ่ม โดยใช้ mathrandom และใหr้ andom รู้จกั การใชง้ านฟังกช์ นั ที่เก่ียวขอ้ ง

คา่ x ระหวา่ ง 0 กบั boardwidth และคา่ y ระหวา่ ง 0 กบั boardheight กบั Math

16 ใส่ฟังกช์ นั create safe zone เพ่ิมใหก้ บั Chaser เพ่อื ป้ องกนั การสุ่มเกิดแลว้ ได้

ตาแหน่งที่ทบั กบั ยานอวกาศ

17 ต้งั คา่ ให้ Chaser เพิม่ อีก คือ สุ่มสี และ เอาค่าแรเงาออก (Flat Design)
18 เรียกใชง้ านฟังกช์ นั set sprite position ใน main เพอ่ื ให้ Chaser เกิดตาแหน่ง

สุ่มข้ึนในเกมส์จริง

19 สร้างฟังกช์ นั ใหมข่ ้ึนเองช่ือ set sprite size โดยรับพารามิเตอร์เป็ น Sprite เพื่อ รู้จกั วธิ ีการสร้างฟังกช์ นั ข้ึนใหมเ่ พ่อื

เอาไวก้ าหนดขนาดของ Chaser ใชง้ านเองและพารามิเตอร์

20 ระบุในฟังกช์ นั set sprite size วา่ size มีคา่ เป็ น 20 พกิ เซล
21 เพมิ่ การ random เลขระหวา่ ง 0,1,2 ข้ึนมา โดยถา้ ขนาดเป็ น 0,1 แปลวา่ ยานเรา

กิน Chaser น้นั ได้ แต่ถา้ 2 แปลวา่ Chaser ใหญก่ วา่ ยานเรา

22 เขียนเพม่ิ วา่ if random number มีคา่ เป็ น 0 หรือ 1 จะใหข้ นาดของ Chaser ตวั รู้จกั การใชเ้ ง่ือนไข If-Else
น้นั มีขนาด random ต้งั แต่ 5 พิกเซลไปจนถึงขนาดของ hero – 1 พกิ เซล

คู่มือการเรียนการสอน หลกั สูตรการเขียนโปรแกรมเบือ้ งต้น โครงการ Microsoft YouthSpark 57

ข้นั ตอนที่ การดาเนนิ การ ถอดบทเรียนทสี่ าคญั
23
เขียนเพิม่ else เพ่อื จดั การกรณีสุ่มไดเ้ ลข 2 วา่ else แลว้ จะใหข้ นาดของ chaser
ตวั น้นั random ต้งั แต่คา่ ขนาด hero size ไปจนถึงขนาดของ max hero size
(เป็ นคา่ ที่อยใู่ นฟังกช์ นั set game control value อยแู่ ลว้ )

24 เขียนเพม่ิ ใหน้ าคา่ random ขนาดท่ีไดจ้ าก if-else จากข้นั ตอนก่อนหนา้ มา
กาหนดเป็ นขนาดของparameter ของฟังกช์ นั

25 นาฟังกช์ นั set sprite size ไปใส่ในฟังกช์ นั main เพอื่ ใชง้ านจริง

26 เร่ิมทาให้ Chaser ไลต่ ามยานได้ โดยเริ่มใส่ Event on every frame เขา้ ไป
(เพื่อจบั ตาดูทุกเฟรมของเกม)

27 เขียนเพิ่มให้ Chaser วง่ิ เขา้ หายานโดยใชฟ้ ังกช์ นั move towards และระบุ
parameter ของการ move towards คือ Sprite ยานอวกาศและเลขความเร็วท่ี
ตอ้ งการ

28 เริ่มทาเร่ืองการกินระหวา่ งยานกบั Chaser โดยใชฟ้ ังกช์ นั overlaps with เขา้
มา (if chaser overlaps with hero then…)

29 ใหเ้ ชค็ เงื่อนไขเพิ่มเติมอีกวา่ เมื่อเกิด overlap กนั แลว้ ระหวา่ งChaser กบั ยาน
ใครมีขนาดใหญ่กวา่ หากยานใหญก่ วา่ (โดยเปรียบเทียบคา่ width ของท้งั ค)ู่
ใหผ้ เู้ ล่นไดร้ ับคะแนนเพิ่มเท่ากบั ขนาดของ Chaser ที่กินได้ พร้อมท้งั สร้าง
Chaser ตวั ใหมข่ ้ึนมา

30 สร้างฟังกช์ นั shrink sprite ข้ึนมา เพ่อื ใหห้ ดขนาดของยานกรณียานถูกกิน
โดยรับพารามิเตอร์เป็ น Sprite ที่ตอ้ งการใหห้ ดขนาด

31 เขียนใหฟ้ ังกช์ นั shrink sprite โดย set size เป็ นคา่ ใหมค่ ือhero size*hero
shrinking factor (ค่า factor น้ีอยใู่ นฟังกช์ นั set game control value)

32 นาฟังกช์ นั shrink sprite กลบั ไปใส่ในelse (ส่วนที่เป็ นเง่ือนไขที่ทาเม่ือยาน

ถูกกิน ต่อจากขอ้ 29)

33 เพ่มิ เงื่อนไขอีก โดยหากขนาดยานเลก็ จนถึงคา่ minimum size (ซ่ึงเป็ น factor

ในฟังกช์ นั set game control value) ใหห้ กั ชีวติ ของผเู้ ลน่ และให้ game over

34 เริ่มสร้างอุปสรรคบนหนา้ จอโดยใช้ Sprite Set รู้จกั ตวั แปรกลุ่ม (Array)

35 ทาการเพ่มิ Sprite เขา้ ไปใน Sprite Set และนา Sprite จาก Sprite Set มาวาง รู้จกั การใชค้ าสง่ั วนรอบ For Loop
ในหนา้ จอเกมส์แบบสุ่มตาแหน่ง ซ่ึงเราตอ้ งการสร้างอปุ สรรคจานวน 50 ชิ้น
ดงั น้นั จึงเอา for loop เขา้ มาช่วย

36 ทาการตรวจเงื่อนไขเรื่องการชนกนั ของยานกบั อุปสรรคเพมิ่ โดยนาfor each รู้จกั การใชค้ าสง่ั วนรอบ For Each
loop เขา้ มาไล่ทางานกบั obstacle แตล่ ะชิ้นใน obstacle set และตรวจสอบ Loop
เงื่อนไขการoverlap กนั ระหวา่ ง obstacle กบั ยาน

37 เขียนการทางาน เม่ืออุปสรรคมีขนาดเลก็ กวา่ ยาน(โดยการเปรียบเทียบ width
ของท้งั ค)ู่ หากเลก็ กวา่ ใหผ้ เู้ ลน่ ไดค้ ะแนนเพ่มิ ตามขนาดของอุปสรรค และ
สร้างอุปสรรคข้ึนใหมโ่ ดยสุ่มขนาดและตาแหน่งเกิด

คู่มือการเรียนการสอน หลกั สูตรการเขียนโปรแกรมเบือ้ งต้น โครงการ Microsoft YouthSpark 58

ข้นั ตอนท่ี การดาเนนิ การ ถอดบทเรียนทส่ี าคญั

38 เขียนทางานใน else หากอปุ สรรคใหญก่ วา่ ใหข้ นาดของยานลดลง โดยใช้

ฟังกช์ นั shrink sprite ท่ีเคยเขียนไวก้ ่อนหนา้ น้ี

39 เขียนฟังกช์ นั ใหย้ านสามารถใหญข่ ้ึนไดบ้ า้ ง โดยสร้างฟังกช์ นั ใหมช่ ่ือ grow

sprite โดยมีพารามิเตอร์เป็ น Sprite ช่ือวา่ growing sprite

40 เขียนการทางานของฟังกช์ นั grow sprite ใหเ้ พ่ิมขนาด sprite โดยนาคา่ hero

grow factor จากฟังกช์ นั set game control value มาใช้ โดยให้ new hero size

เท่ากบั hero size*hero grow factor

41 นาฟังกช์ นั grow sprite ไปใชใ้ นทุกเงื่อนไขท่ีเป็ นยานกินอุปสรรคหรือ

Chaser

42 เพ่มิ รายละเอียด โดยตรวจสอบเพม่ิ ที่ Eventon every frame วา่ หาก Chaser

วง่ิ ชนกบั อุปสรรค ใหม้ ีการbounce ตวั Chaser ดว้ ย

43 ปรับให้ speed ของยานเปล่ียนแปลงไดต้ ามขนาดของยาน โดยยง่ิ ยานมีขนาด

ใหญ่ข้ึน ความเร็วของยานจะยง่ิ ลดลง โดยเพิ่มการทางานในส่วนเงื่อนไข

กรณีท่ีขนาดของยานยงั คงใหญ่กวา่ ค่าminimum hero size อยคู่ า่ hero speed

factor จะถกู ปรับลงตามขนาดของยานท่ีเพิม่ ข้ึน

44 เพม่ิ การตรวจสอบเงื่อนไขสุดทา้ ย โดยตรวจสอบวา่ ขนาดยาน มีขนาดใหญ่

เกินค่า maximum hero size ท่ีต้งั ค่าไวแ้ ลว้ หรือไม่ หากมีขนาดเกินแลว้ จะให้

ขนาดของยานกลบั มาเป็ นขนาดเร่ิมตน้

45 จบการส่วนของการเขียนเกมส์ Flatverse

ใหผ้ สู้ อนทา้ ทายใหผ้ เู้ รียนลองคิดการปรับเกมส์เองเพิม่ เติม วา่ สามารถปรับที่

ส่วนไหนของcode ท่ีมีอยไู่ ดบ้ า้ ง เช่น ปรับค่าmaximum hero size หรือปรับ

ใหอ้ ปุ สรรคมีสีเดียวกนั หมด

หลงั จากน้นั ใหท้ า้ ทายผเู้ รียนใหล้ องมองส่ิงรอบๆ ตวั วา่ สามารถท่ีจะแกไ้ ข

โปรแกรมของสิ่งท่ีมีอยรู่ อบๆ ตวั ใหท้ างานตา่ งออกอยา่ งไรไดบ้ า้ ง

คู่มือการเรียนการสอน หลกั สูตรการเขียนโปรแกรมเบือ้ งต้น โครงการ Microsoft YouthSpark 59

แหล่งเรียนรู้เพิม่ เติม

ส่ือการเรียนรู้ ระดบั
ทุกระดบั
Touch Develop
สอนการเขียนโปรแกรมโดยใช้ Touch Develop เป็นแหล่งความรู้ท่ี
รวบรวมเกมส์ tutorial และตวั อยา่ งโปรแกรมต่างๆ

Kodu Game Lab ทุกระดบั
สอนการใช้ Kodu ซ่ึงเป็นเวบ็ แอปพลิเคชนั่ ท่ีใชภ้ าษา Blocky (เหมือนกบั
Hour of Code) เพ่ือสร้างเกมส์บน PC และ Xbox

Alice ทุกระดบั
ส่ือ 3 มิติท่ีสอนการเขียนโปรแกรมผา่ นการสร้างเกมส์ และแอนิเมชนั่

Code Studio ทุกระดบั
สื่อ blended learning ที่สอนเรื่องวทิ ยาการคอมพิวเตอร์โดยไม่ตอ้ งใช้
คอมพิวเตอร์ (unplugged)

ScratchEd ทุกระดบั
สอนการใช้ Scratch ซ่ึงเป็นเวบ็ แอปพลิเคชนั่ ที่ใชภ้ าษา Blocky
(เหมือนกบั Hour of Code) เพื่อสร้างโปรแกรมต่างๆ เช่นเกมส์ แอนนิ 60
เมชน่ั

คู่มือการเรียนการสอน หลกั สูตรการเขียนโปรแกรมเบือ้ งต้น โครงการ Microsoft YouthSpark

ส่ือการเรียนรู้ ระดบั
มธั ยมตน้ ข้ึนไป
Middle School CS in Science
หลกั สูตรวิทยาการคอมพิวเตอร์ผา่ นบทเรียนวทิ ยาศาสตร์ ความยาว 20
บทเรียน

Middle School CS in Algebra มธั ยมตน้ ข้ึนไป
หลกั สูตรวิทยาการคอมพิวเตอร์ผา่ นบทเรียนพีชคณิต ความยาว 20
บทเรียน

Computer Science Fundamental มธั ยมตน้ ข้ึนไป
หลกั สูตรพ้ืนฐานวิทยาการคอมพิวเตอร์ ความยาว 20 ชว่ั โมง

Beauty and Joy of Computing มธั ยมปลายข้ึน
หลกั สูตรวิทยาการคอมพิวเตอร์เบ้ืองตน้ ยาวหน่ึงภาคการศึกษา ไป

Code Academy มธั ยมปลายข้ึน
เวบ็ ที่สอนการเขียนโปรแกรมในระดบั มืออาชีพ ไป

หากมีข้อเสนอแนะ กรุณาติดต่อ
Saturday School [email protected]
Good factory [email protected]

คู่มือการเรียนการสอน หลกั สูตรการเขียนโปรแกรมเบือ้ งต้น โครงการ Microsoft YouthSpark 61