scratch เบื้องต้น - wordpress.com · ที่แมว scratch...

แปลและเรยบเรยงจากเอกสารของ CoderDojo โดย จตรภณ และณรงคพร เหลาศรสน (fb.me/narongporn.lao)

This work is licensed under the Creative

Commons Attribution 4.0 International License.

ซชการดชดนจะชวยใหคณเรยนรการสรางโปรแกรมคอมพวเตอรดวย Scratch ซงกอนอนเลย คณจะตองมโปรแกรม Scratch กอน

คณอาจเลอกทจะดาวนโหลด Scratch จาก dojo.soy/downloadscratch แลวตดตงทเครองคอมพวเตอรของคณ หรอใชงานผานทางเวบบราวเซอร โดยไปท dojo.soy/usescratch เมอคณพรอมแลว เรากจะไปยงขนตอนตอไปกน

หลงจากทคณลงชอเขาใชงาน Scratch ทางออนไลน หรอรนจากเครองคอมพวเตอร คณกจะเหนหนาจอดงตวอยางขางลาง ซงมสวนตางๆ ทคณจ าเปนตองรจกไว ดงน

Scratch เบองตน

การดแผนท 1 จาก 7 ฉนก าลงเรยน: Scratch

1

2

เวท (Stage) แถบสไปรทปจจบน (Current Sprite Panel)

เรม โปรแกรม

จบ โปรแกรม

รายการสไปรท (Sprite List)

แถบโคดบลอก (Code Blocks Palette)




ในหนาน มค าศพทบางค าทจะตองท าความเขาใจกนกอน

เวท (Stage) นคอทท Scratch ใชรนโปรแกรม ซงประกอบไปดวย

• ภาพแบกกราวนด ซงเปนภาพทอยบนพนหลงของหนาจอ อาจมมากกวา 1 ภาพกได • โคดบลอกตางๆ ทเกยวของ (จะกลาวถงเรองนในหนาถดๆ ไป)

สไปรท (Sprites) คอ ทกอยางทปรากฎบนเวท ซงใน Scratch ไดแก

• รปภาพ ทปรากฎบนเวท • costumes หรอรปทรงอนๆ ทม • เสยง ทเกยวของ • โคดบลอกตางๆ ทเกยวของ

สไปรทปจจบน คอ สไปรททเราเลอกไว จากรายการสไปรททงหมด

โคดบลอก (Code Blocks) โคดใน Scratch นนจะอยในรปแบบ บลอก ซงคณตองน ามาตอเขาดวยกนเพอสรางเปนโปรแกรม คณสามารถเลอกบลอกตางๆ จากแถบโคดบลอก (Code blocks palette) แลวลากมาวางในแถบสไปรทปจจบน (Current sprite panel) เพอน ามาตอเขาดวยกน บลอกทงหมดแบงออกเปน 10 กลม โดยใชสตางกน ซงคณสามารถเลอกบลอกแตละกลมไดจากรายการทางดานบนของแถบโคดบลอก

เมอเราไดรจกกบสวนตางๆ กนแลว ทน กถงเวลาทเราจะเขยนโคดแลว ใหกลบมาท Scratch และคลกทแมว Scratch ในรายการสไปรท ตอนน เจาแมวตวน กกลายเปนสไปรทปจจบนแลว

ใหไปท Events ในแถบโคดบลอก และเลอกอเวนต when clicked แลวลากมาวางบนแถบสไปรทปจจบน

จากนนไปท Looks ในแถบโคดบลอก และเลอก say [Hello!] for [2] secs แลวลากไปวางบน แถบสไปรทปจจบน จากนนกน ามาตอทายบลอก ดงภาพ

ทน ใหคลกปม เรมโปรแกรม แลวรอดผลลพธ



3

4




