Scratch Project Intro

ทบทวนความรู Scratch

สาํ นกั งานคณะกรรมการการศกึ ษาข้นั พ้ืนฐาน รว มกบั สถาบันสงเสรมิ การสอนวิทยาศาสตรและเทคโนโลยี
กระทรวงศึกษาธิการ

ทบทวนความรู Scratch

1. โปรแกรม Scratch
2. การเขยี นโปรแกรมแบบลาํ ดบั (กจิ กรรมที่ 1)
3. การเขยี นโปรแกรมแบบวนซํ้า

3.1 วนซาํ้ ไมส ิ้นสดุ (กิจกรรมที่ 2)
3.2 วนซา้ํ แบบกาํ หนดจาํ นวนรอบ (กิจกรรมท่ี 3.1 - 3.3)
3.3 วนซาํ้ แบบมเี งือ่ นไข ทาํ จนกวาเง่อื นไขจะเปนจริง (กิจกรรมท่ี 4)
4. การเขยี นโปรแกรมแบบมเี งื่อนไข (กิจกรรมท่ี 5)
5. ตัวแปร (กิจกรรมที่ 6)

1. โปรแกรม Scratch

1.1 ผูพัฒนาโปรแกรม

โปรแกรม Scratch พัฒนาโดย MIT (Massachusetts Institute of Technology)
ใชสรางเรื่องราวแบบโตตอบ เกม และแอนิเมชัน

1.2 ลักษณะการเขยี นโปรแกรม

มลี กั ษณะเปน block-based programming

Text-based programming block-based programming

1.3 การใชง านแบบ Online

ใชงานแบบ Online ที่เวบ็ ไซต https://scratch.mit.edu/

1.4 การใชงานแบบ Offline (Scratch Desktop)

Download ไดท่เี ว็บไซต https://scratch.mit.edu/download

1.4 การใชง านแบบ Offline (Scratch Desktop)

คลกิ ที่ Get it from Microsoft หรือ Direct download แลว ติดตั้งโปรแกรม

1.4 การใชง านแบบ Offline (Scratch Desktop)

Scratch 3.3 Scratch 2.0 และ 1.4

https://downloads.scratch.mit.e

du/desktop/Scratch%20Desktop
%20Setup%203.3.0.exe

1.5 Join Scratch

Join Scratch เพอ่ื บันทึก หรอื upload โปรเจ็กต เพือ่ แชรผ ลงาน

1.6 ไอคอนและการเปด โปรแกรม

1.7 หนาตางโปรแกรม 9. รปู แบบเวที
1. เวที(stage)
12. แถบเมนู 7. พนื้ ทท่ี ํางาน 10. เร่มิ โปรแกรม 11. หยดุ โปรแกรม 3. ตวั ละคร (sprite)
8. แถบงาน

5.กลุมบล็อกคําส่ัง

6. บลอ็ กคําส่ัง 4. ขอมูลตวั ละคร
2. ฉากหลงั
(backdrop)

1.8 ขอมลู ตัวละคร

ขนาด (%) ทศิ ทางตัวละคร

ตัวละคร ตาํ แหนง บนเวที
ซอ น/แสดง ตวั ละคร เพิ่มตวั ละคร

ชื่อตวั ละคร

2. การเขยี นโปรแกรมแบบลาํ ดบั

กจิ กรรมท่ี 1 say and sound

กิจกรรมที่ 1 เปน การเขียนโปรแกรมแบบลําดับ ซงึ่ เปนการสรา งเรื่องราวการสนทนา การแสดงเสียง
ของตวั ละคร และฉากหลังที่มีการเคลือ่ นไหว

กจิ กรรมที่ 1 say and sound -> ออกแบบฉาก ตวั ละคร และรหัสลําลอง

Backdrop

1. รอ 1 วินาที 1. เลน เสยี งแมว 1. เลนเสยี งนก
2. พมุ ไมถกู ลมพดั 2. แสดงขอความ 2. แสดงขอความ
3. รอ 2 วินาที “I’m a cat.” 2 วนิ าที “I’m a bird.” 2 วนิ าที
4. พมุ ไมก ลบั ท่เี ดมิ

