คู่มือ Scratch

IMAGINEERINGหน่วยที่ ๒ การออกแบบโดยใช้ storyboard
EDUCATION
หรือการออกแบบอัลกอริทึม

วิทยาการคอมพิวเตอร์(Computer Science) การแก้ปัญหาอย่างเป็นขั้นตอน
และเป็นระบบการใช้แนวคิดเชิงคำ�นวณในการแก้ปัญหาในชีวิตประจำ�วัน บูรณาการกับ
วิชาอื่น การเขียนโปรแกรมการคาดการณ์ผลลัพธ์ การตรวจหาข้อผิดพลาดการพัฒนา
แอปพลิเคชันหรือพัฒนาโครงงานอย่างสร้างสรรค์เพื่อแก้ปัญหาในชีวิตจริง

The greatness of a nation and its moral
progress can be judged by the way its
animal are treated.

... ความยง่ิ ใหญข่ องมนษุ ยชาตแิ ละความกา้ วหนา้ ทาง
จรยิ ธรรมสามารถตดั สนิ ไดจ้ ากวธิ กี ารปฏบิ ตั ติ อ่ สตั ว์
ของพวกเขา...

-- ไมเคลิ ฟาราเดย์ (Michael Faraday)--

MindMap แผนผังสาระการเรียนรู้

Logo

Scratch ซอฟต์แวร์
ที่ใช้เขียน
โปรแกรม
IMAGINEERING ปรแกรม
EDUCA โTION
การเขียน การออกแบบ การเขียน
Storyboard โปรแกรม โปรแกรม
การออกแบบ
อัลกอริทีม การตรวจ การแก้ไข
สอบหาข้อ ข้อผิดพลาด
ผิดพลาด
การหาข้อผิดพลาด

ตวั ชีว้ ดั
ว ๘.๒ ป๔/๒ ออกแบบและเขียนโปรแกรมอย่างง่าย โดยใชซ้ อฟตแ์ วร์ หรือสือ่
และตรวจหาข้อผิดพลาดและแก้ไข

Keywords = การเขียนโปรแกรม 5. scratch = โปรแกรมฝึกเขียนโค้ด
= การเขียนโค้ด 6. storyboard = การเขียนภาพลงในกรอบ
1. programming = ภาษาในการ แสดงเรื่องราวเป็นลำ�ดับขั้น
2. coding เขียนโปรแกรม 7. algorithm = การแสดงลำ�ดับขั้นตอน
3. computer = นักเขียนโปรแกรม 8. debugging = การแก้ไขข้อผิดพลาด

Language
4. programmer

26
การออกแบบโปรแกรมอย่างง่าย โดยใช้ Story Board
สตอรี่บอร์ด(story board) คือแสดงล�ำดับข้ันตอนการท�ำงานของ
โปรแกรมทีละล�ำดับข้ัน โดยเขียนเป็นภาพ ข้อความ และภาพเคลื่อนไหว
ซ่ึงการเขียน storyboard มี 2 ส่วนดังนี้

IMAGINEERING
EDUCATION
ส่วนของภาพโดยจะวาดอยู่ ส่วนของการบรรยายเป็น
ใน กรอบส่ีเหลี่ยม ข้อความหรือบทสนทนา

การเขียน Storyboard
มีข้อดีอย่างไรบ้างครับ
ท�ำให้เราได้เห็น
เน้ือเร่ืองท่ีจะสร้างต้ังแต่ต้นจนจบ
ท�ำให้ได้เน้ือเรื่องเหมาะสม
และหากมีข้อผิดพลาดจะได้
ทราบก่อนลงมือท�ำไงละ

Primary 4

27

ตัวอย่าง ให้ออกแบบ story board นิทานเรื่อง ราชสีห์กับหนู

ราชสีห์ตัวหนึ่งนอนหลับอยู่ในป่า มีเจ้าหนูมาว่ิงไต่ตามล�ำตัวราชสีห์โกรธมากแต่
เห็นว่าเจ้าหนูเป็นสัตว์ตัวเล็กจึงไล่ให้ไปไกลๆเม่ือคร้ันราชสีห์ออกไปล่าสัตว์ได้ติด
กับบ่วงนายพรานออกไม่ได้ เจ้าหนูส�ำนึกในบุญคุณจึงกลับมาช่วยราชสีห์ให้รอดพ้น
กับบ่วงนายพราน นิทานเร่ืองน้ีสอนให้รู้ว่าสัตว์ตัวเล็กก็มีประโยชน์ไม่แพ้สัตว์ใหญ่
IMAGINEERING
EDUCATIONราชสหี น์ อนหลบั อยใู่ นปา่ราชสหี โ์ กธรและพดู วา่ เหน็ วา่ เจา้ เปน็
เจา้ หนมู าเดนิ รบกวนอยใู่ กลๆ้ สตั วต์ วั เลก็ ๆ จงึ ปลอ่ ยเจา้ ไป

เมอ่ื ราชสหี อ์ อกไปลา่ สตั ว์ กลบั มาจงึ ตดิ กบั บว่ งของ
นายพรานราชสหี จ์ งึ ออกไมไ่ ด้

เจา้ หนสู ำ� นกึ ในบญุ คณุ จงึ ไดม้ าชว่ ย นทิ านเรอ่ื งนสี้ อนใหร้ วู้ า่ สตั วต์ วั นอ้ ย
กดั บว่ งนายพรานราชสหี จ์ งึ ออกมาได้ กม็ ปี ระโยชนไ์ มแ่ พส้ ตั วใ์ หญเ่ ชน่ กนั