เยยมมาก! คณเพงเขยนโปรแกรมแรกดวย Scratch ไดส าเรจ ถงเวลาทเราจะเรยนรเพมเตมเกยวกบ การเพมโคดเขาไป และลบโคดออกจาก Scratch! ซงโคดใน Scratch นน ประกอบไปดวยบลอกตางๆ ทเราน ามาตอเขาดวยกนเพอสรางเปนโปรแกรมขนมา

บลอกเหลานไดมาจากแถบโคดบลอก ซงมการแบงบลอกออกเปนกลมตางๆ เมอคลกทชอกลมใด คณกจะเหนบลอกตางๆ ทอยในกลมนน ในตวอยาง เราเลอกกลม Motion

บลอกทงหมดในกลมทคณเลอกจะแสดงอยในรายการ คณสามารถเลอกบลอกทคณตองการได โดยคลกทบลอกนน แลวลากไปวางบน แถบสไปรทปจจบน จากนนกปลอยเมาส

เมอบลอกอยในแถบสไปรทปจจบนแลว คณสามารถยายบลอกไปมาได แลวน าไปตอกบบลอกอนๆ ได ถาคณอยากรวา บลอกนสามารถท าอะไรได กใหคณดบเบลคลกทบลอกนน แลวดมนท างาน

โดยปกตแลว เราอยากใหบลอกท างานโดยอตโนมต เมอมอะไรบางอยางเกดขน นคอเหตผลวา ท าไมโปรแกรมสวนใหญของคณจงเรมตนดวยบลอกจากกลม Events ซงบลอกทใชบอยทสด นาจะเปนบลอกน

โคดบลอกทคณน ามาตอกบบลอกน จะท างานเมอมการคลกท ธงสเขยว

โคดบลอกจะเรมท างานจากบนลงลาง ดงนน ล าดบในการตอโคด จงเปนเรองส าคญ

ในตวอยาง สไปรทจะพดค าวา “Hello” กอน แลวจงเลนเสยง “meow” ตามมา



1

1

2

3

โคดบลอก

ชอกลม




การยายหรอลบโคดบลอกทเราไมตองการนน ท าไดงายมาก เพยงแคคณคลกไอคอนรปกรรไกร แลวคลกโคดทคณอยากจะลบ

ขอควรระวง! คณอาจจะลบบลอกอนๆ ซงเชอมกบบลอกทคณสงใหลบ ไปดวย

หากคณเผลอลบไปโดยไมไดตงใจ และตองการน าโคดนนกลบมา ใหคณไปทเมน Edit แลวคลก Undelete คราวนใหคณลองเพมบลอกใหม ลบบลอกบางสวน และเรยกบลอกทลบไปกลบคนมา

ในตอนน คณไดเรยนรวธจดการกบโคดแลว กถงเวลาทเราจะลองสรางอะไรงายๆ กน เชน ท าใหเจาแมว Scratch เดนเปนวงกลม

ใหคณตรวจสอบดวา คณไดเลอก “แมว” ในรายการสไปรทแลว จากนนใหลากบลอกเหลานมาตอกน โดยน าบลอกมาจาก Events และ Motion

จากนนกคลกธงสเขยวทอยบนเวท หากคณคลกปมนหลายๆ ครง จนแมว เดนเลยออกไป คณกสามารถจะลากมนกลบมาได!

แตแมวตวนมนก าลงเดนเปนเสนตรง... ซงนคงไมใชสงทคณตองการแนๆ ดงนน ใหน าบลอกนมาตอทาย เพอสงใหแมวเดนเปนวงกลม โดยบลอกน จะอยในกลม Motion เชนกน

บลอกนจะท าใหแมวหมนทละ 15 องศา หากหมนไปเรอยๆ กจะครบ 360 องศา ซงกคอ การเดนรอบเปนวงกลม คณสามารถเปลยนตวเลขน และจ านวนกาว (steps) โดยคลกทตวเลข แลวปอนคาใหมตามตองการ

ในกรณทคณตดตง Scratch บนเครองคอมพวเตอร ใหคณบนทกงานของคณไว โดยไปทเมน File และคลก Save จ าไววา คณควรบนทกงานของคณอยางสม าเสมอ