ออกแบบฉากและตัวละคร ออกแบบรหสั ลาํ ลองของฉากหลงั และตวั ละคร

กจิ กรรมท่ี 1 say and sound -> เพิ่มฉากหลัง

1. คลิกท่ี Choose a Backdrop 2. เลอื กฉาก Blue Sky

กิจกรรมที่ 1 say and sound -> เพ่มิ ตวั ละคร

1. คลิกที่ Choose a Sprite 2. เลอื กประเภทตัวละคร 3. เลอื กตัวละคร Dove

กจิ กรรมท่ี 1 say and sound -> เขียน code ของฉาก

ทดลองใชค าํ ส่งั change กับฉากหลงั Blue Sky วาตวั เลือกใด มีผลทาํ ใหพ มุ ไมเ หมอื นถกู ลมพัด

เฉลย ตัวเลือก whirl
มผี ลใหเกิดการหมนุ วนของภาพ
เขาสูจุดศนู ยกลาง

กจิ กรรมท่ี 1 say and sound -> เขยี น code ของฉาก

Backdrop Code ของฉาก

1. รอ 1 วนิ าที
2. พุมไมถ กู ลมพดั
3. รอ 2 วนิ าที
4. พมุ ไมกลบั ทีเ่ ดมิ

รหัสลําลองของฉาก

กจิ กรรมท่ี 1 say and sound -> เขยี น code ของตวั ละคร

1. เลน เสยี งแมว Code ของตัวละครแมว
2. แสดงขอ ความ

“I’m a cat” 2 วินาที
รหสั ลาํ ลองของแมว

กจิ กรรมท่ี 1 say and sound -> เขียน code ของตวั ละคร

คดั ลอก code จากตวั ละครแมว ไปท่ตี วั ละครนก แลว เปล่ยี นตวั เลอื กเสยี งและขอความ

1. เลน เสียงนก Code ของตวั ละครนก
2. แสดงขอ ความ

“I’m a bird” 2 วินาที
รหัสลาํ ลองของนก

กิจกรรมที่ 1 say and sound -> ผลการทดสอบโปรแกรม

ผลการทดสอบโปรแกรมแมวและนกพดู พรอ มกัน
หากตองการใหแมวพูดเสร็จกอ น นกคอยพูด ตอ งแกไขรหัสลาํ ลองอยา งไร

1. .................................
2. เลน เสยี งนก
3. say “I’m a bird.” 2 วนิ าที

กจิ กรรมท่ี 1 say and sound -> แก code ของตวั ละครนก

เฉลย รหสั ลําลองและ code

1. รอ 3 วินาที
2. เลน เสียงนก
3. แสดงขอ ความ

“I’m a bird.” 2 วนิ าที

3. การเขยี นโปรแกรมแบบวนซาํ้

การเขียนโปรแกรมแบบวนซํ้า

การเขียนโปรแกรมแบบวนซ้ํา ทําใหโ ปรแกรมส้นั ลงเพราะไมต องใชบลอ็ กคาํ ส่งั ซาํ้ ๆ กนั หลายคร้ัง

จาํ นวนรอบ เง่ือนไข

คําสงั่ คําส่ัง ถา้ เง่ือนไขเป็นเท็จ
ที่ต้องการ ทีต่ ้องการ ทําคําสงั่ ...ซ้าํ ๆ
ทาํ ซ้ํา ทําซ้ํา จนกวา่
เง่ือนไขเป็นจริง