28
การออกแบบโปรแกรมอย่างง่าย โดยใช้อัลกอริทึม (Algorithm)
กอ่ นจะลงมือเขยี นโปรแกรม ต้องออกแบบโปรแกรมโดยการเขยี นขน้ั ตอน
การท�ำงานหรืออัลกอริทึมก่อน เพ่ือจะได้เห็นภาพรวมการท�ำงานของ
โปรแกรม และหากเกิดข้อผิดพลาดจะสามารถตรวจสอบและแก้ไขได้ก่อน
จะลงมอื เขียนโปรแกรม
การออกแบบอลั กอรทิ มึ นนั้ สามารถท�ำไดโ้ ดยใชก้ ารเขยี นสญั ลกั ษณท์ เ่ี รยี กวา่
Flowchart โดยมีรปู แบบของสัญลักษณ์ดงั ตอ่ ไปน้ี
IMAGINEERING
EDUCATIONสญั ลกั ษณ์ภาษาองั กฤษความหมายของสญั ลกั ษณ์
จุดเริ่มต้น/สิ้นสุด
Terminator

Input ข้อมูล นำ�เข้า/ส่งออก
Output การประมวลผลข้อมูล
Process

Decision การตัดสินใจ เพื่อพิจารณาเงื่อนไขและ

กำ�หนดทิศทางการทำ�งานต่อไป

Direction ทิศทางการทำ�งาน ใช้เชื่อมต่อสัญลักษณ์
Flow ต่างๆ เพื่อแสดงทิศทางของโปรแกรม

Connector จุดเชื่อมต่อ ใช้รวมเส้นการทำ�งาน
ให้ออกไปเหลือเพียงเส้นเดียว

Primary 4

29
ตัวอย่างการออกแบบโปรแกรมอย่างง่าย โดยใช้ Flowchart
วันน้ีลิปดาตื่นสาย จึงคิดเลือกวิธีการเดินทางไปโรงเรียนใหม่ อาจจะต้องใช้
รถยนตห์ รอื รถมอเตอรไ์ ซต์ ซ่ึงปกตลิ ิปดาเดนิ ทางดว้ ยรถประจ�ำทาง ลิปดา
ตอ้ งประมวลผล เปรยี บเทยี บวา่ ระยะเวลาการเดนิ ทางใดจะสามารถเดนิ ทาง
ไดเ้ รว็ ท่ีสดุ
IMAGINEERING
EDUCATIONแย่แล้วเราจะตัดสินใจจุดเริ่มต้น
อย่างไรดีนะเนี่ย

เลือกวิธีการ

ระยะเวลา ระยะเวลา ระยะเวลา
เดินทางด้วย เดินทางด้วย เดินทางด้วย
รถยนต์ รถประจำ�ทาง มอเตอร์ไซต์
ออกแบบการแก้ไข
ปัญหาได้เยี่ยมมาก การประมวลผลข้อมูลเลือก
ลิปดา เส้นทางที่ใช้เวลาน้อยที่สุด

สิ้นสุด

30 กิจวัตรประจ�ำวัน

ลิปดาต่ืนตั้งแต่ 6 โมงเช้า อาบน�้ำ แปรงฟัน ทานข้าว
แต่งตัวและออกเดินทางไปโรงเรียน เรียนหนังสือ
และท�ำกิจกรรมต่างๆ จนเข้านอน ทุกคนก็มี
กิจวัตรประจ�ำวันเหมือนกันเรามาสร้าง
storyboard หรือ ออกแบบอัลกอริทึม
กิจวัตรประจ�ำวันตนเองกัน
IMAGINEERING
EDUCATION Missions :

Materials : 1. จากโจทย์ให้ออกแบบโปรแกรมโดยใช้ Story Board
หรือออกแบบอัลกอริทึมกิจวัตรประจ�ำวันของตนเอง

2. ให้แสดง storyboard หรือ อัลกอริทึม
ในกระดาษเทาขาว พร้อมน�ำเสนอหน้าช้ันเรียน

1. กระดาษเทาขาว 2.อุปกรณ์เคร่ืองเขียนอื่นๆ

Ask : การออกแบบโปรแกรมโดยใช้ Story Board หรืออัลกอริทึม
ในการแก้ไขปัญหา คืออะไร

Plan & Design : แบ่งหน้าที่การท�ำงานวางแผนออกแบบโปรแกรมโดยใช้
Story Board หรืออัลกอริทึมในการแก้ไขปัญหา

Primary 4

31

ให้นักเรียนเขียนลำ�ดับการทำ�งานของกิจกรรมนี้

IMAGINEERING
EDUCATION

การออกแบบโปรแกรมกอ่ นจะลงมือเขียนโปรแกรมมีประโยชน์อยา่ งไร
การออกแบบโปรแกรมโดยใช้ Story Board คืออะไร
การออกแบบโปรแกรมโดยใช้ อลั กอรทิ มึ คืออะไร

IMAGINEERING32
EDUCATIONเด็กๆ จะได้อะไรจากการเขียนโปรแกรม Scratch

การฝกึ เขยี นโปรแกรมเปน็ เครอื่ งมอื ทสี่ ง่ เสรมิ ทกั ษะกระบวนการคดิ เชงิ ค�ำนวณในการ
แกป้ ญั หาการคดิ อยา่ งเปน็ ระบบ(Computational Thinking) และการคดิ สรา้ งสรรค์
(Creative Thinking) ทช่ี ว่ ยใหผ้ เู้ รยี นพฒั นาทกั ษะการคดิ ออกมาในรปู แบบการเขยี น
โปรแกรมสรา้ งโปรเจกตห์ รอื สรา้ งชน้ิ งาน และน�ำเสนอ