และคณอาจใชค าสง Save as เพอบนทกเปนไฟลใหมในอกชอหนงกได

4

5

6

คลกทน






ถงตอนน แมวของคณกขยบไดแลว แตคงจะสนกกวาน ถาเราสามารถควบคมมนดวยแปนคยลกศร ซงเราจะมาเรยนรวธกนในการดแผนน

คณคงเดาออกวา ในขนตอนนเราจะใชบลอกจากกลม Events และ Motion อกครงหนง คราวนใหคณมองหาบลอกน

ถาคณคลกตรงลกศรเลกๆ (▼) ซงอยขาง “space” กจะมรายการคยทงหมดบนคยบอรดมาใหคณเลอก คณจะตองใชบลอกแบบน 4 อน แลวน าไปตอกบบลอก move ตามรป

ตอนน แมวของคณกสามารถเดนหนา และถอยหลงไดแลว แตมนยงไมสามารถเดนขนลงได ความจรง

แลว ถาคณดบลอกตางๆ ทอยในกลม Motion กจะไมเหนบลอกส าหรบสงใหขนหรอลงเลย บลอกทเหลอสวนใหญ จะเกยวของกบคา x และ y ทงนน

เวลาทโปรแกรมเมอรพดถงต าแหนงของวตถ เชน สไปรท เรากมกจะใชพกดบนแกน x และแกน y ในการระบต าแหนง โดยแกน x จะเรมจากซายไปขวา ในขณะทแกน y จะเรมจากลางขนบน

คณสามารถก าหนดต าแหนงของสไปรทไดจากพกดของจดศนยกลางของมน ใหคณลองใสตวเลขลงไป เชน (15, -27) โดยให 15 เปนต าแหนงตามแกน x และให -27 เปนต าแหนงตามแกน y

เพอใหเขาใจมากขน ใหคณไปทกลม Motion และลากบลอก go to ไปวางในแถบสไปรท โดยไมตองเชอมกบบลอกอน

จากนน กใสคาตวเลขลงในชอง x และ y แลวดบเบลคลกทบลอกน ลองเปลยนเปนคาอนๆ แลวดวาแมวจะไปอยตรงไหน ทงน แกน x ใน Scratch จะเรมตงแต -240 ถง 240 สวนแกน y จะเรมตงแต -180 ถง 180



1

2

-10 หมายถง ถอยกลบไป 10 กาว

+y

-y

+x -x




หลงจากทคณไดเรยนรเกยวกบพกดบนแกน x และ y แลว คณกสามารถจะสงใหแมวเดนขนและเดนลงได โดยเพยงแคเปลยนคา y ใหคณสรางโคดเพมตามรปขางลาง

ทน เมอคณกดคยลกศรตางๆ แมวของคณกสามารถเดนไปมารอบเวทไดแลว

แมวา ตอนนแมวของคณจะสามารถเดนไปมาไดแลวกตาม แตนคอเกมๆ หนง เราจะท าใหมนกลบมาทจดเรมตนไดอยางไร? ตามหลกแลว คณจะตองน าแมวกลบไปยงต าแหนงเดม เหมอนตอนทผเลนเรมเกม และใน Scratch นน โปรแกรมจะเรมท างานเมอคลกทธงเขยว ดงนน ทคณตองท ากคอ เปลยนพกด x และ y ของแมว เมอมการคลกทธงเขยว

อนนงายมากๆ เพราะจดศนยกลางของเวท ตามพกด x และ y คอ (0,0) ดงนน ทคณตองท ากคอ น าบลอกอเวนตของธงเขยว มาตอกบบลอก go to ทคณเตรยมไวแลว จากนน ก าหนดคาในบลอก go to ใหเปน (0,0) แลวน ามาตอเขากบบลอกอเวนตของธง

3

4