3.1 วนซาํ้ ไมสิน้ สุด 3.2 วนซํา้ ระบุจํานวนรอบ 3.3 วนซ้ําจนกวาเงอ่ื นไขจะเปน จรงิ
(กจิ กรรมที่ 2) (กิจกรรมที่ 3.1-3.2) (กจิ กรรมท่ี 4

กจิ กรรมที่ 2 dance forever

กจิ กรรมท่ี 2 เปนการเขยี นโปรแกรมแบบวนซํา้ ไมส ้นิ สดุ เพื่อสรา งภาพท่มี ีการเคลื่อนไหวตลอดเวลา

กจิ กรรมที่ 2 dance forever -> ออกแบบฉาก ตัวละคร และรหสั ลาํ ลอง

Backdrop

เปด เพลง 1. ตําแหนงเริ่มอยดู านซาย 1. ตําแหนง เรม่ิ อยูดานขวา
ตลอดเวลา 2. หนั ไปทางขวาของผชู ม 2. หนั ไปทางซายของผูชม
3. เคล่อื นไป 50 กา ว 3. เคลอื่ นไป 50 กา ว
4. เปลยี่ นทาเตน 4. เปลย่ี นทา เตน
5. ชนขอบแลวเดนิ กลับ 5. ชนขอบแลว เดนิ กลับ
6. ทาํ ซาํ้ ขอ 3 – 5 ไมส ้นิ สดุ 6. ทาํ ซํา้ ขอ 3 – 5 ไมสิ้นสุด

ออกแบบฉากและตวั ละคร ออกแบบรหสั ลาํ ลองของฉากและตัวละคร

กจิ กรรมที่ 2 dance forever -> เพิม่ เสียงเพลง

1. คลกิ Backdrop 3. คลกิ Choose a Sound 4. คลิก Loops
5. คลิก Dance Funky
2. คลกิ แถบ Sound

กจิ กรรมท่ี 2 dance forever -> เขียนสครปิ ตข องฉาก

กจิ กรรมที่ 2 dance forever -> code นักเตน

เขยี น code ใหต วั ละครเตนจากดา นซายไปดา นขวาของผูชมกลบั ไปกลบั มา ไมร ูจบ

ตัวละครมขี นาดเลก็ ลงจากปกติ
ตัวละครอยูตําแหนง ดานซา ย

ตวั ละครเปลี่ยนทา ทางเรว็ มาก
ไมร จู บ

กจิ กรรมท่ี 2 dance forever -> code นกั เตน

หากนาํ คําสั่ง ใสเ ขาไปใน forever จะมผี ลอยางไร

ผลคือ ตัวละครเปลย่ี นทา ทางชาลง

กจิ กรรมท่ี 2 dance forever -> code นักเตน

หากนาํ คําสั่ง ใสเ ขาไปใน forever จะมีผลอยา งไร

ผลคือ ตัวละครเคล่ือนทีไ่ ปชดิ ขอบดา นขวาของเวที

กจิ กรรมท่ี 2 dance forever -> code นกั เตน

หากนําคําสัง่ ใสเขา ไปใน forever จะมผี ลอยา งไร

ผลคือ ตวั ละครกระเดงและเตนกลบั หวั

กจิ กรรมท่ี 2 dance forever -> ทิศทางของตัวละครและรปู แบบการหมนุ

ดานขวา ดานลา ง ดานซาย ดานบน

-1 ถึง -179 0 ถึง 180

กจิ กรรมที่ 2 dance forever -> สคริปตน กั เตน

ตองการใหตวั ละครหันแคซา ยและขวา
ควรใสบ ล็อกคําสัง่ ตาํ แหนงใด

เน่อื งจากตั้งคา เพยี งคร้ังเดียว

ผลคือ ตวั ละครเตน ไปกลบั ตามตอ งการ

กจิ กรรมที่ 2 dance forever -> เขยี น code ตัวละคร Champ99

เขยี น code ของตัวละคร Champ99 ตามรหสั ลําลอง
1. กําหนดจดุ เร่มิ ตน
2. หนั ไปทางซายของจอ
3. เคลอื่ นไปทางซายของจอ
4. เปลยี่ นทา เตน
5. ชนขอบแลว เดนิ กลับ
6. ทําซ้าํ ขอ 3 – 5 ไมร จู บ

3. การเขยี นโปรแกรมแบบวนซา้ํ
ตอนที่ 2

กจิ กรรมที่ 3.1 traffic line

กจิ กรรมที่ 3.1 เปน การเขยี นโปรแกรมแบบวนซา้ํ ระบจุ ํานวนรอบ เพื่อตีเสน จราจร ดังภาพ

กิจกรรมท่ี 3.1 traffic line -> เพิ่มกลุม บลอ็ ก Pen

1.คลิก 2. คลิก Pen 3. กลุมบลอ็ ก Pen

กจิ กรรมที่ 3.1 traffic line -> บลอ็ กคําส่งั วาดภาพ

ลบทั้งหมด

จรดปากกา
ยกปากกา

สีปากกา
ขนาดปากกา

กจิ กรรมที่ 3.1 traffic line -> เขยี น code

เตรยี มปากกา

ลบทง้ั หมด
ตั้งคา สปี ากกา
ตั้งคา ขนาดปากกา
ตั้งคา ทิศทางของตวั ละคร
กาํ หนดตําแหนง เร่มิ ตน

กจิ กรรมที่ 3.1 traffic line -> เขียน code

เริ่มวาดเสนท่ี 1 และปรับสคริปตใหค รบ 5 เสนตามภารกิจ

จรดปากกา
เคล่อื นที่ 50 กา ว
ยกปากกา
เคลือ่ นท่ี 50 กา ว

กจิ กรรมท่ี 3.1 traffic line

เฉลยการวาดครบ 5 เสน

กิจกรรมที่ 3.2 draw with code

กิจกรรมที่ 3.2 เปน การเขียนโปรแกรมแบบวนซ้าํ ระบุจํานวนรอบ เพ่อื วาดภาพรูปหลายเหลี่ยม

สามเหลย่ี ม สี่เหลยี่ ม หา้ เหลีย่ ม แปดเหลี่ยม 360 เหลี่ยมหรือวงกลม

กจิ กรรมท่ี 3.2 draw with code -> คาํ นวณมุมภายนอกของรูปหลายเหลย่ี ม

การวาดรปู หลายเหลยี่ มดานเทามมุ ภายในเทา กันใด ๆ ดวยโปรแกรม Scratch
จะมผี ลบวกของมุมภายนอกจากการหมนุ เทา กับ 360 องศาเสมอ
โดยจํานวนครง้ั ทหี่ มุนเทา กบั จาํ นวนเหล่ยี มของรปู น้ัน ๆ
เชน รูปสามเหลยี่ ม ผลบวกคอื 120 + 120 + 120 = 360 (หมุน 3 ครั้ง)

60 120

กจิ กรรมท่ี 3.2 draw with code -> การวาดรูปสามเหลีย่ ม

เสนที่ 3 เสน ท่ี 2 อลั กอรทิ มึ

60 120 มมุ ทเ่ี ลย้ี ว 1. หนั ไปทางขวาของจอ
เสนที่ 1 2. เคลอื่ นไป 100 กา ว
ทิศทางตวั ละคร 3. เลี้ยวซา ย 120 องศา
4. เคลื่อนไป 100 กาว
5. เลยี้ วซาย 120 องศา
6. เคลอ่ื นไป 100 กาว
7. เล้ยี วซาย 120 องศา

กจิ กรรมท่ี 3.2 draw with code -> การทาํ งานแบบวนซ้ํา

อัลกอรทิ ึมมีคําสง่ั ซํา้ ๆ กนั ควรเปลี่ยนเปนอลั กอรทิ มึ แบบวนซํ้า

อลั กอริทึมแบบลาํ ดับ อลั กอริทมึ แบบวนซํ้า

1. หันไปทางขวาของจอ 1. หนั ไปทางขวาของจอ
2. เคลอ่ื นไป 100 กาว 2. เคลื่อนไป 100 กา ว
3. เล้ียวซาย 120 องศา 3. เล้ียวซาย 120 องศา
4. เคล่ือนไป 100 กาว 4. ทําซํ้าขอ 2 – 3 รวมทั้งหมด 3 รอบ
5. เลย้ี วซา ย 120 องศา
6. เคล่อื นไป 100 กา ว
7. เลี้ยวซา ย 120 องศา

กจิ กรรมที่ 3.2 draw with code -> เตรยี มตวั ละคร pencil

กาํ หนดปลายดินสอเปน ตําแหนง อา งอิงของตัวละคร

1.เพิ่มตวั ละคร pencil 2. คลกิ Costumes 3. ลากคลมุ ภาพ 4.ลากปลายดินสอใหต รงตําแหนง อางองิ

กจิ กรรมที่ 3.2 draw with code -> เขยี น code

ตวั ละครเคล่ือนท่ีแตไ มป รากฏเสน