ทำ� ไมตอ้ งใชโ้ ปรแกรม Scratch
โปรแกรม Scratch เปน็ ทงั้ เครอ่ื งมอื และโปรแกรมภาษา พฒั นาโดยทมี งาน Media
Lab MIT มกี ลมุ่ เปา้ หมายเปน็ เดก็ ๆ หรอื ผเู้ รมิ่ ตน้ หดั เขยี นโปรแกรม วตั ถปุ ระสงคข์ อง
ทมี พฒั นา คอื การสง่ เสรมิ ผเู้ รยี นใหใ้ ชค้ วามคดิ สรา้ งสรรค์ ผา่ นการใชส้ อื่ ตา่ งๆ ไมว่ า่
จะเปน็ ขอ้ ความ ภาพ เสยี ง หรอื ภาพเคลอ่ื นไหว ดว้ ยเครอื่ งมอื ทไี่ มซ่ บั ซอ้ น และมา
พรอ้ มกบั ตวั โปรแกรม Scratch เพอ่ื สรา้ งโปรเจกตต์ า่ งๆ ตามจนิ ตนาการของผเู้ รยี น
อาทเิ ชน่ การเลา่ เรอื่ ง การสรา้ งแอนเิ มชน่ั การจ�ำลอง แมก้ ระทงั่ การเขยี นเกมกท็ �ำได้

Primary 4

33
รู้จักโปรแกรม Scratch
เป็นโปรแกรมภาษาคอมพิวเตอร์ส�ำหรับผู้เร่ิมต้นหัดเขียนโปรแกรม โดยใช้
สร้างส่ืออย่างง่าย เช่น ภาพ เสียง ข้อความ ดนตรี เพื่อสร้างเรื่องราวภาพ
เคลื่อนไหว นิทานที่มีการตอบโต้กับผู้ใช้ เล่ากิ จวัตรประจ�ำวัน การ์ตูนส้ัน
สร้างเกม เพ่ือเป็นการฝึกทักษะการคิดวิเคราะห์ และความคิดสร้างสรรค์

หน้าตาของโปรแกรม

ชดุ คำ�สง่ั (Sprites)
IMAGINEERING
EDUCATIONเวท(ี Stage)

ตวั ละครและฉาก พ้ืนที่ในการเขียนโปรแกรม
(Sprites&Background) (Scripts Area)

โดยการลากกลอ่ งคำ�สั่งใน
Sprites มาตอ่ ๆ กัน
เปน็ ชดุ คำ�สงั่

1. เวที (Stage) ซึ่งมขี นาดกวา้ ง 480 หน่วย สงู 360 หนว่ ย
ใช้แสดงผลของชุดค�ำสัง่ การท�ำงานของโปรแกรม

2. ตวั ละคร และ ฉาก (Sprites & Background)
จะมีขอ้ มลู ของ ภาพ เสยี ง ซึ่งสามารถคลกิ เขา้ ไปดูในบรเิ วณ
ชุดค�ำสัง่ 3 ซ่ึงมีแถบ
3. ชดุ ค�ำส่ัง (Scripts) เป็นชดุ ค�ำสั่งควบคุมตวั ละครและฉาก
เช่น การเคลอ่ื นไหว (Motion), หนา้ ตาภาพ (Looks)
,เสียง (Sound), ปากกา (Pen), เหตุการณ์ (Events) เป็นต้น

34

การเขียนโปรแกรมย้ายต�ำแหน่ง
เป็นการย้ายต�ำแหน่งของตัวละคร (Sprite) โดยมีค�ำส่ังที่เก่ียวข้อง เช่น

1. คือ ค�ำส่ังให้เคลื่อนท่ีไปในแนวแกน X .... ก้าว

2. คือ ค�ำสั่งย้ายตัวละครไปยังต�ำแหน่ง
ณ แกน X , แกน Y เท่าไร
IMAGINEERING
EDUCATIONเวทมี ีขนาดกวา้ ง 480 หน่วย
สูง 360 หนว่ ย จุดก่ึงกลาง
จะเป็นตำ� แหน่ง X=0, Y=0

คลกิ เลอื กตวั ละคร (Sprites)ทต่ี อ้ งการ พมิ พต์ ำ� แหนง่ ทตี่ อ้ งการ

กอ่ นจะท�ำใหต้ วั ละครใดเคล่ือนท่ตี ้องสงั เกต ให้ทดลองเปลี่ยนต�ำแหน่งตามรปู
และเลอื กตวั ละครท่ตี ้องการใหถ้ กู ตอ้ ง
เมอ่ื แกไ้ ขตำ� แหนง่ แลว้ ใหค้ ลกิ คำ� สง่ั นนั้
สงั เกตตำ� แหนง่ ของตวั ละคร
เปน็ การคลกิ ค�ำสงั่ นนั้ ใหท้ �ำงาน และสงั เกตการ
จากตัวอย่าง ตวั ละครแมว เปล่ียนแปลงบรเิ วณเวที (Stage)
อยู่ ณ ต�ำแหนง่ X=0, Y=0
คลกิ เลอื กและลากคำ� สงั่
เลอื กชดุ คำ� สงั่
ซงึ่ เปน็ ค�ำสง่ั ยา้ ยต�ำแหนง่ ไปขา้ งหน้ากีก่ า้ ว
ซงึ่ เปน็ ชดุ ค�ำสงั่ ควบคมุ การเคลอ่ื นทข่ี องตวั ละคร
มลี ักษณะเป็น กล่องค�ำสั่ง ตอ่ กนั แบบตัวต่อ ทดลองเปลยี่ นระยะตามทต่ี อ้ งการ

