code their dreams ป นโปรแกรมเมอร รุ...

79
#CodeTheirDreams คูมือเรียนรูการเขียนโปรแกรมดวย นโปรแกรมเมอรรุนเยาว Code Their Dreams

Upload: others

Post on 14-Jul-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

#CodeTheirDreams

ค�มอเรยนร�การเขยนโปรแกรมด�วย

ป��นโปรแกรมเมอร�ร�นเยาว�Code Their Dreams

Page 2: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 0  

สารบญ  

หวขอ                            หนา  

•   เก$ ยวกบ  Scratch                 1  

•   สวนประกอบของ  Scratch             1  

•   การกาหนดคาส$ งใหกบเหตการณ           26  

•   การกาหนดตวแปรและการคานวณ         39  

•   การสรางเง$ อนไขและการวนซNา           53  

•   การออกแบบและสรางโปรแกรม           70  

   

Page 3: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 1  

เก1 ยวกบ  Scratch    

  Scratch  ทาใหเราสามารถเขยนโปรแกรมท$ สามารถตอบโตไดในหลายรปแบบ

ทNงการสรางเร$ องราว  เกมส  แอนเมช$น  และอ$ นๆอกมากมาย  ผานลงคนN  

http://scratch.mit.edu  และสามารถแชรส$ งท$ เราสรางขNนมากบเพ$ อนๆในสงคม

ออนไลนของเราได  

  Scratch  ทาใหเราไดคดอยางสรางสรรค  มเหตผล  เปนระบบ  และสามารถ

ทางานรวมกนไดดขNน  ซ$ งเปนทกษะท$ ควรจะมในศตวรรษท$  21  

  Scratch  เปนโครงการของ  Lifelong  Kindergarten  Group  ท$  MIT  Media  Lab  

ซ$ งเปดใหคนท$ วไปใชไดโดยไมเสยคาใชจาย  

สวนประกอบของ  Scratch  

 

1.  Menu  Bar  แถบเมนดานบนสดของหนาตาง  Scratch  ประกอบไปดวย    •     สาหรบเปล$ ยนภาษา  โดยโปรแกรม  Scratch  มภาษาไทย  ให

เลอกไดดวย  

     

1  

4  2  

3  

5  

6  

Page 4: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 2  

 

 

•   เมน  File  ประกอบไปดวยเคร$ องมอยอย    -  “New”  ใชสาหรบสรางไฟล  Scratch  ใหม    -  “Upload  from  your  computer”  สาหรบอพโหลด  Scratch  จากคอมพวเตอรของเรา    

-  “Download  to  your  computer”  สาหรบดาวนโหลด  Scratch  ลงเคร$ องของตวเอง  

-  ”Revert”  สาหรบยอนไฟลปจจบนไปท$ จดเร$ มตน  •        

 

 

เมน  Edit  ประกอบดวยเคร$ องมอยอย  

-  “Undelete”  ใชสาหรบการนาส$ งท$ เพ$ งลบไปกลบมา  คลายๆคาส$ ง  Undo  

-  “Small  stage  layout”  ใชสาหรบการยอหนาตาง  Stage  ใหเลกลง  เพ$ อทาใหหนาตาง  Script  Area  ใหญขNน  เหน  Block  ท$ เรา

สรางไดกวางขNน  ซ$ งเราสามารถเลอกท$ เคร$ องมอนNอกครNงเพ$ อทา

ใหหนาตาง  Stage  กลบมามขนาดเทาเดม  

-  “Turbo  mode”  ใชสาหรบการแสดงผลโปรแกรมเรวขNน  จากการลดระยะเวลาหนวงระหวาง      Block  ลง  เราสามารถทาใหกลบส

โหมดปกตโดยกดท$ ปมนNเหมอนเดม  

•               ใชสาหรบเรยกดหนาจอทางดานขวา  สาหรบเรยนรวธการใช  

Scratch  ดวยตนเอง  step-by-step    

Page 5: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 3  

•             ใชสาหรบไปท$ หนาจอ  about  ของ  Scratch  