ตอนนแมวของคณสามารถเดนขนลง และเดนไปทางซายหรอขวาไดแลว คณอาจจะลองเอามนไปไวในทแปลกๆ อยางเชน ใตน า! โดยใน Scratch มคลงรปภาพส าหรบใชเปนฉากหลง และสไปรทตางๆ ส าหรบใชตกแตงงานของคณใหโดดเดนยงขน

จากนนกเลอกภาพพนหลงใตน าทคณตองการ



1

เลอกเวท

คลกท Backdrops

1

2

คลกทน! 3




เยยมมาก! ตอนนแมวของคณกไปอยใตน าแลว อยางไรกตาม แมวคงไมคอยชอบน าสกเทาไหร ไมเปนไร เรองแคนคณแกได โดยเปลยนจากแมวเปนปลาฉลามแทน!

ขนแรกใหคลกเลอกแมว แลวคลกทแทบ Costumes

จากนนคลกท Choose costume from library

แลวเลอก ปลาฉลาม

ทน กลบแมวออกทงหมด โดยเลอกแมวทละตว และคลก x

ตอนนคณกไดปลาฉลามมาแลว!



2

3

4

5

คลกทน!




ตอนน เรามฉลามวายไปมาอยในน าแลว กถงเวลาทจะลองเพมปลาใหมนไลจบกน! คลกปม Choose sprite from library

จากนน ใหเลอกปลาจากหนาจอทปรากฎ

ดเหมอนปลานนจะตวใหญกวาฉลามของคณ ใหคณใชปม Grow และ Shrink เพอปรบขนาดใหเหมาะสม

โดยคลกปม Grow หรอ Shrink แลวคลกทปลา เพอปรบขนาดของปลาใหใหญขนหรอเลกลง

เยยมมาก! คราวนเรากจะเพมโคดเพอใหปลาวายไปมาไดเอง โดยทผเลนไมตองท าอะไรกบมน เราจะใหผเลนเปนฉลาม ทคอยไลจบปลาเหลาน

อยางไรกตาม มนคงดแปลก ถาฉลามวายน าถอยหลง กเหมอนทคณหมนตวกลบแทนทจะเดนถอยหลง ฉลามกตองหนกลบ แทนทจะวายถอยหลงแบบนน โชคดทใน Scratch มบลอกส าหรบการนดวย

บลอก point in direction จะใหคณก าหนดทศทางทคณอยากใหสไปรทเคลอนทไป คณสามารถใสตวเลขอะไรกไดลงในชอง หรอจะใชหนงในสตวเลอก คอ up, down, left หรอ right กได ใหคณไปท Motion แลวน าบลอกนมาตอกบโคดของปลาฉลาม ตามรปขางลาง



1

2

Shrink Glow

เปลยนจาก -10 เปน 10 ตอนนปลาฉลาม

กวายน าไปขางหนาแลว




ถาคณลองขยบฉลามหลงจากทเพมบลอก point in direction ไปแลว คณอาจจะเหนสงผดปกตบางอยาง คอ ฉลามหนไมถกทาง!

ปญหากคอ ในตอนเรมตน เวลาทเราสงหมนสไปรทตางๆ รวมทงฉลามน ลกษณะการหมน หรอ rotation style จะเปนแบบ all around ดงนน คณจงเปลยนเปน left-right แทน เพอแกปญหาน

เหมอนเชนเคย บลอกนจะอยใน Motion สงทคณตองท ากเพยงแกไขโคดจากการดแผนท 3 เพอก าหนดลกษณะการหมนตามรปขางลาง



3




คราวนเราจะมาท าใหปลาสามารถเคลอนทไดเอง โดยคณจะตองใชบลอกอกประเภทหนงทเรยกวา บลอกคอนโทรล ซงบลอกประเภทน จะใชส าหรบสงใหท าอะไรบางอยางซ าๆ หลายๆ ครง หรอท างานภายใตเงอนไขทก าหนด