คลกิ เลอื กลากคำ� สงั่ เปน็ การเขียนโปรแกรมส่งั ให้ ตัวละคร
ยา้ ยต�ำแหน่งตามทตี่ อ้ งการ
แลว้ ลากไปยงั พนื้ ทส่ี ่งั งานเขยี นโปรแกรม
(Scripts Area)ลองลากค�ำสงั่ ออกมา 4 ค�ำสงั่ ตามรปู

Primary 4

35
การเขียนโปรแกรมย่อและขยายขนาด
เป็นการเปลี่ยนขนาดของตัวละคร โดยมีค�ำสั่งที่เกี่ยวข้อง เช่น

1. คือการเปล่ียนขนาดเพิ่มขึ้นหรือลดลง
2. คือการก�ำหนดขนาดเพิ่มข้ึน-ลดลงตามเปอร์เซ็นต์

IMAGINEERING
EDUCATION
คลกิ คำ�สง่ั คดั ลอกตวั ละคร (Stamp) ลากชดุ คำ� สง่ั
ไปยงั พนื้ ทส่ี งั่ งานเขยี นโปรแกรม
ซ่งึ เป็นค�ำสั่งคัดลอกตวั ละคร โดยในตวั อย่าง (Scripts area)
ต้องการคดั ลอกเพือ่ ใหเ้ หน็ การเปลี่ยนแปลง คำ� สงั่ เปลยี่ นขนาด

ใหค้ ลกิ ตวั ละครทตี่ อ้ งการคดั ลอก เป็นค�ำสง่ั เปล่ยี นขนาดโดยสามารถ
ใสข่ นาดเพิม่ (+10) และ ลด (-10)
โดยเมาสพ์ อยเตอรจ์ ะเปล่ยี นเปน็
แตต่ วั ละครทคี่ ดั ลอกจะซอ้ นกนั ตอ้ งลากออกมา คำ� สง่ั กำ� หนดขนาด

สงั เกตตวั ละครและเลอื กตวั ละครทตี่ อ้ งการ เปน็ ค�ำสงั่ ก�ำหนดขนาดคดิ เปน็ เปอรเ์ ซน็ ตข์ องภาพ

จากตัวอย่างจะมตี ัวละคร 3 ตัว ท่ีคัดลอกไว้ซึ่ง เมอ่ื เปลยี่ นขนาดตามตอ้ งการแลว้
ตวั ละคร 1 ตัวจะมีค�ำสง่ั แต่ละตัวไมเ่ หมอื นกัน
จะเห็นการเปลี่ยนแปลงในบรเิ วณเวทีดงั ภาพ
คลกิ เลอื กลากคำ� สงั่

ซึ่งเป็นชดุ ค�ำสัง่ เกย่ี วกบั หนา้ ตารปู รา่ ง

36
การเขียนโปรแกรมเปลี่ยนรูปร่าง
การเปลี่ยนรูปร่างนิยมใช้เมื่อ ตัวละครที่เคล่ือนท่ีหรือพบกับเหตุการณ์
แล้วเปล่ียนลักษณะท่าทางการแสดงของตัวละคร โดยมีตัวอย่างค�ำส่ังเช่น
คือ ค�ำส่ังเปล่ียนชุดตัวละครไปยังชุดท่ี......

IMAGINEERING
EDUCATION
คลกิ เลอื กตวั ละครทต่ี อ้ งการ จะมหี นา้ ตา่ ง Custome Library
เขยี นโปรแกรมเปลย่ี นรปู รา่ ง
คลกิ เลอื กคำ� สง่ั คือหน้าต่างให้สามารถเลือกชุดหรือรูปร่างตัว
ละครเพม่ิ เตมิ ลงไป วาดหรือเปล่ยี นสเี องได้
ซง่ึ เปน็ ค�ำส่งั จัดการชดุ หรือรูปรา่ งของตัวละคร
แตล่ ะตวั เมอ่ื เลอื กแลว้ สงั เกตชดุ หรอื รปู รา่ งทเี่ พมิ่ ขนึ้

จะมหี นา้ ตา่ ง Custumes ขน้ึ มา โดยในตัวอยา่ งจะเปน็ แมวนอน

ใหส้ ังเกตชุดของตวั ละครด้านซ้ายซ่งึ โดยปกติ คลกิ เลอื ก
จะมี 2 ชดุ
แล้วลากค�ำสัง่
สามารถเลอื กชดุ หรอื รปู รา่ งตวั ละครเพม่ิ ไปยงั พ้นื ทีส่ ัง่ งานเขียนโปรแกรม (Scripts area)

ได้โดยการกดที่ ลองใชค้ ำ� สงั่ เปลยี่ นชดุ หรอื รปู รา่ งตวั ละคร

Primary 4 สงั เกตการเปลยี่ นแปลงบริเวณเวที

