Scratch_BUU_V2

หลักสตู รพฒั นาทกั ษะครแู กนนำด4านวทิ ยาการคำนวณ วทิ ยาการขอ4 มลู
ป>ญญาประดิษฐสA ำหรบั ในอีอซี ี (ครูระดบั มธั ยมตน4 และครูระดบั มธั ยม
ปลาย)Train the Trainers (Secondary/High School Teachers)

โดย
สมาคมปญ> ญาประดษิ ฐปA ระเทศไทย (AIAT)

และ
เขตพฒั นาพเิ ศษภาคตะวนั ออก (EEC)

เน้อื หา

01 รจู* กั โปรแกรม Scratch
02 สมัครใชง* าน
03 บทละครโตต* อบ
04 เงื่อนไข
05 การทำซำ้ (Loop)

กิจกรรมที่ 1
ร,จู กั โปรแกรม Scratch

โปรแกรม Scratch

• เปน# ภาษาคอมพิวเตอรท0 ่ีมคี ำสงั่ สำหรับสั่งให;คอมพิวเตอรท0 ำงาน

• สามารถสร;างชิ้นงาน เชน@ นิทานที่โต;ตอบกบั ผ;อู @าน ภาพเคล่ือนไหว เกม ดนตรี และ ศิลปะ
• ผเ;ู รยี นไดเ; รียนร;ูหลกั การและแนวคิดการโปรแกรม รวมท้ังการคดิ อยา@ งสร;างสรรค0 มีเหตุผล และเป#นระบบ

• การเขยี นโปรแกรมภาษา Scratch

• ใช;บล็อกคำสัง่ มาวางต@อกันแทนการพิมพค0 ำสง่ั
• มตี วั ละครและฉากทใ่ี ชส; ร;างเร่ืองราวตา@ งๆ
• เหมาะสำหรับการสอนเขียนโปรแกรมทส่ี @งเสริมความคดิ สรา; งสรรค0 การคิดอย@างมรี ะบบและการทำงาน

ร@วมกัน
• สามารถแลกเปลีย่ นและเผยแพรผ@ ลงานได;ทาง : http://scratch.mit.edu/

โปรเจคใน Scratch ชุดคาํ ส1ัง

ชิ้นงานในโปรแกรม Scratch เรยี กว9า “โปรเจค” ประกอบดวB ย
1. เวที (Stage)
2. ตัวละคร (Sprite)
3. สครปิ ตR (Script) หรอื ชดุ คำสัง่ เวที

ตวั ละคร

ส"วนประกอบหลกั ของโปรแกรม Scratch

เมนเู คร่อื งมือ 1>> << 3 ยDอ/ขยาย ดูสDวนผลลพั ธaโปรแกรม 2 เครอ่ื งมือเกี่ยวกบั เวที (Stage Toolbar)
(Toolbar) << 4 เขยี นชดุ คำสง่ั / เลือกชุดตัวละคร / ใสเD สยี งประกอบ
<< 6 กลุDมคำสั่ง
5
เวที ใชSแสดงผลการทำงานของสคริปตa เสียง หรือ ฉาก << 7 บล็อกคำสัง่ ในกลุมD ที่ถกู เลอื ก

ตัวละคร และ เวที << 9 ตัวละครทีถ่ กู เลอื ก
ที่ถูกใชSในโปรเจค
ปWจจบุ ัน 8 >>

เวที

• มีขนาดกวา) ง 480 หน0วย สูง 360 หน0วย
• แต0ละโปรเจกต?มีเวทเี ดียว
• การบอกตำแหนง0 ใดๆ บนเวทีจะบอกโดยใชค) า0 (x, y) เช0น ตำแหน0งกลางเวทจี ะมีคา0 (x, y) เปMน (0, 0)

ตวั ละคร

• สามารถคลกิ ทต่ี วั ละครเพ่ือดขู อ9 มูลของตัวละครน้นั

ตาํ แหน่งตวั ละครบนเวที

อนุญาตใหล้ ากตวั ละครใน สาํ หรับต)งั ชื-อตวั ละคร
โหมดนาํ เสนอหรือไม่ ทิศทางการเคลื-อนที-

รูปแบบการหมุน (หมุนไดร้ อบทิศทาง /
หนั ไดเ้ ฉพาะซา้ ยหรือขวา /
หา้ มหมุน)

ตอ้ งการใหแ้ สดงตวั ละคร
บนเวทีในขณะท-ีออกแบบ
หรือไม่