(https://scratch.mit.edu/about/)  

 

2.  Stage  เวทสาหรบการจดวางตวละคร  และแสดงพNนหลง  ขณะท$ โปรแกรมทางานจะแสดงผลตรงหนาตางนN  โดย  ปมธงเขยว             ใชสาหรบการเร$ ม

โปรแกรม  และ  ปม  8  เหล$ ยมสแดง              

ใชสาหรบหยดโปรแกรม  

 

3.  Sprite  List  เปนสวนสาหรบการเกบตวละคร  ชNนสวนตางๆในโปรแกรมของเรา  โดยเรา

สามารถเลอกเพ$ มตวละครและชNนสวนตางๆรวมถงฉากหลงไดจากสวนนN  

 

   

1.   สวนสาหรบการแสดงฉากหลงปจจบน  การเพ$ มฉากหลง  และการ  set  ฉากหลงใหม  

2.   สวนนNเราสามารถเพ$ มฉากหลงใหมได  4  วธ  ไดแก  การเลอกจากรปท$ มมาใหจากโปรแกรม  การวาดเองโดยโปรแกรมการวาดสาเรจรปท$ มให    การเลอก

จากรปในเคร$ องของเรา  และการถายรปผานกลองทนท  

1  

21  

32

43

Page 6: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 4  

3.   สวนตวละครและชNนสวนตางๆของโปรแกรมท$ ถกเพ$ มเขามาจะมาอยตรงสวนนN  

4.   สวนเพ$ มตวละครใหมสามารถทาได  4  วธ  ไดแก  การเลอกตวละครจากท$ มอยในโปรแกรม  การวาดเองโดยใชโปรแกรมสาเรจรปท$ มให  การเลอกตว

ละครจากภาพในเคร$ องของเรา  และการถายภาพตวละครผานกลองเรา

ทนท  

 

 

 

 

4.  Blocks  Palette    เปนสวนของคาส$ งท$ เราจะนาไปประกอบกนเปนโปรแกรมแบงออกเปน

หมวดหมตางๆตามประเภทการใชงาน  ประกอบดวย  2  สวนใหญๆ  คอ  สวน

หมวดหมดานบน  และสวนตวคาส$ งดานลาง  

Page 7: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 5  

   

สวนดานบน  แบงออกเปน  3  เมน  ไดแก  

1.  สครปต  ใชเลอกหาคาส$ งเพ$ อนามาตอกนเปนโปรแกรม  แบงออกเปน  10  หมวดดวยกน  แตละหมวดกจะม  Block  คาส$ ง  การกระทาท$ แตกตางกน  

ดงนN  

Page 8: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 6  

   

1.  หมวดการเคล$ อนท$  เราสามารถทาใหตวละครเคล$ อนไหวไดตามท$ เราตองการ  ประกอบไปดวย  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

การเคล$ อนไหวไปตามปรมาณท$ กาหนด  

การเคล$ อนท$ ไปตามทศทางท$ กาหนด  

การเคล$ อนท$ ไปท$ ตาแหนงท$ กาหนด  ตาม

ระยะเวลาท$ กาหนด  

การเคล$ อนท$ ไปตามแนวแกนตามปรมาณ

ท$ กาหนด  หรอตNงคาเร$ มตนตามแกน  

สะทอนทศทางการเคล$ อนท$ ไปดานตรงขามเม$ อชนขอบ  

กาหนดคาการหมนเม$ อเกดการสะทอนกลบ  

Page 9: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 7  

                                           

 

2.  หมวดการรปราง  เราสามารถเปล$ ยนแปลงตวละครและฉากใหเหมาะกบสถานการณได  ประกอบดวย  

 

   

คาตาแหนงและทศทางปจจบน  ใชใสเปนคาแทนคาท$ เรา

กาหนดในชองสขาวได  

ใหตวละครพดหรอคดตามขอความท$ เรากาหนด

เปนปรมาณตามท$ เราตองการ  

กาหนดใหซอนหรอแสดงตวละคร  

กาหนดให  Costume  ของตวละครหรอฉากหลง

เปล$ ยนไปเปนตามท$ เรากาหนด  

กาหนดคาเอฟเฟคสใหกบตวละคร  

กาหนดคาขนาดใหกบตวละคร  

กาหนดคาตาแหนงชNนการซอนทบ

ใหกบตวละคร  

เรยกดคาลาดบของชด  costumes  ของตวละคร  ช$ อ

ฉากหลง  หรอ  ขนาดของตวละครเปนเปอรเซนต  

Page 10: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 8  

 

 

3.  หมวดเสยง  ทาใหเราเลนเสยงไดตามประเภทและจงหวะท$ เราตองการ  ประกอบดวย  

   

 

 

 

 

 

 

ใชเลนเสยงตามท$ เลอกและหยดเสยงตามท$ ตองการ  

เลนเสยงตามท$ เลอก  เปนระยะเวลาตามตองการ  

และเลอกหยดไดเปนปรมาณเวลา  

เลอกโนต  เลอกระยะเวลาเลน  และเลอกเสยงเคร$ อง

ดนตรท$ ตองการ  

เลอกปรบ  ตNงคาระดบเสยงตามหนวยท$ ตองการ  และ

สามารถดงคาระดบเสยงมาใชได  

เลอกปรบ  ตNงคาระดบความเรวเสยงตามหนวยท$

ตองการ  และสามารถดงคาระดบความเรวเสยงมา

ใชได  

Page 11: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 9  

 

4.  หมวดปากกา  สามารถวาดเสนตามการเคล$ อนท$ ของตวละคร  ประกอบดวย  

 

 

 

 

   

 

ลางหมกปากกาท$ เขยนไวทNงหมด  

คดลอกตวละครแปะไปท$ ตาแหนงปจจบน  

กาหนดการเร$ มและการหยดวาดเสน  

ตNงคาสของปากกา  

กาหนดคาความเขมของสปากกา  

กาหนดขนาดของหวปากกาท$ จะใชเขยน  

Page 12: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 10  

5.  หมวดขอมล  มการเกบขอมลและการเรยกใชขอมล  ม  2  รปแบบ  ประกอบดวย  

   

 

 

 

 

   

 

 

1.  การสรางตวแปร  คอตวเกบคาท$ เราสามารถเรยกมาใชไดตลอด  สมมตเราสรางตวแปรช$ อ  x  

   

 

 

 

 

เลอกใหตวแปรใหปรากฏอยในหนาจอหรอไม  

กาหนดคาใหตวแปร  

เปล$ ยนคาใหตวแปรตามปรมาณท$ กาหนด  

ทาการแสดงตวแปรบนหนาจอ  (โปรแกรมเขยนผด)  

ทาการซอนตวแปรออกจากหนาจอ  

Page 13: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 11  

 

 

2.  การสรางรายการ  ใชสาหรบการตองการเกบคาหลายๆคาเปนลาดบ  สมมตใหช$ อรายการ  L  

   

 

 

 

 

   

 

ใหรายการปรากฏอยบนหนาจอหรอไม  

เพ$ มคาเขาไปในรายการ  

ลบคาในลาดบท$ กาหนดออกจากรายการ  

แทรกคาเขาไปตาแหนงท$ กาหนดในรายการ  

แทนท$ ตาแหนงท$ กาหนดดวยคาท$ ตองการ  

เรยกดคาตางๆของรายการ  หรอตรวจสอบวา

รายการประกอบดวยคาท$ กาหนดหรอไม  

แสดงรายการบนหนาจอ  

ซอนรายการออกจากหนาจอ  (โปรแกรมเขยนผด)  

Page 14: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 12  

 

 

6.  หมวดเหตการณ  เปนหมวดท$ เก$ ยวของกบการกระทาเม$ อมเหตการณตามท$ กาหนด  ประกอบดวย  

 

 

 

 

 

 

 

เม$ อผเลนคลกท$ ธงเขยวจะทาตามคาส$ งท$ กาหนด  

เม$ อผเลนกดปมท$ เราตNงไวจะทาตามคาส$ งท$ กาหนด  

เม$ อผเลนคลกท$ ตวละครจะทาตามคาส$ งท$ กาหนด  

เม$ อฉากหลงเปล$ ยนเปนฉากท$ ตNงไวจะทาตามคาส$ ง

ท$ กาหนด  

เม$ อระดบความดงของเสยง  จบเวลา  หรอ  วดโอ

มากกวาท$ เราตNงไวจะทาตามคาส$ งท$ กาหนด  

เปนการส$ งงานแบบกระจายและรบขอความแบบ

ลบๆใหตวละครสามารถสงซกกนไดตามเรากาหนด  

Page 15: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 13  

7.  หมวดควบคม  ชวยกาหนดการไหลของคาส$ งใหทาคาส$ งใดตอนไหน  ทาซNา  หรอ  ไมทาเม$ อไหร  ประกอบดวย    

   

 

 

 

 

 

 

รอตามระยะเวลาท$ กาหนด  

ทาคาส$ งภายใน  Block  วนตามจานวนรอบท$ กาหนด  

ทาคาส$ งภายใน  Block  วนไปเร$ อยๆจนโปรแกรมหยด  

ทาคาส$ งภายใน  Block  ถาเง$อนไข

ในกลองหกเหล$ ยมเปนจรง  

ถาเง$อนไขในกลองหกเหล$ ยมเปนจรงใหทาคาส$ งหลง  

”แลว”  ถาเปนเทจใหทาคาส$ งหลง  ”มฉะนNน”  

จะทาคาส$ งหลงจากรอจนกระท$ งเง$อนไขในกลองหก

เหล$ ยมเปนจรง  

ทาคาส$ งภายใน  Block  วนไปเร$ อยๆจนกระท$ งเง$อนไข

ในกลองหกเหล$ ยมเปนจรง  

เลอกใหหยดการกระทา  ทNงหมด  หรอ  ชดสครปตนN  หรอ  

ชดสครปตอ$ นของตวละคร  

เปนชดคาส$ งเก$ ยวกบการโคลนตวละคร  สามารถตNงคา

เม$ อเกดการโคลนตวละครตวนNใหม  สามารถสรางตว

ละครโคลนตวใดกได  และสามารถลบตวละครตว

ปจจบนได  

Page 16: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 14  

 

 

 

8.  หมวดกาลงรบร  คาส$ งในหมวดนNจะเปนเง$ อนไขและคาแสดงการรบรตางๆของตวละคร  ประกอบดวย    

 

 

เง$ อนไขการรบรของตวละครท$ ไปสมผสส$ งตางๆ  ไดแก  ตวชN

เมาส  ขอบจอ  ตวละครอ$ น  หรอสตางๆตามท$ เรากาหนด  และ

สามารถกาหนดเง$อนไขการรบรการสมผสระหวางสหน$ งกบ

อกสหน$ ง  และสามารถบอกคาระยะหางของตวละครกบตวชN

เมาสหรอ  ระหวางตวละครสองตว  

สามารถถามคาถามรบขอมลจากผเลนได  และใชสวน  

“คาตอบ”  เพ$ อนาคาตอบของผเลนไปใชงานตอ  

เปนเง$อนไขเม$ อปมคยท$ เลอกถกกด  หรอเมาสถกกด  

ดคาตาแหนงแกน  x  และแกน  y  ของเมาส  

บอกคาระดบความดง  

บอกคาการเคล$ อนไหวของภาพในวดโอ  บนตวละครหรอบนฉาก  

เปด  ปด  หรอ  เปดวดโอแบบกลบขางซายขวา  

ปรบคาความโปรงใสเปนคาตามเปอรเซนตท$ กาหนด  

แสดงคาเวลาท$ ผานไป  และสามารถจบเวลาใหมได  

บอกคาท$ เราตองการของตวละครหรอฉาก  

บอกเวลาเปนหนวยตางๆท$ ตองการ  

บอกจานวนวนตNงแตป  ค.ศ.  2000  

บอก  username  ของผใชปจจบน  

Page 17: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 15  

 

 

 

 

 

9.  หมวดโอเปอรเรเตอร  ใชสาหรบการดาเนนการทางคณตศาสตร  ตรรกศาสตร  และดาเนนการกบขอความ  ประกอบดวย    

   

 

 

 

 

ดาเนนการทางคณตศาสตร  โดยใสคาไปทNงสองฝ$ ง  

เลอกตวดาเนนการเปนบวก  ลบ  คณ  หรอ  หาร  

สมคาจากชวงคาท$ เรากาหนด  

เปรยบเทยบคาสองคาท$ ใสเขาไปวา  นอยกวากน  

เทากน  หรอมากกวากน  

เง$อนไขความจรงของตรรกะ  และ  หรอ  ไม  กบ  ประโยค

ท$ แสดงความความจรงท$ กาหนด  

แสดงคาจากการดาเนนการขอความ  ม  3  แบบ  ไดแก  

การเช$ อมขอความ  การเลอกตวอกษรลาดบท$ กาหนด

จากขอความ  และการแสดงคาความยาวของขอความ  

แสดงคาเศษจากการหารคาสองคา  และการแสดงคา

จากการปดเศษขNนหรอลงของตวเลขท$ กาหนด  

แสดงคาการดาเนนการทางคณตศาสตรท$ เลอกกบ

ตวเลขทางขวา  

Page 18: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 16  

 

 

 

 

10.   หมวด  More  Blocks  ใชสราง  Block  คาส$ งเพ$ มเตม  และเพ$ มสวนขยาย  

 1.   สวน  Make  a  Block  คอการสราง  Block  คาส$ งใหมท$ เราตองการ  โดยการสรางชด  Block  คาส$ ง  ชวยใหไฟลโปรแกรมมขนาดเลกลง  และ

เม$ อตองการใช  Block  คาส$ งใหม  จากตรงไหนของโปรแกรม  เรา

สามารถเรยกไดเลยโดยไมตองลาก  Block  คาส$ งยอยๆมาสราง  

หนาตาการสราง  Block  คาส$ งใหม  ประกอบดวย    

 

1.   สวนการสรางหนาตา  Block  ใหม  

   

Page 19: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 17  

 

  ตวอยาง  การสราง  Block  สาหรบการหาคาเลขยกกาลง  (power)  

   

2.   สวนของการประกอบคาส$ งเพ$ อใชงานตามท$ เราตองการ  ตวอยาง  ชดคาส$ งสาหรบการยกกาลง  n1  ดวยเลขชNกาลง  n2  

แลวเกบผลลพธไวท$ ตวแปร  x  เร$ มชดคาส$ งโดย  กาหนดคาเร$ มตน

ของตวแปร  x  เปน  1  แลวทาซNาคณคา  n1  จานวน  n2  รอบ  ทก

ครNงท$ คณ  จะเกบผลไวท$ ตวแปร  x  

 

  วธการเรยกใชกสามารถเรยกโดยใสคาตวเลข  2  ตว  เปนเลขฐาน

และเลขชNกาลง    

 

Page 20: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 18  

  ตวอยางเปน  3  ยกกาลง  3  สวนคาตอบจะอยในตวแปร  x  ดงนNน  

หลงจากท$ กาหนดคาส$ งใหตวละครพดคา  x  ออกมาเปนเวลา  2  

วนาท  จะได  

 

 

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

   

 

 

Page 21: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 19  

ตวอยางชดคาส$ งของ  PicoBoard  มเซนเซอรและปมกดอยท$ อปกรณ    

Block  คาส$ งของอปกรณนNกจะลอกบตวอปกรณ  มคาส$ งเม$ อเกดเหตการณ

ปมถกกด  ไดแก  A  B  C  และ  D  เช$ อมตอ  จะทาตามคาส$ งท$ กาหนด  หรอทา

การตรวจสอบเซนเซอรแสงหรอเสยงวามากกวาหรอนอยกวาคาท$ กาหนด  

ใหดาเนนการตออยางไร    

   

ตวอยาง  LEGO  WeDo  2.0  จะมมอเตอรเขามาเก$ ยวของกบระบบ  สามารถ

สรางโปรแกรมเพ$ อควบคมการทางานของมอเตอร  และตรวจสอบ

สถานภาพของมอเตอรได  

 

Page 22: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 20  

2.  Costumes             ตวละครหน$ งตวจะมลกษณะท$ แตกตางกนตามบรบท  ตวอยาง

แมวสมตวนN  ม  2  Costumes  สงเกตไดวาแมวสองตวนNเม$ อเราเรยกใช

สลบกนจะเปนเหมอนแมวกาลงเดนอย  Costumes  ในตวละครมประโยชน

ในการทาใหตวละครสามารถแสดงหนาตาทาทางหรอคาพดท$ ตางกนตาม

ฉากหรอบรบทท$ ตางกนตามท$ เรากาหนด  

 

   

 

 

 

Page 23: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 21  

  เราสามารถเพ$ มเตมลกษณะอ$ นเขาไปโดยเพ$ มเตม

ลกษณะจากตวละครเดม  ใหคลกขวาท$  Costume  ตวละครท$ เราตองการ  

แลวเลอก  “ทาซNา”  

   

  เราสามารถวาดเสนเพ$ มเตมตามท$ เราตองการดวย

เคร$ องมอสาเรจรปของ  Scratch  ในการทาใหตวละครม  Costume  ท$ เรา

ตองการ  ตวอยางการสราง  Costume  ของแมวสมใหมลกษณะมงม$ น  หรอ

โกรธมากขNน  อาจนาไปใชเม$ อตองตอส  

 

Page 24: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 22  

 

  กรณเปนตวละครตวอ$ นกจะมจานวน  Costume  ท$ โปรแกรมมให

ไมเทากน  และมลกษณะอารมณทาทางท$ นาไปใชไดแตกตางกน  ตวอยาง

เจาฉลามนอยตวนN  มถง  3  Costumes  ดวยทาทางและอารมณท$ ตางกน  

 

   

 

3.   เสยง       ในเมนเสยงของแตละตวละครจะมไมเหมอนกนขNนอยกบ

ลกษณะเฉพาะของตวละครนNน  

 

ตวอยาง  เสยงของกระด$ ง  Bells  

Page 25: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 23  

   

มไฟลเสยงท$ ช$ อวา  xylo1  ความยาวเกอบ  11  วนาท  

 ซ$ งเราจะใชคกบสครปตหมวดท$  3  หมวดเสยง      

 

 

  เราสามารถเพ$ มเสยงท$ ตองการเขามาใหมได  3  รปแบบ  ไดแก  เพ$ มเสยงจาก

ไฟลท$ มากบโปรแกรม  บนทกเสยงใหมเอง  และนามาจากไฟลเสยงท$ อยใน

เคร$ องเรา  

 

 

Page 26: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 24  

5.  Scripts  Area    

    สวนสาหรบใสสครปต  เราสามารถลาก  Block  จากสวน  Block  Palette  

มาประกอบกนใสในสวน  Scripts  Area  นN  เพ$ อทาใหตวละครและฉากทางาน

ตามท$ เราตองการ  

 

6.  Tip  box       เปนสวนชวยใหผใชใหมสามารถเร$ มเรยนรความสามารถของโปรแกรม  

Scratch  ไดอยางงายเปนขNนตอน  แบงตามหมวดหมไวเรยกใชงานไดงาย  และ

มตวอยางเกมส  เร$ องราว  แอนเมช$น  และวดโอเพลง  ไวใหผใชสามารถทาตาม

เพ$ อเกดความคดสรางสรรคตอยอดได  ซ$ งถงแมวาจะเปนผใชงานไประยะหน$ ง

แลวแตหลงลมบางการใชงานโปรแกรมกสามารถเลอกดสวนท$ ตองการได

สะดวกจากตวเลอกท$ มใหเหลานN  

 

Page 27: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 25  

 

 

ภาพหนาตา  Tip  

Box  ทNง  3  สวน  

 

   

Page 28: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 26  

การกาหนดคาส1 งใหกบเหตการณ  

  ในชวตประจาวน  เรามการตNงโปรแกรมตวเองในการตอบโตกบส$ งรอบขางท$

แตกตางกนโดยไมรตว  เชน  การท$ เราโดนแดด  เรานามอหรอส$ งของขNนมาบงทศทางท$

แดดสอง  เราเจอคนพดเสยงดงใส  เรารสกตกใจ  และพยายามเดนออกจากบรเวณนNน  

หรอนกกฬาว$ งแขง  400  เมตร  ท$ อยในทาเตรยมพรอม  พอไดยนเสยงสญญาณเร$ มว$ ง  

นกกฬาจงเร$ มออกตวว$ ง  เปนตน  

ในการสรางโปรแกรม  เราจะตองเจอกบเหตการณหลายอยางท$ แตกตางกนจาก

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

แบบไหนใหทาอะไร    

  ตวอยาง  การสรางเหตการณเม$ อตองการควบคมตวละครใหไปตามทศทาง  

ซาย  ขวา  บน  ลาง  โดยการกดปมลกศรทศทาง  

   

Page 29: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 27  

  โดยในโปรแกรม  Scratch  มเหตการณใหเราเลอกใชไดหลายแบบ  ไดแก  

1.   เม$ อธงเขยวถกคลก  2.   เม$ อปมคยท$ เรากาหนดถกกด  3.   เม$ อตวละครท$ เราใสสครปตไวถกกด  4.   เม$ อฉากหลงเราถกเปล$ ยนเปนฉากหลงท$ กาหนด  5.   เม$ อความดง  ระยะเวลา  หรอการเคล$ อนไหวของภาพในวดโอท$ กาลงจบอยมคามากกวาท$ กาหนด  

6.   เม$ อตวละครท$ เราเลอกไดรบขอความท$ กาหนด  

 

1.   เม& อธงเขยวถกคลก      

   

โปรแกรมจะทางานเม$ อธงเขยวบรเวณดานบนขวาของฉากถกคลก  

 

 

 

 

 

 

 

 

  ตวอยางการใชงาน  เม$ อคลกท$ ธงเขยว  ใหเคร$ องบนบนผาน  

Page 30: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 28  

   

  เราจะใสสครปตนNไวท$ เคร$ องบน  

 

 

   

2.   เม& อปมคยท& เรากาหนดถกกด  

 

Page 31: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 29  

โดยเราสามารถเลอกปมคยไดหลายปม  ไดแก  ลกศรทNงส$ ทศทาง  พNนท$

วาง  (spacebar)  ตวอกษรภาษาองกฤษทNง  26  ตว  (A  -  Z)  ตวเลข  0-9  และ

การคลกท$ ปมใดกได    

  ตวอยาง  เม$ อกด  spacebar  (พNนท$ วาง)  ใหเลนเสยงเคร$ องดนตร  และแสดง

ขอความวา  “โดนเคาะ”  

   

      โดยการใสสครปตตามนN  

 

     

อกหน$ งตวอยาง  เปนตวอกษร  A    

Page 32: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 30  

 

 

    เม$ อเรากดท$ ปม  ‘a’  บน  keyboard  ตวอกษรจะตวใหญขNน  

 

 

    ดวยสครปตนN  

 

 

3.   เม& อตวละครท& เราใสสครปตไวถกกด  

 

Page 33: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 31  

    การใชเมาสเพ$ อคลกไปท$ สวนตางๆของฉาก  โดยเฉพาะเกมสท$

ตองใชเมาสเปนส$ งหลกในการเลน  จะตองใช  Block  เหตการณนNอยาง

แนนอน  

 

    ตวอยาง  เม$ อเจาแมวสมตวนNถกคลก  จะแสดงผลออกมาวาถกคลก  

 

 

    ดวยสครปตหนาตาแบบนN  

 

 

    อกหน$ งตวอยาง  เปนผชายช$ อ  Calvrett  กาลงน$ งอย    

Page 34: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 32  

 

    เม$ อถกคลก  ทาการเปล$ ยนทาและแสดงคาพด  

 

    ดวยสครปตดงนN  

 

4.   เม& อฉากหลงเราถกเปล&ยนเปนฉากหลงท& กาหนด  

Page 35: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 33  

 

บางครNงในการเลาเร$ องราว  หรอ  สรางเกมส  การเปล$ ยนฉากเพ$ อใหผใชร

วาเรากาลงอยในฉากท$ จะมวธการใชหรอเร$ องราวท$ แตกตางกน  เชน  เม$ อ

ฉากเปล$ ยนเปนทะเล  ใหเร$ มเลนเสยงคล$ น  หรอเม$ อฉากอยในสนามรบ  ใหม

ทหารคอยๆเดนเขามาในฉาก  เปนตน  

 

ตวอยาง  มเคร$ องบน  กบผหญงช$ อ  Abby  

   

เม$ อคลกท$ เคร$ องบน  จะทาใหฉากหลงเปล$ ยนเปนทะเลทราย  (gravel  

desert)  แลวเม$ อฉากหลงเปล$ ยน  Abby  จะเปล$ ยนชดเปน  ชด  b  

Page 36: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 34  

   

เรามาดสครปตของเคร$ องบน  และสครปตของ  Abby  กน  

 

สครปตของเคร$ องบน  

 

สครปตของ  Abby  

5.   เม& อความดง  ระยะเวลา  หรอการเคล&อนไหวของภาพในวดโอท& กาลงจบอยมคามากกวาท& กาหนด    

Page 37: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 35  

   

เราสามารถใชการตรวจสอบสามส$ งนNเพ$ อ  เพ$ อโปรแกรมจะเปล$ ยน

สถานะหรอทางานบางอยางใหสอดคลองกบส$ งท$ เปล$ ยนแปลง  

 

ตวอยาง  เราจะจบเวลา  10  วนาท  เม$ อถง  10  วนาทใหแมวสมกลบหว    

   

โดยมตวชวยนบเวลาใหเราเหนโดยต� กท$ สวนจบเวลาในหมวดการรบร  

   

 

และสครปตท$ ใสไปในตวแมว  

Page 38: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 36  

   

จะไดแมวตลงกา  หลงจากผานไป  10  วนาท  

     

6.   เม& อตวละครท& เราเลอกไดรบขอความท& กาหนด  

การสงสารระหวางตวละครหรอส$ งของบางอยางจะทาใหเม$ อตว

ละครตวหน$ งทาอะไรบางอยางแลวตองการใหตวละครอกตวหรอส$ งของ

บางอยางทางานตอเน$ องจากการกระทาของตวละครตวนNน  เราสามารถใช

การกระจายขอความชวยใหตวละครตวอ$ นรบรถงคาส$ งจากตวละครนN  

 

 

ตวอยาง  มรถทาความสะอาดถนนคนใหญ  กบลกศรชNไปทางขวา  

Page 39: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 37  

 

เม$ อคลกท$ ลกศร  รถจะเคล$ อนไปทางขวา  

 

โดยเราใสสครปตท$ มการคยกนไดของสองตวละครนN    

ท$ ลกศร  เราจะใสสครปตนN        และท$ รถเราจะใสครปตนN  

               

   

Page 40: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 38  

การกาหนดตวแปรและการคานวณ  

  เราสามารถเกบขอมลตวเลขและตวอกษรบรรจใสส$ งท$ เรยกวาตวแปร  และ

สามารถใชการคานวณทางคณตศาสตรเพ$ อใชหาผลลพธในบางสวนของโปรแกรม  

การสรางตวแปร  

คลกท$ สรางตวแปร  และใสช$ อตวอยาง  ช$ อ  score  และเลอกสาหรบตวละคร

ทNงหมด  

 

กดเชคท$ กลองส$ เหล$ ยมหนา  Number  เพ$ อให  ตวเลขท$ สมมาอยบนหนาจอ

สาหรบดผลท$ เกดขNน  

 

  ม  Block  ตวเลอกในการดาเนนการเก$ ยวกบตวแปรตามนN  

 

  ใชในการใสคาใหกบตวแปรได  โดยคาเร$ มตนกรณเรายงไมไดใสจะเปน  0  

 

Page 41: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 39  

  ใชเพ$ อเปล$ ยนคาของตวแปรเพ$ มตามจานวนท$ กาหนดดานหลง  เชน  เรา

สามารถใชในการเพ$ มแตมในเกมสได  เปนตน  

 

 

  Block  นNควรจะเปนคาวา  “แสดงตวแปร”  แตเขาใจวาคนแปรจากภาษาองกฤษ

มาผด  ใชสาหรบแสดงตวแปรนNทางหนาจอ  

 

 

  สวน  Block  นNคอการ  “ซอนตวแปร”  จรงๆ  ใชซอนตวแปรออกจากหนาจอ  

 

  ตวอยางการใชตวแปรเปนสวนหน$ งในการสรางเกม  เกมท$ เราจะสรางเปนเกม

บอกวาตวเลขท$ สมมาไดมคานอยหรอมาก  โดย  แสดงคาวา  High  หาก  เลขอยในชวง  

4  ถง  6  และแสดงคา  Low  หากเลขท$ ไดอยในชวง  1  ถง  3  เราจะเร$ มโปรแกรมสมโดย

คลกท$ ปมสฟา  

 

Page 42: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 40  

 

 

      การนาตวแปรไปใสไวในสครปตจดตางๆของโปรแกรม  เร$ มตNงแตสวนปมสฟา  

จะเปนการกาหนดคาจากการสมใสไวในตวแปร  Number  

 

 

 

Page 43: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 41  

สวนปายบอก  High  และ  Low  จะนาคาจากตวแปร  Number  มาตรวจสอบ  

         

 

การคานวณ  

  ในการสรางโปรแกรมหรอเกมส  เราจะมการคานวณในบางสวน  เราใช

คอมพวเตอรในการคานวณใหเราไดเลย  การคานวณทางคณตศาสตรและ

ตรรกศาสตรในโปรแกรม  Scratch  มใหเลอกหลายตว  ไดแก  

1.  การคานวณพTนฐาน  

การคานวณพNนฐานอยางบวก  ลบ  คณ  หรอ  หาร  

 

  โดยในชองวงกลมสขาวเราสามารถพมพตวเลขใสเขาไป  หรอ  Block  ท$ เปน

ตวเลข  ตวแปร  หรอการคานวณใสเขาไปไดเชนกน    

High   Low  

Page 44: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 42  

  ตวอยาง  การนา  Block  ตวแปร  การคานวณ  และการพมพตวเลข  ใสเขาไปใน  

Block  การคานวณการบวก  

 

   

  2.  การสมตวเลข    

    เราจะใชการสมตวเลขสวนมากในการสรางเกมส  

 

    จาก  Block  ตวอยางดานบน  เราสามารถเลอกสมตวเลขจาก  1  ถง  10  

จรงๆเราสามารถแกไขตวเลขตรงนNได  เชน  การสมเลข  1  ถง  100  เปนตน  

 

3.  การเปรยบเทยบทางคณตศาสตร  

  เราใชการเปรยบเทยบทางคณตศาสตรกบสวนท$ เปนเง$ อนไข  เพ$ อ

ตดสนใจวาโปรแกรมจะทางานสวนใดตอ  

 

  ตวอยางการนาไปใชกบสวนการตดสนใจของโปรแกรม  หรอสวนท$ มชอง

ใหใสกลอง  6  เหล$ ยม  

Page 45: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 43  

   

 

   

4.  การดาเนนการทางตรรกศาสตร  

 

  สวนของการตดสนใจบางครNงเราจะใชการเปรยบเทยบหลายชดรวมกน

ในการตดสนใจทาหรอไมทาชดคาส$ ง  การดาเนนการทางตรรกศาสตรจะชวย

ใหการตดสนใจนNนครบถวนมากขNน  ตวอยางการตดสนใจในชวตประจาวน  

เชน    

ถาฝนตก  และ  แดดออก  จะเกดรงกนนNา  กรณนNเง$ อนไขของเหตการณคอ  

“ฝนตก  และ  แดดออก”  ซ$ งขNนดวย  “และ”  ถาฝนไมตก  หรอ  แดดไมออก  อยาง

ใดอยางหน$ ง  กจะไมเกดรงกนนNา    

ถาฝนตกจนนNาขง  หรอ  มอบตเหตรถชน  รถจะตด  กรณนNเง$ อนไขของ

เหตการณ  คอ  “ฝนตกจนนNาขง  หรอ  มอบตเหตรถชน”  แตขNนดวย  “หรอ”  

ดงนNน  ไมวาฝนตกจนนNาขง  หรอมอบตเหตรถชน  อยางใดอยางหน$ ง  กจะทาให

รถตด  

Page 46: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 44  

  สวน  “ไม”  เปนการทาใหคาความจรงเปนเทจ  และคาความเทจเปนจรง  

ตรงขามกน  

 

  ตวอยางโปรแกรม  การใชตรรกศาสตรเขามาเก$ ยวของ  

 

 

 

 

  ตามสครปตนN  มเง$ อนไขเก$ ยวกบตาแหนงของตวละคร  ตองเปนจรงทNง

ตาแหนง  x  และ  ตาแหนง  y  ถาอยในเง$ อนไขแมวจะเคล$ อนท$ ไปดานหลง  100  

กาว  

Page 47: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 45  

 

 

จะไดผลลพธดงนN  

   

 

 

5.  การดาเนนการกบขอความ  

  การสรางเร$ องราว  เกมส  หรอแอนเมช$น  ท$ มการพดคย  หรอส$ อสารให

ผใชงานเขาใจ  จาเปนตองอาศยขอความท$ หลากหลายและยดหยน  Scratch  

จงม  Block  คาส$ งพNนฐานใหกบผสรางโปรแกรมเลอกใชงานไดอยางงายตาม

ความตองการ  ไดแก  

Page 48: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 46  

1.  การเช$ อมขอความ  2.  การเลอกดตวอกษรของคาโดยการใชตาแหนงในการเลอก  3.  การบอกคาความยาวของขอความ    

   

 

1.  การเช&อมขอความ  เราสามารถเช$ อมขอความสองขอความโดยอาศย  Block  คาส$ งนN  

   

 

 

ตวอยางการใชควบคกบการรบช$ อจากผใชมาแสดงคาทกทาย  

Page 49: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 47  

   

   

    สครปตท$ ใช  

 

 

Page 50: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 48  

2.  การเลอกดตวอกษรของขอความโดยการใชตาแหนงในการเลอก  เราสามารถใชงานโดยใสสครปต  และตวเลขแสดงตาแหนง  

 

   

จากตวอยาง  ตวอกษรตวท$  2  ของคาวา  “English”  กจะไดตว  ‘n’  

 

3.  การบอกคาความยาวของขอความ  ตวอยางเม$ อใชสครปตนNเพ$ อบอกคาความยาวของคาวา  “Thailand”  

กจะไดผลออกมาเปน  8  ซ$ งกคอจานวนตวอกษรของขอความ    

 

   

หลายครNงเราอาจจะใชการไลดตวอกษรในคาคกบความยาว  

 

 

 

 

ตวอยาง  รบช$ อเขาไปแลวใหแสดงตวอกษรทละตวท$ อยในช$ อ  

Page 51: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 49  

   

เม$ อใสช$ อ  CDG  เขาไป  แมวจะพดออกมาเปนตวอกษรทละตวโดย  

count  กจะเพ$ มขNนเร$ อยๆตNงแต  1  ตามจานวนตวอกษรของคา  

   

 

Page 52: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 50  

    สวนหนาตาของสครปตจะยงมสวนท$ ไมคนเคยอยบาง  เราจะไดเรยนร

กนตอในหวขอตอไป  

   

 

  มาดตวอยางการประยกตใชการดาเนนการทางคณตศาสตรมาคานวณการหา

ดานตรงขามมมฉากของพทาโกรส  และนาการดาเนนการขอความมาประกอบการใช

งาน  

 

  เร$ มจากการวาดสามเหล$ ยมมมฉาก  นาตวแปรไปวางรอเกบคาจากผใช  และนา

เจาแมวสมไปคอยบอกคาดานตรงขามมมฉากจากการคานวณ  

Page 53: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 51  

 

    ใสสครปตใหกบตวแมวเม$ อคลกธงเขยวใหเร$ มทางานโดยรบคาความ

ยาวดาน  a  และ  ความยาวดาน  b  เพ$ อนามาคานวณ  

 

Page 54: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 52  

 

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

 

 

  น$ คอสครปตท$ ใชในโปรแกรม  เนนประยกตใชความรท$ ผานมา  

 

   

Page 55: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 53  

การสรางเง1อนไขและการวนซfา  

การสรางเง$ อนไข  

  ในชวตประจาวนเราสรางเง$ อนไขใหกบการกระทาบางอยางแบบไมรตว  เชน  

เราตNงเง$ อนไขของวนหยด  กบวนธรรมดา  เปนเหตการณท$ สงผลตอการกระทาท$

ตางกน  โดยรปแบบเง$ อนไขของการสรางโปรแกรมม  2  รปแบบ  ไดแก  “ถา..  แลว..  ม

ฉะนNน..”  และ  “ถา..  แลว..”  ซ$ งแบบแรกจะเปนการบอกวาถาเง$ อนไขดงกลาวเปนจรง  

จะมการกระทาบางอยาง  แตถาไมตรงตามเง$ อนไขนNน  จะกระทาอกแบบหน$ ง  แตแบบ

ท$ สองจะกระทาบางอยางเม$ อเง$ อนไขเปนจรงเทานNน  ถาไมเปนจรงจะไมมการกระทา

อะไรท$ เกดขNนตอ  

ตวอยาง  รปแบบเง$ อนไข  “ถา..  แลว..  มฉะนNน..”  

-  ถาวนนNเปนวนหยด  แลวฉนจะไปเท$ ยว  มฉะนNนฉนจะไปโรงเรยน  

-  ถาวนนNเปนวนพระ  แลวฉนจะออกไปใสบาตร  มฉะนNนฉนจะนอนตอ  

  ตวอยาง  รปแบบเง$ อนไข  “ถา..  แลว..”  

-  ถาชวงนNเปนฤดฝน  แลวฉนจะพกรมออกจากบาน  

-  ถาฝนไมตกเยนวนองคาร  แลวฉนจะซกผา  

  สาหรบโปรแกรมของเราจะมคาส$ งท$ เปนรปแบบคลายกบเร$ องราวท$ ยกให

ดานบน  ดงนN  

1.   ถา..  แลว..  

 

Page 56: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 54  

 

ตวอยางการใชงาน  

   

เม$ อรนสครปตนN  โปรแกรมจะใหเราใสคาคะแนนลงไป  

 

 จากนNนเจาแมวจะตอบกลบมาวาคณได  A  ถาคะแนนคณมากกวา  79  

Page 57: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 55  

 แตถาคะแนนท$ คณใสไปไมมากกวา  79  หละ  ส$ งท$ แมวจะทาคอ  

 อยน$ งๆ  ไมพดอะไร  เพราะเง$ อนไขไมเปนจรง  

   

2.   ถา..  แลว..  มฉะนNน..    

 

Page 58: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 56  

เรามาประยกตเพ$ มเตมจากตวอยางกอนหนานN  เม$ อแมวรบคาคะแนนไป

แลวแตคะแนนกลบไมมากกวา  79  เราอยากใหแมวทาอยางอ$ น  เชน  บอกวา

เราไมได  A  นะ  เปนตน  เราจะใชเง$ อนไขแบบ  “ถา..  แลว..  มฉะนNน”  

  ลองดตวอยางสครปตนN  เราไดเปล$ ยนจากเง$ อนไขแบบ  “ถา..  แลว

..”  เปน  “ถา..  แลว..  มฉะนNน..”  

 

  จะทาใหเม$ อเราใสคะแนนท$ ไมมากกวา  79  เขาไป  จะไดผลลพธ

บอกกลบมาวาเราไมได  A  แทนท$ จะเงยบๆไป  

 

Page 59: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 57  

  มากไปกวานNน  เราสามารถเพ$ มกรณท$ มากขNนกวาเดมไดโดยใช

เง$ อนไข  “ถา..  แลว..  มฉะนNน..”  ซอนกนเขาไป  

 

  ตวอยางการสรางโปรแกรมตดเกรด  ใหสามารถบอกไดทกเกรด

ของการเรยน  

 

 

Page 60: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 58  

  ทาใหเม$ อเราใสคะแนนเทาไหรกตามเรากจะสามารถรไดวาเราได

เกรดเทาไหร  

 

 

 

Page 61: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 59  

การวนซNา  

  การวนซNาเปนเร$ องท$ คอมพวเตอรสามารถทาไดดกวามนษย  ชวยทนแรง

ไดเยอะ  เพราะคอมพวเตอรถนดในการทางานซNาๆท$ เราตNงคาส$ งเอาไวโดยไม

เหน$ อย  รวดเรวเปนหลกมลลวนาท  และท$ สาคญคอมความแมนยามากเพราะ

คอมพวเตอรมปจจยท$ มารบกวนนอย  เราเลยเลอกใชคอมพวเตอรในการ

ทางานแทนเราในบางครNงท$ เราตองทาอะไรซNาๆเปนจานวนมากๆๆๆ  เชน  การ

คานวณเลขจานวนมากซNาๆ  การหาคารากท$ สองของจานวนจรงท$ ไมลงตว  การ

คณเลขจานวนหลายหลกหลายๆครNง  หรอการแสดงผลซNาๆกนหลายพนครNง  

เปนตน  

  Block  สาหรบการวนซNาในโปรแกรม  Scratch  ม  3  รปแบบ  ไดแก  

1.  การวนซNาตามจานวนรอบท$ กาหนด  

   

2.  การวนซNาไปเร$ อยๆไมรจบ  

   

3.  การวนซNาจนกระท$ งเปนไปตามเง$ อนไขท$ กาหนด  

 

   

Page 62: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 60  

1.  การวนซT าตามจานวนรอบท& กาหนด  ใชกบโปรแกรมท$ สามารถกาหนดจานวนรอบไดเปนตวเลข  

 

ตวอยาง  โปรแกรมการแสดงดาวตามจานวนท$ กาหนด  

 

เร$ มจากการนาดาวมาใสไวดานบนตรงกลาง    

   

  ตามดวยตวแปรเกบจานวนดาวท$ จะกระจายออกมา  และตวแปร

เกบตาแหนง  x  ท$ เปล$ ยนไป    

   

  เราจะนาสองสครปตนNใสไวท$ ดาว  เพ$ อทาใหดาวกระจายออกมา

ตามจานวนท$ ใสเขาไป  

Page 63: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 61  

   

  เม$ อเร$ มโปรแกรมดวยการคลกท$ ธงเขยว  โปรแกรมจะใหใสจานวน

ดาวเขาไป    

   

  เราจะไดดาวกระจายตวออกมาจานวน  4  ดวง  

Page 64: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 62  

   

  กรณท$ เราใสจานวนดาวไป  10  ดวง  ดาวกจะกระจายออกมา  10  

ดวง  

 

Page 65: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 63  

  เม$ อเปล$ ยนจานวนดาวเปน  50  ดาว  และเปล$ ยนตาแหนง  x  ให

เพ$ มขNนทละ  10  จะไดดาวกระจายเรยงกนออกมามากมายตอเน$ องกน  

ซ$ งถาเราคอยๆกาหนดดาวทละดวงใหกระจายออกมาเปนชดลกษณะนN

ทละดวงคงเสยเวลามาก  ลองจนตนาการวาเราจะทาใหดาวกระจาย

ออกมา  1  ลานดวงดส..  เราคงตองใชเวลาเปนปในการสรางมนถกไหม  

แตการเขยนโปรแกรมคอมพวเตอรชวยเราไดมากในการทาอะไรซNาๆๆๆ

กนในลกษณะนN  

   

2.  การวนซNาไปเร$ อยๆไมรจบ  เราลองมาทาดาวหมนๆไปเร$ อยๆไมรจบกน  โดยดาวจะเกดเพ$ มขNน

เร$ อยๆไมรจบเชนกน    

เร$ มจากนาดาวหน$ งดวงมาไวตรงกลางหนาจอ  

Page 66: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 64  

   

เราจะใสสครปต  3  กอนนNเขาไปในดาว  สงเกตไดวาทNง  3  ชดคาส$ งจะม

สวนของการวนซNาตลอด  อยในชดสครปต  เพ$ อใหบางสวนของสครปตได

ทางานตลอดเวลา  

Page 67: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 65  

   

  สวนแรกเปนสวนทาใหดาวตรงกลางเร$ มหมนโดยเปล$ ยนสไป

เร$ อยๆ  

     

Page 68: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 66  

  สวนท$ สองเปนสวนท$ ใชสรางดาวออกมาเร$ อยๆทกๆ  0.5  วนาท  

โดยทกครNงท$ มการสรางดาว  ใหเลนเสยง  pop  ออกมาดวย  แสดงวาทกครNง

ท$ เราไดยนเสยง  pop  แสดงวามดาวเกดขNน  

   

  สวนท$ สาม  เปนสวนท$ บอกใหดาวท$ ถกสรางขNนมาใหมเกดใน

ตาแหนงท$ ถกสมขNนมาและทาการหมนและเปล$ ยนสไปเร$ อยๆเหมอนดาว

ดวงแรก  

   

  เม$ อเวลาผานไปชวงหน$ ง  เราจะเหนดวงดาวระยบระยบกระจาย

อยบนหนาจอของเรามากมาย  

Page 69: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 67  

   

3.  การวนซNาจนกระท$ งเปนไปตามเง$ อนไขท$ กาหนด  

กอนหนานNเราสามารถวนซNาไดจนไมมท$ สNนสด  ซ$ งบางครNงเราอาจจะ

อยากใหการวนซNานNนวนไปไดเร$ อยๆแตกอยากใหหยดดวยในบางเง$ อนไข  

เราจะสามารถทาไดโดยใช  Block  “ทาซNาจน..”  

 

 

จากการสรางดาวหมนในตวอยางกอนหนาโดยการใช  Block  “วนซNา

ตลอด”  คราวนNลองมาใสเง$ อนไขการหยดใหกบการสรางดาว  การหมน  และ

การเปล$ ยนสของดาวกนดดกวา  

Page 70: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 68  

เราจะเปล$ ยน  Block  จาก  “วนซNาตลอด”  เปน  Block  “ทาซNาจน..”  กอน  

แลวใสเง$ อนไขเก$ ยวกบเวลาเขาไป  วาจะใหหยดเม$ อเวลาผานไปเทาไร  

โดยเง$ อนไขท$ เลอกใสไปในตวอยางนNจะเปนเร$ องของเวลา    คอ  เม$ อเวลา

ผานไปจานวนหน$ งตามการสมจะทาใหการหมนกบการเปล$ ยนสหยดลง  ซ$ ง

ดวยการสมเวลา  ทาใหเอฟเฟคของดาวหยดไมพรอมกน  สวนการสรางดาว

ใหมจะหยดสรางกอนท$ ดาวจะหยดหมนและเปล$ ยนส  

 

 

มาดสครปตกน..  

Page 71: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 69  

 

         

   

Page 72: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 70  

การออกแบบและสรางโปรแกรม  

  เราไดเรยนรบทเรยนการเขยนโปรแกรมกนมาเตมท$ แลว  ถงเวลาสรางสรรคโปร

เจคของตวเองกนเตมท$ !  แต..  กอนท$ เราจะเร$ มทา  มาลองศกษาขNนตอนกระบวนการ

สรางโปรเจค  ไดแก  

1.   สารวจ  (Explore)  2.  วางแผน  (Plan)  3.   พฒนา  (Develop)  4.  แบงปน  (Share)  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  เราลองมาดรายละเอยดของแตละขNนตอนกนดกวาวาในวงกลมแตละอน

นาสนใจอยางไร  

 

สารวจ  

 

   

 

 

พฒนา    

แบงปน  

 

วางแผน  

Page 73: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 71  

1.   สารวจ  (Explore)  กอนเร$ มขNนตอนของการพฒนาโปรแกรม  จากแผนภาพขางตน  จะเหน

ไดวาขNนตอนของการสารวจ  จะมาแยกจากขNนตอนอ$ นๆท$ วงเปนวนรอบ  

เพราะเราควรทราบกอนวาเราอยากท$ จะทาอะไรจรงๆ  เรามแรงบนดาลใจ

ในการแกไขปญหาอะไร  ส$ งเหลานNจะทาใหเราพฒนาโปรแกรมไดอยางเตม

ความสามารถ  โดยเรามขNนตอนการสารวจความสนใจดวยคาถามเหลานN    

a.   โปรเจคท$ เรยนรผานมาโปรเจคไหนท$ ชอบท$ สด  b.  มความสนใจในเร$ องใด  (เร$ องอะไรกไดในชวต)    c.   ส$ งใดบางท$ เราอยากจะใชโปรแกรมท$ เราจะพฒนาขNนในการแกปญหา    

d.  การพฒนาโปรแกรมแบบใดท$ ตอบโจทยการแกปญหาของเรา  เปนเกมส  เร$ องราว  แอนเมช$น  หรออ$ นๆ    

e.  อะไรเปนความถนด  หรอความสามารถพเศษของเรา  

คาถามดานบนใชสาหรบสารวจตวตนของเรา  เม$ อเราสารวจความ

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

ทม  แนนอนวาเราอาจจะถนดในบางอยาง  และไมถนดในบางอยางแตส$ งท$

เราสนใจ  อาจจะไมไดมแตเราเพยงคนเดยว  เราสามารถหาเพ$ อนรวมทมท$ ม

ความถนดตางจากเรา  เพ$ อมาชวยกนแกไขปญหาท$ สนใจรวมกนได  

หลงจากเราตอบคาถามดานบน  และหาเพ$ อนรวมทมไดแลว  ถงเวลา

คดถงโปรแกรมท$ เราจะรวมกนพฒนาขNนมา  

2.  วางแผน  (Plan)  ขNนตอนการวางแผน  เราจะไดคาตอบสาหรบ  4  คาถามนN  

a.   เราจะสรางโปรแกรมอะไร  b.  มขNนตอนอยางไรบางในการสรางโปรแกรมนN  

Page 74: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 72  

c.   ส$ งท$ เรามอยแลว  สาหรบโปรแกรมท$ เราจะสราง  เชน  ทม  ตวอยางโปรแกรม  ไฟลภาพ  เปนตน  

d.  ส$ งท$ เราตองการเพ$ มเตม  เพ$ อใชในการสรางโปรแกรม  

คาถามแรก  เราจะสรางโปรแกรมอะไร  

  วธท$ เราแนะนาในการการหาคาตอบของคาถามนN  เรยกวา  “การ

ระดมความคด  (Brainstorm)”  การระดมความคดมขNนตอน  ดงนN  

1.  ใหทกคนในทมเสนอไอเดยท$ อยากทาใหมากท$ สดเทาท$ เปนไปไดในเวลาท$ จากด  เชน  3  นาท  เปนตน  โดยอาจเขยนใส

กระดาษโพสอท  แลวพดออกมาวาไอเดยในการแกคออะไร

แลวแปะลงไปบนกระดาษหรอกระดานท$ เตรยมไว  

2.   ทมชวยกนจดกลมไอเดยท$ มความใกลเคยงกนเปนหมวดหม  3.   พดคยกนถงความนาสนใจ  และความเปนไปไดของแตละไอเดย  

4.  แตละคนเลอกไอเดยท$ ชอบ  3  อนดบในใจ  และเขยนอนดบของตนเองลงใสโพสอทไอเดยท$ เลอกเปนคะแนน  1-3  โดย  3  

คะแนน  คอไอเดยท$ ชอบท$ สด  

5.  รวมคะแนนแตละไอเดยและจดอนดบไอเดยท$ มคะแนนมากท$ สดไปหานอยท$ สด  

6.   ชวยกนเลอกไอเดยท$ ทกคนชอบมากท$ สดอาจจะ  3-5  อนดบแรก  โดยพดคยถงเหตผลในการเลอกของแตละคน  ซ$ งผล

สดทายอาจจะไดขอสรป  คอ  การเลอกอนดบท$  3  กเปนได  

 

Page 75: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 73  

 

 

 

คาถามท$ เหลอ    

-  มขTนตอนอยางไรบางในการสรางโปรแกรมนT  ส& งท& เรามอยแลว    -  สาหรบโปรแกรมท& เราจะสราง  เชน  ทม  ตวอยางโปรแกรม  ไฟลภาพ  เปนตน    

-  ส& งท& เราตองการเพ& มเตม  เพ& อใชในการสรางโปรแกรม  

  หลงจากไดไอเดยออกมาแลววาจะทาอะไร  ขNนตอนนN  เราจะมา

ชวยกนในทมลองเขยนขNนตอนการสรางโปรแกรมดวา  เราจะทา

อะไรบางเปนลาดบ  เพ$ อดวาแตละขNนตอนเราตองการอะไรบาง  ส$ งใดม

อยแลว  ส$ งใดตองทาเพ$ ม  เรามแบบฟอรมในการเขยนใหตามเอกสาร

หนาถดไปนN  

Page 76: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 74  

   

Page 77: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 75  

ช1 อโปรแกรม  ...................................................................................................................................................................................             ลองเขยนภาพคราวๆของการดาเนนของโปรแกรมเราดานลางนN  และเขยนดานลางของหนาจอวาในแตละขNนตอนอาศยส$ งใดบางท$

ใชในหนานNน  

   

อธบายส$ งท$ จะเกดขNนในหนานN                  อธบายส$ งท$ จะเกดขNนในหนานN  

 

ส$ งท$ ตองใชในหนานN  เชน  ตวละคร  เสยง  ตวอยางโปรเจค  เปนตน            ส$ งท$ ตองใชในหนานN  เชน  ตวละคร  เสยง  ตวอยางโปรเจค  เปนตน  

 

   

อธบายส$ งท$ จะเกดขNนในหนานN                  อธบายส$ งท$ จะเกดขNนในหนานN  

 

ส$ งท$ ตองใชในหนานN  เชน  ตวละคร  เสยง  ตวอยางโปรเจค  เปนตน          ส$ งท$ ตองใชในหนานN  เชน  ตวละคร  เสยง    ตวอยางโปรเจค  เปนตน  

Page 78: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 76  

3.   พฒนา  (Develop)  ขNนตอนนNคอขNนตอนของการพฒนาโปรแกรม  ทกคนในทมจะมหนาท$ ท$

ตางกนในการพฒนา  ส$ งท$ แนะนาในขNนตอนนNคอ  ในทมควรกาหนดเวลาการ

มาอพเดทงานกนขNนอยกบเวลาวามมากหรอนอย  กรณเวลามทNงหมด  6  

ช$ วโมงในการทาโปรแกรม  ทมอาจจะมาอพเดทขอมลการทางานของสมาชก

ในทม  กนทกๆ  1  ช$ วโมง  เพ$ อนาปญหาท$ แตละคนเจอมาหาทางแกไขรวมกน  

หรอจดแบงหนาท$ กนใหมใหสาเรจตามเวลา    

คาถามแนะนาสาหรบการอพเดทการทางาน  

1.  อะไรเปนสวนท$ ชอบท$ สดในการทางานท$ ผานมา  2.   สวนใดท$ ยงตองทาตอไป  3.   สวนไหนท$ คนอ$ นในทมจะตองทาตอจากเรา  4.   สวนใดท$ ตองการความชวยเหลอจากคนอ$ นเพ$ อใหงานเราไปตอได    

4.  แบงปน  (Share)  

หลงจากท$ เราวางแผน  ออกแบบ  พฒนาไดถงระดบหน$ งแลว  เปนโอกาส

ดท$ เราจะแบงปนเร$ องราวการทางานของโปรแกรมเราใหกบคนอ$ นๆร  เพ$ อรบ

ความแนะนา  ตชม  (Feedback)  และรบฟงไอเดยการทางานของโปรแกรม

ของคนอ$ นเพ$ อชวยออกความเหนเพ$ อการพฒนาของเขาและไดรบมมมองท$

แตกตางสาหรบการพฒนาโปรแกรมของเราเชนกน  

คาถามสาหรบการใหความเหนกบโปรแกรมของคนอ$ น  

1.   ส$ งท$ ทางานไดดหรอส$ งท$ เราชอบมากในโปรแกรม  2.   ส$ งท$ ยงสบสนอยวาทางานอยางไร  แนะนาวาควรปรบเปนแบบใด  3.   ส$ งท$ ทาใหดขNนไดหรอส$ งท$ ไมควรอยในโปรแกรม  

Page 79: Code Their Dreams ป นโปรแกรมเมอร รุ นเยาว...จากโปรแกรม)การวาดเองโดยโปรแกรมการวาดส

 77  