37
การสร้างพื้นหลัง (Background)
ในโปรแกรม scartch สามารถวาดรูปเพ่ือสร้างพื้นหลัง สามารถน�ำภาพ
ท่ีมีอยู่ในโปรแกรม หรือน�ำรูปถ่ายจากภายนอกเข้ามาเป็นฉากพ้ืนหลังได้
เพื่อน�ำมาสร้างเป็นฉากเร่ืองราวท่ีเหมาะสมกับตัวละคร

IMAGINEERING
EDUCATION
คลกิ เลอื ก stage backdrop พน้ื ทว่ี าดภาพ

เปน็ การเลือกเข้าส่กู ารแกไ้ ขพน้ื หลัง มีขนาดกว้าง 480 หนว่ ย สูง 360 หนว่ ย

คลกิ เลอื กโหมด Backdrops หากต้องการเลือกภาพจากสมดุ ภาพใน
โปรแกรมสามารถเลอื กไดโ้ ดยการคลิก
จะมี
ค�ำสงั่ ควบคมุ ท�ำพื้นหลงั และเร่ืองเสยี ง ค�ำส่งั Choose backdrop from library
ในหนา้ ตา่ ง Backdrops Libray
ชดุ คำ� สง่ั การวาด ได้แก่ พกู่ นั วาดเส้น
จะมหี มวดใหเ้ ลอื ก เชน่ Indoor outdoor เปน็ ตน้
สเี่ หลย่ี ม วงกลม ตัวอกั ษร เทสี ยางลบ เมอ่ื เลอื กเรียบร้อยแลว้ ให้กด Ok
คัดลอก
ใหส้ งั เกตทบี่ รเิ วณเวที (Stage)
ชดุ คำ� สงั่ การเลอื กสี
เมอ่ื มีการเปลีย่ นแปลงพนื้ หลัง (Backdrop)
จะมีทั้งในตารางสแี ละสามารถเลือกเพมิ่ เตมิ ได้

38

การสร้างภาพเคลื่อนไหว (Animation)
สามารถท�ำได้โดยการใช้ค�ำส่ังเปล่ียนแปลงชุดหรือรูปร่าง(Costmue)
และค�ำส่ังหยุดรอ wait สลับไปมาเพ่ือให้ตาของเรา
มองเห็นภาพเป็นลักษณะของภาพเคลื่อนไหว

IMAGINEERINGชุดท่ี 1 ชดุ ท่ี 2 ชุดที่ 1 ชุดท่ี 2 ชุดที่ 1
EDUCATION
10 Pixel 10 Pixel 10 Pixel 10 Pixel
หยุดแสดง หยดุ แสดง หยุดแสดง หยดุ แสดง
ภาพ 1 วินาที ภาพ 1 วินาที ภาพ 1 วนิ าที ภาพ 1 วนิ าที

คลกิ เลอื กตวั ละครทต่ี อ้ งการ ใหเ้ ลอื กชดุ รปู รา่ งที่ 2 ของแมว
ทำ�ใหเ้ ปน็ ภาพเคลอ่ื นไหว
คลกิ เลอื กและลากคำ� สงั่ เรมิ่ ตน้ เมอ่ื ชกั ธง โดยการกดทล่ี ูกศรลงด้านขวามอื
และท�ำการเลอื ก costume 2
ไปที่ Event แล้วลากค�ำสง่ั
when flag click ไปยังพื้นทที่ �ำงาน คลกิ เลอื กและลากชดุ คำ� สง่ั wait

คลกิ เลอื กและลากคำ� สง่ั move เลอื กคำ� สง่ั ซำ้� ตงั้ แตข่ อ้ 3-6

จะอยใู่ นชุดค�ำส่ัง แต่ใหเ้ ปลยี่ นชุดกลับมาเปน็ ชุดที่ 1
หรอื costume 1
คลกิ เลอื กและลากคำ� สงั่ เปลยี่ นรปู รา่ ง
เลอื กคำ� สงั่ ซำ�้ ตงั้ แตข่ อ้ 3-6 อกี ครง้ั หนงึ่
ซงึ่ จะอยใู่ น และเลอื กคำ� สง่ั ซำ้� อกี ครงั้ ในขอ้ 7

Primary 4 แลว้ ลองกดปุม่ ใหเ้ ร่มิ ค�ำสงั่ หรอื กดที่ ธง

39
การวนซ�้ำและวนซ�้ำไม่สิ้นสุด (Loop Repeat , Loop Forever)
จากชุดค�ำสั่งการสร้างภาพเคล่ือนไหว จะเห็นได้ว่ามีการใช้ค�ำสั่งที่ซ�้ำกัน
มีลักษณะเป็นชุดค�ำส่ัง คือ move , switch costume และ wait ซึ่ง
เราสามารถใช้ค�ำสั่ง Repeat เพ่ือท�ำให้ไม่ต้องเขียนค�ำสั่งที่ยาวต่อเน่ือง

IMAGINEERING
EDUCATION
คลกิ เลอื กตวั ละคร แมว ในกรณนี ส้ี ามารถใชค้ ำ� สง่ั next costume