ใหคณเลอกปลา แลวลากบลอกอเวนต when clicked กบบลอกคอนโทรล forever และบลอก move 10 steps จากกลม Motion เขาไปตอกนในแถบสไปรท ตามรปขางลาง

ปลาจะท าตามค าสงทอยในบลอก forever ซ าแลวซ าเลา ไมรจบ โดยเมอการท างานมาถงบลอกสดทาย

กจะวนกลบไปเรมตนใหมทบลอกบนสดอกครง ใหคณคลกปมธงเขยว เพอลองดวาจะเกดอะไรขน

จะเหนวา ปลาวายไปชนขอบของเวท อกทงมนยงวายเรวเกนกวาปลาฉลามจะจบทน ดงนน อนดบแรกเลย คณตองท าใหมนวายชาลงกอน ซงกงายมาก แคใหมนรอสกคร หลงจากมนขยบไป 10 สเตป

นคอบลอกคอนโทรล ทเราจะใช

คณสามารถตงเวลาใหปลาหยดรอกวนาทกได ใหคณลองตงคาสก ครงวนาท (0.5) คณอาจลองเปลยนเปนคาอนๆ เพอดวาคาไหนจะเหมาะสมส าหรบเกมมากทสด อยาลมวา คณยงสามารถเปลยนจ านวน สเตปไดดวยนะ!

ตอนนปลาของคณขยบแลว แตคณตองท าใหมนสามารถหนกลบ เมอถงขอบเวทไดดวย ซงใน Scratch กมบลอกในกลม Motion ส าหรบการนโดยเฉพาะ นนคอ บลอก if on edge bounce หนาทของบลอกน กคอ คอยดเมอปลาชนขอบ กจะใหมนเลยวซาย ขวา ขน หรอลงไดตามความเหมาะสม แตแนนอนวา ปลาของคณกจะวายหงายทองเหมอนทผานมา ดงนน คณจงตองใชบลอก set rotation style รวมดวย



1

2

3




แมวาปลาของคณจะสามารถวายไป วายกลบไดแลว แตมนกยงวายเปนเสนตรง ซงกคงจะงายเกนไปส าหรบผเลน คณตองท าใหปลาวายไปในทศทางทผเลนคาดเดาไดยาก

จากทไดเรยนรไปแลวในการดแผนท 2 เกยวกบการก าหนดทศทางการเคลอนทของสไปรท ดงนนใหคณเพมบลอก turn เขาไป แลวคลกธงเขยว

แมจะดดขน แตมนกยงคงเคลอนทเปนแบบแผนอย เราตองท าใหมนเคลอนทแบบสม โชคดท Scratch

สามารถสมการเคลอนไหวได คณจะตองใชบลอกอกประเภทหนง ทเรยกวา operator

คณสามารถใสขอมลหนงคาหรอมากกวานน (ไมวาจะเปนตวเลข ขอความ หรอคาจรง/เทจ) ลงในบลอก Operators แลวมนจะใหคากลบมาคาหนง คณสามารถทราบชนดของคาทจะสงกลบมาได โดยดจากรปทรงของบลอก หากตรงปลายกลมจะใหคาเปนตวเลขหรอขอความ แตหากเปนปลายเหลยม กจะใหคาเปนจรงหรอเทจ

คณจะตองน าบลอก pick random จากกลม Operators ไปใสลงในบลอก turn degrees โดยคลก

และลากไปใสในชองทคณก าหนดคามมองศา คณสามารถเปลยนคาต าสดและคาสงสดทจะสมได แตคาเรมตน (1 และ 10) กถอวาเหมาะอยแลวส าหรบเกมน ดงนนจะปลอยไวเหมอนเดมกได

แกไขโคดของปลาตาม รปขางลาง แลวลองรน โดยคลกทธงเขยว



ขนตอไป มาจบปลากน

4

5




ในตอนน ทงฉลามและปลากวายน าไดแลว แตทงคไมมปฏกรยาตอกนเลย ปลาวายเขาไปในปากของฉลาม แตกลบไมมอะไรเกดขน เหนทจะตองแกไขแลว!