ชดุ ตวั ละคร (Costumes)

• เปน# ภาพของตัวละคร

• สามารถเปลี่ยนแปลงหรือเพิ่มภาพใหม>
• สามารถเขยี นสครปิ ตเ? พมิ่ ใหต@ วั ละครเปลยี่ นชดุ หรอื แสดงการเคลื่อนไหวในรูปแบบต>างๆ ตามตอ@ งการ

• การเข@าใชง@ าน

• คลิกตัวละครท่ีตอ@ งการเปล่ียนแปลง
• คลิกแทบ็ “Costumes”
• คลกิ ขวาที่ชุดตวั ละครท่ตี @องการ
จะปรากฏเมนคู ัดลอก ลบ และบนั ทกึ ชุดตัวละคร

• ตัวละครในตัวอยา> ง

• มี 2 ชดุ ตวั ละคร
• ชุดตวั ละครท่ี 1 ชื่อ costume1
• ชดุ ตัวละครท่ี 2 ชอ่ื costume2

การสรา% งโปรเจค

• เขียนสครปิ ต, (ชดุ คำส่ัง) โดยการลากบล็อกคำสั่งมาเรยี งต?อกนั เพื่อส่งั ใหตD วั ละครบนเวทที ำงาน
• การบนั ทกึ โปรเจค

- คลิกเมนู File > Save หรือ Save As
- โปรเจคถกู บันทกึ ท่โี ฟลเดอร, : Document\Scratch Projects

Script

• คอื ชดุ คำสั่งท่ีส่งั ให1ตวั ละครหรือเวทีทำงานตามวตั ถุประสงคท= ตี่ อ1 งการ
• มี 8 กล@ุม

การส่ังให*โปรเจคเร่มิ และหยุดทำงาน

• สามารถสั่งให+โปรเจคเริ่มทำงานโดยใชบ+ ล็อกในกลม>ุ Events เชน>

• กรณีใชค+ ำสงั่ Forever ถ+าตอ+ งการหยดุ การทำงานท้ังโปรเจคใหค+ ลกิ

กิจกรรมท่ี 2
สมคั รใช0งาน