คลกิ เลอื กและลากคำ� สงั่ เรม่ิ ตน้ เมอ่ื ชกั ธง เพ่อื ลดชดุ ค�ำสั่งลงมาไดอ้ กี แต่ตอ้ งปรบั
จ�ำนวนครัง้ ทีท่ �ำซ�้ำเพมิ่ จาก 10 เป็น 20
ไปท่ี Event แลว้ ลากค�ำสงั่
when flag click ไปยงั พนื้ ท่ที �ำงาน สามารถทำ� ใหเ้ ดนิ วนซำ�้ ไมม่ ที ส่ี น้ิ สดุ ได้
โดยใชค้ ำ� สงั่ Forever แทน Repeat
คลกิ เลอื กและลากคำ� สง่ั Loop Repeat
สามารถทำ� ใหต้ วั ละครเดนิ เรว็ ขน้ึ ไดด้ ว้ ยการ
โดยกดที่ค�ำสง่ั Control และ ลากค�ำสงั่ ลดเวลาการหยดุ รอ จาก 1 วนิ าที
Repeat ไปยังพืน้ ท่ที �ำงาน เปน็ 0.5 วนิ าที
สามารถท�ำให้ตัวละครเม่ือเดินจนสุดขอบ
คลกิ เลอื กและลากคำ� สง่ั 3-7 ของ พน้ื ทกี่ ารทำ� งานใหเ้ ดง้ กลบั ไดโ้ ดยใชค้ ำ� สงั่
หนา้ การทำ� ภาพเคลอ่ื นไหว if on edge , bounce

แล้วลองกดปมุ่ ให้เรมิ่ ค�ำส่งั หรอื กดที่ ธง

40
การก�ำหนดเหตุการณ์เพ่ือตอบโต้กับผู้ใช้งาน (Events)
การสร้างเหตุการณ์(Events) เพ่ือตอบโต้กับผู้ใช้งาน ซ่ึงในโปรแกรม
scratch สามารถก�ำหนดเหตุการณ์ต่างๆ ได้โดยคลิกเลือกท่ีค�ำสั่ง Events
ซึ่งมีเหตุการณ์ท่ีสามารถตอบโต้กับผู้ใช้งานดังต่อไปน้ี

IMAGINEERING
EDUCATION
When Flag Clicked When .............. > ...............

ก�ำหนดเหตุการณเ์ ม่ือธงถกู กด ก�ำหนดเหตุการณเ์ มือ่ ความดังเสยี ง(Loudness)
ชว่ งเวลา(Timer) , วดิ โิ อเคลอ่ื นท่ี (VDO Motion)
When ............... Key pressed
When I receive (Message1)
ก�ำหนดเหตุการณ์เมือ่ กดปมุ่ ต่างๆ บน
Keyboard เชน่ spacebar, a b c เป็นต้น ก�ำหนดเหตุการณ์เม่ือ โปรแกรม
ไดร้ ับขอ้ ความทก่ี �ำหนดไว้
When this sprite Clicked
Broadcast (Message1)
ก�ำหนดเหตุการณ์เม่อื ตวั ละครถูกคลกิ กด
ก�ำหนดให้สง่ ขอ้ ความเมื่อถึงชว่ งเวลาทีต่ อ้ งการ
When backdrop switches to ............
Broadcast (Message1) and wait
ก�ำหนดเหตกุ ารณ์เมอ่ื ฉากหลงั
ถกู เปลีย่ นไปเปน็ ฉากทก่ี �ำหนด ก�ำหนดใหส้ ่งขอ้ ความเม่ือถงึ ช่วงเวลาทต่ี อ้ งการ
และรอเหตกุ ารณ์อีกเหตุการณ์
Primary 4

41
ตัวอย่างการสร้างโปรแกรมการตอบโต้กับผู้ใช้งาน
โจทย์ : ให้สร้างเกมเกี่ยวกับตรรกะ การเรียงล�ำดับรูปแบบ โดยผู้ใช้งาน
สามารถเลือกค�ำตอบได้ว่าอันไหนถูกและผิด พร้อมท้ังมีคะแนนขึ้นให้
ทราบ โดยถ้าเลือกค�ำตอบถูก ได้ 10 คะแนน และ ผิด ลบ 10 คะแนน

IMAGINEERING
EDUCATION
สรา้ งตวั ละครและฉากตามโจทย์ คลกิ เลอื กคำ� สง่ั Change score by ....

ท�ำตามโจทยห์ รอื ก�ำหนดเอง เป็นการก�ำหนดการเปลย่ี นแปลงค่าคะแนน
ให้เพ่มิ หรือลดลงตามท่ตี ้องการ
กำ� หนดคา่ ตวั แปรใหม่ คะแนน(score)
คลกิ เลอื กคำ� สงั่ ถา้ ถกู ตอ้ งใหเ้ ปลยี่ นเปน็ ขอ้
โดยกดที่ data --> make a variable ตอ่ ไป โดยเลอื กค�ำสั่ง Look-->
จะมีหนา้ ตา่ งแลว้ พมิ พ์ ค�ำว่า score
switch backdrop to next backdrop
คลกิ เลอื กตวั ละคร รถสเี ขยี ว
เพอ่ื กำ� หนด event สำ� หรบั คำ� ตอบทผ่ี ดิ ใหค้ ลกิ ทตี่ วั ลกู บาส

คลกิ เลอื กคำ� สง่ั กำ� หนดเหตกุ ารณ์ ใหค้ ลกิ และเลอื กเหมอื นขอ้ 4 -5 แตใ่ หล้ ดคะแนน
เมอื่ ตวั ละครตวั นถ้ี กู กด ท่ี event ลงเปน็ -10 คะแนน ถา้ ตอบขอ้ น้ี
When this sprite clicked
อาจจะทำ� หนา้ ทผ่ี ดิ เพอ่ื แสดงเพม่ิ เตมิ
หรอื อาจจะเพม่ิ เสยี งผดิ กไ็ ด้