หลงจากไดรบคาแนะนาตชมมาเรยบรอย  เราจะกลบไปท$ ขNนตอนของ

การวางแผน  (Plan)  พฒนาโปรแกรม  (Develop)  และกลบมาท$ แบงปน  

(Share)  ใหม  วนไปจนกระท$ งถงเวลาท$ จะแสดงใหคนอ$ นเหน  (Showcase)  

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

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

เปนผพฒนาโปรแกรม  และการท$ เราทาโปรแกรมมาไดถงขนาดนNกถอวาสด

ยอดมากๆแลว    

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

ส$ งท$ เราไดสรางสรรค  ไดคดอยางเปนระบบ  ฯลฯ  สงผลอยางไรตอตวเราบาง  

ซ$ งเรามชดคาถามใหตามนN  

1.   โปรแกรมของเราคออะไร  2.  ไอเดยโปรแกรมของเราไดชวยแกปญหาอยางไร  เราไดไอเดยนNมาอยางไร  

3.   ขNนตอนการพฒนาโปรแกรมของกลมเราเปนอยางไร  4.   ส$ งใดในการพฒนาท$ นาสนใจ  ทาทาย  และนาประหลาดใจ  และทาไมถงเกดความรสกแบบนNนขNนมา  

5.   เราไดเรยนรอะไรบาง  6.   ส$ งท$ ชอบมากเก$ ยวกบโปรเจคนN  

7.  อะไรท$ เราอยากจะเปล$ ยน  ถาเรากลบไปแกไขได  8.  ความรสกตอการเขยนโปรแกรมหรอการสรางโปรแกรมเปล$ ยนไปจากตอนแรกอยางไร