อนดบแรก คอ เราตองรกอนวา ปลากบฉลามมาแตะกนหรอเปลา คณจะตองใชบลอกในกลมคอนโทรล และกลมเซนซง (sensing) โดยบลอกในกลมเซนซงนน จะท าหนาทเกบขอมล เชน สไปรทอยทไหน แตะกบอะไร เปนตน

ส าหรบบลอกในกลมคอนโทรลทเราจะใช คอบลอก if... then ซงจะตองมการก าหนดคาจรงหรอเทจให สวนบลอกในกลมเซนซงทเราจะใชกน คอ touching... ซงคณจะตองเปลยนชอสไปรท (ถาคณยงไมไดเปลยนชอ มนจะขนเปน Sprite1) หากคณสงเกตจากปลายของบลอกทเปนเหลยม แสดงวามนจะใหคาเปนจรงหรอเทจ ทบลอก if... then ตองการ

ใหคณเพมบลอกนไวในลป forever ของปลา ถดจากบลอก if on edge bounce

คณเพยงแคเพม if... then โดยยงไมไดใสอะไรในชอง then คณสามารถท าใหปลาหายไปได เมอถกฉลามกน โดยใสบลอก hide ไวในบลอก if... then ซงคณจะหาบลอกนไดจากกลม Looks

เมอฉลามจบปลาได ปลาตวนนกจะหายไป นนยงไมคอยดเทาไหร ใหคณไปทกลม Looks น าบลอก show มาไวทจดเรมของโคดส าหรบปลา นจะท าใหเกมเรมตนใหมได

แตคณคงไมอยากใหผเลนตองเรมเกมใหมทกครงทจบปลาได! คณท าไดดกวานน โดยเมอปลาซอนตวอย

ใหหยดรอ เปลยนต าแหนงแบบสม แลวคอยแสดงมนอกครง นท าใหดเหมอนมปลาหลายตว แตจรงๆ แลวมเพยงสไปรทเดยวทเคลอนทไปมา



1

2

3

4




อยางนคอยดเหมอนเกมขนมาหนอย! แตเรากยงไมมวธเกบคะแนน หรอชนะเกม ไมเปนไร ปญหานกแกไดเชนกน โดยในการเกบคะแนน คณจะตองหาททจะเกบคะแนนเสยกอน รวมทงการเพมคะแนน และลางคะแนนเมอเรมเกมใหม

ขนแรก: การเกบคะแนน เมอคณตองการทจะเกบขอมลไวในโปรแกรม คณจะตองใช ตวแปร มนกเหมอนกลองใบหนงทมฉลากตดอย คณสามารถใสอะไรกได หรอดวามอะไรอยขางใน รวมทงเปลยนแปลงสงทอยขางในไดดวย โดยทวไป คณจะพบตวแปรอยใตกลม Data แตในตอนเรมตน คณจะตองสรางตวแปรขนมากอน

ตอนน เราตองเปลยนคาในตวแปร เมอฉลามจบปลาได และตงคาใหมเมอเรมเกมอกครง ซงเรองนท าไดงายๆ โดยใหไปทกลม Data แลวน าบลอก Set Score to 0 และบลอก Change Score by 1 มาใสในโปรแกรมของคณ

เยยม! ตอนน คณกไดคะแนน และทกอยางทตองการแลว คณอาจระบวา ไดกคะแนนถงจะชนะเกม

และเมอชนะแลว กนาจะท าอะไรเจงๆ หนอย เชน ใหฉลามแสดงความยนดกบผเลน หรอแสดงสไปรท ทมค าวา “คณชนะแลว” ขนมา หรอเลนเพลง... คณพอจะนกออกไหม?



5

คลกปม Make a Variable

1 ตงชอตวแปรวา Score

แลวเรากไดตวแปรไวใชในโปรแกรม

2

3

6

7

scratch เบื้องต้น - wordpress.com · ที่แมว scratch...

Documents