42
การก�ำหนดเงื่อนไข ถ้า(If....then.....)
การก�ำหนดเง่ือนไขเป็นการสร้างรูปแบบหรือตรรกะวิธีการตัดสินใจใน
การด�ำเนินการใดๆกับเหตุการณ์น้ัน โดยถ้าเกิดเหตุการณ์หรือเงื่อนไขท่ี
ก�ำหนดไว้เป็นจริง แล้วตัวละครหรือฉากจะด�ำเนินการตามท่ีถูกก�ำหนด

โจทย์ปัญหา : หากตัวละครแมวเดินชนผีเสื้อเดินแล้วให้แมวร้องเหมียว
และเปล่ียนทิศทางการเคลื่อนท่ี
IMAGINEERING
EDUCATION
สรา้ งตวั ละครและฉากดงั รปู คลกิ เลอื กและลากคำ� สง่ั การกำ� หนดเงอื่ นไข
โดยใหม้ แี มว และ ผเี สอ้ื กำ� หนดเงอ่ื นไข
กำ� หนดเงอื่ นไขให้ แมว และ ผเี สอื้ ถา้ สมั ผสั สสี ม้
เคลอื่ นท่ี และหาชนของใหเ้ ดง้ กลบั (โดยการกดทส่ี ใี นชอ่ งค�ำสงั่ แลว้ คลกิ สที ผ่ี เี สอื้ )
ดงั ตวั อยา่ ง กำ� หนดเหตกุ ารณต์ ามตอ้ งการ
กำ� หนดฟงั กช์ น่ั If โดยถา้ เหตกุ ารณแ์ มวสมั ผสั กบั สสี ม้
โดยคลกิ เลอื กคำ� สง่ั ของผเี สอื้ แลว้ จะเกดิ เหตกุ ารณใ์ ดขน้ึ
ใน Control

Primary 4

43
การก�ำหนดเงื่อนไขถ้า....เป็นจริงแล้ว......ไม่จริงแล้ว.....(If...else...)
เป็นการก�ำหนดเง่ือนไขให้กับตัวละครหรือฉากว่าถ้าหากเกิดเหตุการณ์
หรือเง่ือนไขใดๆแล้วเป็นจริง จะด�ำเนินการอย่างไร หรือหากไม่จริงแล้ว
จะด�ำเนินการอย่างไรต่อไป

โจทย์ปัญหา : หากตัวละครผีเส้ือชนกับแมวแล้วให้ผีเส้ือเปล่ียนสี หาก
ไม่ชนกับผีเส้ือให้เปล่ียนทิศทางการเคล่ือนท่ีไป 15 องศา
IMAGINEERING
EDUCATION
สรา้ งตวั ละครและฉากดงั รปู คลกิ เลอื กและลากคำ� สงั่ การกำ� หนดเงอื่ นไข
โดยใหม้ แี มว และ ผเี สอ้ื กำ� หนดเงอื่ นไข
กำ� หนดเงอ่ื นไขให้ แมว และ ผเี สอ้ื ถา้ สมั ผสั สสี ม้ ของแมว
เคลอื่ นท่ี และหาชนของใหเ้ ดง้ กลบั (โดยการกดทส่ี ใี นชอ่ งค�ำสงั่ แลว้ คลกิ สที ผี่ เี สอ้ื )
ดงั ตวั อยา่ ง กำ� หนดเหตกุ ารณถ์ า้ เจอสสี ม้ ของแมวให้
กำ� หนดฟงั กช์ น่ั If else เปลยี่ นสี และถา้ หากไมเ่ จอสสี ม้ ใหเ้ ปลยี่ น
โดยคลกิ เลอื กคำ� สงั่ ทศิ ทางการหมนุ ไป 15 องศา
ใน Control

21st century

ให้นักเรียนสร้างนิทานหรือเร่ืองราว
ในชีวิตประจ�ำวันของตนเอง

ORD Investigate Idea

การออกแบบ ลิปดาได้ฟังเรื่องราวของเพื่อนที่เดินทางไปเที่ยวได้
โปรแกรมและหา พบเห็นส่ิงต่างๆมากมาย ลิปดาคิดว่าน่าจะน�ำเร่ือง
ราวนั้นมาท�ำเป็นการ์ตูนสั้น หรือเรื่องราวให้กับ
ข้อผิดพลาด เพ่ือนๆ คนอ่ืนได้รับทราบจะได้ไม่ต้องเล่าใหม่
KEYW IMAGINEERING
EDUCATION
STAN DARD Mission 1. ให้นักเรียนสร้างนิทานหรือเร่ืองราวของตนเอง ใน
โปรแกรม scratchโดยให้มีการตอบโต้กับผู้ใช้ มีภาพคลื่อนไหว
ว.๘.๒ ป๔/๒
2. ให้ออกแบบโปรแกรมก่อนลงมือท�ำ(storyboard,อัลกอริทีม)
3. น�ำเสนอผลงานพร้อมจัดการประกวดผลงาน

Materials 1.คอมพิวเตอร์และโปรแกรม Scratch 2. อุปกรณ์เครื่องเขียน
นักเรียนเข้าใจการออกแบบโปรแกรมโดยใช้ Story Board

Ask และอัลกอริทึม การเขียนโปรแกรม Scratch และวิธีการหา
ข้อผิดพลาดหรือไม่

Plan & Design

ร่วมกันวางแผนและออกแบบโปรแกรมโดยใช้โปรแกรม scratch
ข้อผิดพลาดหรือไม่

Primary 4

45

Building & Testing