สมคั รใชง( าน

1. เข&า https://scratch.mit.edu/

- กด Join Scratch

สมคั รใช(งาน

2.กรอก ข(อมลู ดังน้ี
- หมายเลขท่ี 1 ช่ือเขา( ใชง( านระบบ (User name)
- หมายเลขท่ี 2 รหสั ผJาน (Password)
- หมายเลขที่ 3 ยืนยนั รหสั ผJาน

1
2
3

สมคั รใชง( าน

3. กรอก ข(อมูลดงั น้ี
- วนั เดือน ป7 เกิด
- เพศ
- ประเทศ

สมคั รใชง( าน

4.กรอก E-mail และยนื ยนั E-mail

กจิ กรรมท่ี 3
บทละครตอบโต2
(คำสัง่ บลอ็ ก say, ask และ join)

บลอ็ ก say

• อยูใ$ นกลม$ุ บล็อก Looks
• ใช3สำหรับให3ตัวละครพูด พรอ3 มระบรุ ะยะเวลาในการแสดงข3อความที่พมิ พHลงไปในช$อง say

บลอ็ ก ask

• อยใู$ นกล$ุมบลอ็ ก Sensing
• ใชส5 ำหรับแสดงคำถามและรอให5ผ5ใู ชพ5 ิมพคE ำตอบ

บลอ็ ก ask

ส"วนท&ายของบลอ็ ก ask จะมีคำว"า and wait
• เปนA การรอคำตอบ
• เมื่อผ&ูใช&พิมพคL ำตอบลงไปในช"องรับคำตอบ คำตอบนัน้ จะถูกเกบ็ ไว&ที่บลอ็ กโดยอัตโนมตั ิเพื่อนำไปใชใ& นการ
แสดงผลร"วมกบั บลอ็ กอน่ื ๆ

บลอ็ ก join

• อยใู$ นกล$มุ บล็อก Operators
• ใช7สำหรับเชื่อมขอ7 ความเข7าดว7 ยกัน
• สามารถใชบ7 ล็อก say หรอื บล็อก think เพ่อื แสดงข7อความจากบล็อก join ได7

ตวั อย&าง การใช-บลอ็ ก join เพ่อื แสดงข-อความและคำตอบ

Input Output

กจิ กรรมที่ 4
เง่ือนไข

บลอ็ ก if

• ใชใ# นการทำงานแบบมเี งอื่ นไข (condition) เพอ่ื ควบคมุ ทิศทางการทำงานในการ
ตดั สนิ ใจอยJางใดอยาJ งหนง่ึ

• ถา# เง่ือนไขใน เปOนจริง จะทำคำสัง่ ภายในบล็อก if
• ถา# เงอ่ื นไขเปนO เท็จ จะไปทำคำสง่ั ทต่ี Jอจากบลอ็ ก if

บลอ็ ก if-else

• ใชใ# นการทำงานแบบมเี งื่อนไข (condition) เพอ่ื ควบคุมทศิ ทางการทำงานเชDนเดยี วกบั บล็อก if แตDเปMนแบบ 2
ทางเลือก

• ถ#าเง่ือนไขเปMนจริงจะทำคำสั่งภายในบล็อก if
• ถา# เงื่อนไขเปนM เท็จจะทำคำส่ังภายในบล็อก else

การสรา% งประโยคเง่อื นไข

• ใชบ# ลอ็ กในกลม+ุ Operators เปน8 ตวั ดำเนินการเพ่ือชว+ ยประเมินหรอื เปรยี บเทียบเพื่อใหไ# ดผ# ลเปน8 จรงิ หรือเทจ็
• ใน Scratch มกี ล+ุมบล็อก Operators ทมี่ ตี วั ดำเนนิ การเพ่ือนำมาใช#สรา# งเงอ่ื นไข ตวั อยา+ งเช+น

การเขียนสครปิ ตโ. ปรแกรมตดั เกรด
Input Output

กจิ กรรมท่ี 5
การสง่ั งานแบบวนซ้ำ (Loop)

การส่ังงานแบบวนซำ้

• การส่ังงานแบบวนซ้ำใชส1 ำหรับเขียนสคริปตเ; พอ่ื สัง่ ให1มีการทำงานหลายๆ รอบ
• ตัวอยDางสครปิ ตท; ีส่ ่งั ใหต1 วั ละครเดินวนอยDบู นเวทีเปนH รูปสเ่ี หลย่ี ม

• โดยเคลอื่ นทีไ่ ปข1างหนา1 100 กา1 วจากนน้ั หมุนทิศตามเขม็ นาQกิ าไป 90 องศา
• ทำแบบนี้ซำ้ กนั 4 รอบ

สครปิ ตน; ้สี ามารถเขยี นใหส1 ั้นลง
โดยใช1รปู แบบของคำส่ังวนซ้ำ

เปรยี บเทยี บการแกไ+ ขสครปิ ต2แบบลำดบั และแบบวนซ้ำ

สครปิ ตแ' บบลำดบั ถ/ามกี ารแกไ/ ขขนาดของพ้ืนท่ี
สี่เหลีย่ ม ตอ/ งตามแกใ/ นหลายจุด

การควบคมุ ลำดบั การทำงานแบบวนซ้ำ

ทำได%หลายลักษณะตามแตล2 ะชนดิ ของบล็อก Control เชน2

เปรยี บเทียบการแก+ไขสคริปตแ2 บบลำดบั และแบบวนซ้ำ

สคริปตแ' บบลำดับถ/ามีการแก/ไขขนาดของพ้ืนท่ี สครปิ ต'แบบวนซำ้ การแก/ไขสครปิ ต'จะทำไดง/ Hายขน้ึ
ส่เี หล่ยี ม ต/องตามแกใ/ นหลายจุด ในตัวอยHางนี้แกไ/ ขแคจH ดุ เดียว

ตวั อยา& ง

ตวั อยา& ง การประยุกต. Flowchart ในการเขียนโปรแกรม

• การสร%างเกมส)ลกู บอล ท่สี ามารถเคลือ่ นทภ่ี ายในกรอบท่ีกำหนดไว% หากลูกบอลมีการสมั ผสั กรอบ
ของเกมส) จะตอ% งมีการเปล่ียนทิศทาง และมี Paddle ท่ีผ%เู ลนM สามารถเคลือ่ นที่ไปมา โดยอาศยั
Mouse ในการบงั คับการเคลื่อนท่ีของ Paddle ซง่ึ เมอ่ื บอลสมั ผัสกับ Paddle แล%ว จะต%องมกี าร
เคลอ่ื นที่ไปในทิศทางตรงกนั ข%าม และเกมสจ) ะดำเนนิ ไปเรอ่ื ย ๆ ในลักษณะน้ี จนกวMาลกู บอลจะ
สมั ผสั กับพ้ืนจึงหยดุ การทำงาน

ดร.บัณฑิต ฐานะโสภณ

ข้นั ตอนที่ 1

• เลือกพนื้ หลังสำหรับเป1นฉากของ
เกมส6 โดยเลอื กจากรูปที่มีอยใู? น
Scratch หรอื รูปท่ีตอH งการ

• กดคลกิ ที่รูปภาพ (ในเครือ่ งหมาย)
• เลอื กรปู ทต่ี อH งการ เพอ่ื ทำเป1นพน้ื

หลังของเกมส6

ดร.บัณฑิต ฐานะโสภณ

ข้นั ตอนท่ี 2

• เลอื กลูกบอลหรอื วัตถทุ ตี่ 2องการ
(Sprite) โดยอาจจะเลือกจากภายใน
Scratch หรือ รปู ทสี่ ร2างขน้ึ เองก็ได2

• กดคลกิ ทร่ี ปู ภาพ (ในเครือ่ งหมาย)
• เลือก Sprite ท่ีตอ2 งการ เพื่อใช2เปUน

บอลในเกมสV

ดร.บัณฑิต ฐานะโสภณ

ข้นั ตอนท่ี 3

• ใสก# ารเคล่ือนทใ่ี หก1 ับลูกบอล

• ทำการคลิกเลือกลูกบอล
• เลือก tab “Script”
• เลอื ก Motion
• เลอื ก “move 10 steps” มาวางไว1ใน

หนา1 ตา# งของการเขยี น script
• เมื่อโปรแกรมทำงาน คำสัง่ น้ี จะทำให1ลกู

บอลเคลื่อนที่ 10 หนว# ย (pixels)

ดร.บัณฑิต ฐานะโสภณ

ข้นั ตอนท่ี 4

• กำหนดเง่ือนไขในการเคล่ือนท่ีของลกู
บอล

• เขยี นโปรแกรมเพ่ิมเตมิ ดังรูป
• เพื่อทำใหล@ กู บอลสามารถเคลอื่ นทแี่ ละมี

การเปล่ียนทิศทาง 45 องศา ทุกคร้ังทล่ี กู
บอลสัมผสั กับขอบภาพท่ไี ดจ@ ากข@อ 1

ดร.บัณฑติ ฐานะโสภณ

ข้นั ตอนที่ 5

• เลอื ก Sprite สำหรับ Paddle ใน
การรบั ลกู บอล

• เลือก Sprite ทต่ี ?องการ เพื่อจะทำ
หนา? ทใ่ี นการรับลกู บอล

• กำหนดขนาด ยอG /ขยาย ของ
Sprite ไดจ? ากเคร่อื งมอื ดงั รูป

ดร.บณั ฑติ ฐานะโสภณ

ข้นั ตอนที่ 6

• กำหนดเง่อื นไขการเคลื่อนที่ของ Paddle

• เขียนโปรแกรมสำหรับกำหนดใหB Paddle
เคลื่อนไหวตามตำแหนEงของ Mouse ดงั รปู

• เลือกเครอ่ื งมอื ตEาง ๆ ตามกลุEมของชนิด
หนาB ที่การทำงาน

ดร.บัณฑิต ฐานะโสภณ

ข้นั ตอนที่ 7

• กำหนดเงอ่ื นไขของลกู บอลเม่อื สัมผัส
กับ Paddle

• เกมส:นี้จะอาศยั Paddle ในการรบั ลกู
บอล

• เมื่อลูกบอลสมั ผัสกับ Paddle จะตEอง
เปนG ทศิ ทางการเคลือ่ นท่ีไปในทิศทาง
ตรงกนั ขาE ม

• โดยสามารถเขยี นโปรแกรมไดEดังรูป

ดร.บัณฑิต ฐานะโสภณ

ข้นั ตอนท่ี 8

• กำหนดเงื่อนไขของเกมส/

• ทำการลากเส5นสแี ดงท่ขี อบล9างของรูป
• หากลกู บอลสัมผสั ขอบล9าง เกมสก/ ็จะหยดุ
• โดยเง่อื นไขสามารถเขยี นโปรแกรมดังรูป

• กดเลอื กรปู ภาพ
• เลือก tab “Backdrops”
• เขยี นขอบภาพดว5 ยเครือ่ งมือท่ีมีให5

ดร.บัณฑิต ฐานะโสภณ

ตวั อยา& ง

ชมตวั อยา่ งไดท้ ี่ https://scratch.mit.edu/projects/112609602/#player

Thank You