ให้นักเรียนลงมือท�ำแผนท่ีก�ำหนดไว้

IMAGINEERING
EDUCATION
Evaluation & Redesign

1.นักเรียนสามารถท�ำภารกิจนี้ส�ำเร็จหรือไม่
2. ส่วนที่ยากที่สุดของภารกิจน้ีคืออะไร
3.แนวความคิดท่ีได้จากการท�ำกิจกรรมคืออะไร

46
การตรวจสอบข้อผิดพลาดของโปรแกรม (Testing and Debugging)
หลังจากที่ท�ำการเขียนโปรแกรมเสร็จส้ินแล้วโปรแกรมน้ันจะต้องได้รับการ
ตรวจสอบก่อนวา่ มขี อ้ ผิดพลาด (error) ในโปรแกรมหรอื ไม่ หากพบขอ้ ผิด
พลาดใหต้ รวจสอบ การท�ำงานทลี ะค�ำสง่ั เมอ่ื พบจดุ ทที่ �ำใหผ้ ลลพั ธไ์ มถ่ กู ตอ้ ง
ให้ท�ำการแก้ไขจนกว่าจะไดผ้ ลลัพธท์ ี่ถกู ตอ้ ง
IMAGINEERING
EDUCATIONเราออกแบบโปรแกรม
มาดีมากแล้วท�ำไมถึง แสดงว่าโปรแกรมท่ี
ใช้งานไม่ได้ละคะ ท�ำไว้มีข้อผิดพลาดไงละครับ
เราต้องตรวจสอบหาข้อผิดพลาด
ท่ีละค�ำส่ัง เม่ือพบจุดที่ท�ำให้
ผลลัพธ์ไม่ถูกต้องจึงลงมือแก้ไข

Primary 4

IMAGINEERING 47
EDUCATIONตัวอย่างการหาข้อผิดพลาดในโปรแกรม (Debuggin)
โจทย์ : จากการออกแบบโปรแกรมสั่งให้ตัวละคร เดินมาพบกันแล้วให้ตัว
ละครตัวท่ี 1 แมว ไปกบั ตัวละครตวั ที่ 2 คา้ งคาวแลว้ พดู "Hello"

ปัญหาเกิดขึ้นเม่ือตัวละครสองตัวพบกันแต่ไม่พูดค�ำว่า Hello
แบง่ แยกปญั หาออกเปน็ สว่ นๆ :
แสดงวา่ ปญั หาเกิดในช่วง
การแสดงผลค�ำพดู หรือเงอื่ นไข
หาจดุ ส�ำคญั ของปญั หา :
ใหต้ รวจสอบเงอ่ื นไขวา่ ถกู ต้องหรอื ไม่
ผลการตรวจสอบขอ้ ผิดพลาด
พบว่าเง่ือนไขผดิ พลาดเนอ่ื งจากเมอ่ื ตวั ละครสัมผสั สฟี า้ ถึงจะพูด
ท�ำการแก้ไขเพ่อื ใหไ้ ด้ผลลัพธต์ ามทตี่ ้องการ
เปลีย่ นเงอ่ื นไขให้พบสีนำ�้ ตาลของค้างคาว

48 การฝึกตรวจหาข้อผิดพลาด
จากโปรแกรมของผู้อ่ืน

ดร.วี ก�ำลังท�ำงานอยู่หน้าคอมพิวเตอร์ ลิปดามา
เห็นจึงสงสัย ดร.วี จึงตอบว่า ก�ำลังหาข้อผิดพลาดของ
โปรแกรมอยู่นะครับ ถ้าหากหาข้อผิดพลาดพบจะท�ำให้
โปรแกรมท�ำงานได้อย่างสมบูรณ์แบบครับ และไม่เพียง
แต่นักเขียนโปรแกรมเท่าน้ันนะท่ีควรจะฝึกฝนทักษะน้ี

ทุกคนควรจะฝึกฝนเนื่องจากจะท�ำให้ เราสามารถ
น�ำไปหาสาเหตุของปัญหาในชีวิตประจ�ำวัน
ของเราได้เช่นกัน
IMAGINEERING
EDUCATIONMissions :

Materials : 1. ให้นักเรียนแบ่งกลุ่ม กลุ่มละ 4 คน
Ask : ออกแบบโปรแกรม Scratch ที่มีข้อผิดพลาด

2. แลกเปล่ียนให้เพื่อนๆ แต่ละกลุ่มหาข้อผิดพลาด
3. กลุ่มใดท�ำได้เร็วที่สุดและถูกต้องที่สุดเป็นผู้ชนะ
1. คอมพิวเตอร์โปรแกรม scratch 2. อุปกรณ์เครื่องเขียน
การฝึกตรวจหาข้อผิดพลาดของโปรแกรมส�ำคัญอย่างไร

Plan & Design ให้ออกแบบและวางแผนการเขียนโปรแกรมที่มีข้อผิดพลาด

Primary 4

49

ให้นักเรียนออกแบบโปรแกรมที่มีข้อผิดพลาดเพ่ือให้เพ่ือนๆหา

IMAGINEERING
EDUCATION

การหาสาเหตุของข้อผดิ พลาดของโปรแกรมควรทำ�อย่างไร
การแบ่งแยกปัญหาและหารูปแบบจะชว่ ยให้หาสาเหตขุ องปัญหาไดอ้ ยา่ งไร่
การหาสาระสำ�คญั ของปัญหาจะช่วยให้หาสาเหตุของปญั หาได้อย่างไร