หนังสืออิเล็กทรอนิกส์เสริมการเรียนรู้Scratch

หนงั สอื เรยี นอเิ ลก็ ทรอนกิ ส์เสริมการเรียนรู้ การสร้างเกมดว้ ยโปรแกรม Scratch สำ�หรับนกั เรยี นช้ันมธั ยมศึกษาปที ่1ี





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

สารบญั หนา้ ก เรื่อง ข รู้จักกบั โปรแกรมScratch 1 หน้าต่างการทำ�งานของโปรแกรม Scratch 2-3 ขั้นตอนการเลือกตัวละคร 4-5 ขน้ั ตอนเตรียมตวั บนิ 6-8 ขน้ั ตอนการเพมิ่ วัตถใุ นฉาก 9-11 ขั้นตอนการเคล่ือนที่ 12-15 ขั้นตอนการเปลี่ยนลคุ ในฉาก 16-18 ขั้นตอนการเคล่อื นไหว 19-23 ข้ันตอนให้หวั ใจลอยไปกบั ฟ่้า 24 ขัน้ ตอนการ เกบ็ หวั ใจแลว้ ได้คะแนน 25 ใบงาน เร่ือง องคป์ ระกอบหลักของโปรแกรมScratch เอกสารอา้ งองิ /บรรณานกุ รม

ร้จู กั กับโปรแกรม Scratch ก Scratch (อา่ นวา่ สะ-แครทช์ ) เปน็ ภาษาเขียน โปรแกรมส�ำ หรบั เดก็ ซ่งึ เดก็ ๆ สามารถสร้าง โปรแกรมได้ง่ายๆ ด้วยการเลอื กค�ำ สั่งทตี่ ้องการและ เรียงลำ�ดับการท�ำ งานให้ถูกตอ้ งผ่านทางหน้าจอ (โดย ไมต่ อ้ งเขียนโค้ด) ภาษา Scratch มงุ่ เน้นไปทีก่ ารสอนให้เดก็ ๆ และ บคุ คลท่วั ไปเข้าใจการเขียนโปรแกรมให้มากขน้ึ ผ่าน การเขยี นโปรแกรมแบบง่ายๆ ดังนนั้ ภาษา Scratch จึงไดร้ บั ความนยิ มในการน�ำ มาใช้ประกอบการเรียน การสอนในโรงเรียนและวิทยาลยั ตา่ งๆ ภาษา Scratch ไดร้ บั การพัฒนาโดยมหาวทิ ยาลยั แมส ซาชเู ซตส์ (MIT – Massachusetts Institute of Technology) ตั้งแตป่ ี ค.ศ. 2002 เปิดให้บรกิ ารครง้ั แรกในปี ค.ศ. 2007 ปจั จุบันมโี ปรแกรมทถี่ กู พฒั นา ดว้ ยภาษา Scratch กวา่ 40 ลา้ นโปรเจค



หนา้ ต่างการท�ำ งานของโปรแกรม ข Scratch มสี ว่ นประกอบหลกั ดงั นี้ 1. แถบเมนเู ครอื่ งมอื (Toolbar) ปุ่มเปลย่ี นภาษา เมนู แกไ้ ขการต้ังคา่ เมนู เวบ็ ไซต์ http:// scratch.mit.edu/ เมนู เปิด-บนั ทกึ โปร เมนู แนะนำ�โปรแกรมตวั อยา่ ง เจกต์ บนั ทกึ วดิ ีโอ แชร์ เว็บไซต์ เชค็ อัพเดท และ ปดิ โปรแกรม

2. เคร่อื งมอื เวที (Stage Toolbar) ปมุ่ ลบตวั ละคร ปมุ่ ลดขนาดตัวละคร ป่มุ ประทบั ตราตัวละคร ปุ่มช่วยเหลือให้ค�ำ แนะนำ� ปมุ่ เพิม่ ขนาดตัวละคร 3. ข้อมลู ของตัวละครที่ถูกเลอื ก 4. กลุ่มบล็อก (Block Palette) 5. บลอ็ กในกลุ่มท่ีเลอื ก 6. พน้ื ท่ที ำ�งาน (Script Area) 7. เวที (Stage) 8. รายการตวั ละคร และเวทที ่ใี ช้ในโปรเจกตป์ ัจจุบัน (Sprites Pane)

ขน้ั ตอนการเลือกตวั ละคร 1 เลือกตวั ละคร ทีแ่ ถบ Sprites ขา้ งขวาข้อความ New Sprite คลิกไอคอนตวั ละคร จากน้ันเลือกตัวละครที่ตอ้ งการ (เช่น Cat Flying) – แลว้ กด ปมุ่ OK

ข้ันตอนเตรยี มตวั บนิ 2 เตรียมตัวบนิ กอ่ นทีน่ ้องแมวของเราจะบิน เราจะให้นอ้ งๆ แมวพูดทกั ทายเล็ก นอ้ ย(คลา้ ยๆ ขอ้ ความ START เวลาเร่ิมเกมส)์ โดยเพม่ิ Script ดงั ต่อไปน้ี 1.ทแี่ ถบ Scripts ใหค้ ลกิ ที่คำ�วา่ Events (สีนำ้�ตาล) – ใหล้ ากกลอ่ ง [ when Green Flag clicked ] มาที่พ้นื ท่ีว่าง ดา้ นขวา 2. ทีแ่ ถบ Scripts ให้คลกิ ที่ค�ำ วา่ Looks (สีมว่ ง) – ใหล้ ากกลอ่ ง [ go to front ] มาตอ่ ขา้ งล่างกล่องท่แี ลว้ // ค�ำ สั่งนีจ้ ะทำ�ใหต้ ัวละครของเราเลือ่ นมาท่ีตำ�แหน่งด้านหน้าสุด ก่อน วตั ถุอนื่ ๆ ทงั้ หมดครับ 3.ที่แถบ Scripts ใหค้ ลกิ ท่คี ำ�วา่ Looks (สีมว่ ง) – ให้ลากกล่อง [ say Hello! for 2 secs ] มาตอ่ ขา้ งลา่ งกลอ่ งทแ่ี ลว้ – จากนน้ั เปล่ียน ข้อความ จาก Hello! เป็น START Tip: สามารถลบตัวละครทีไ่ ม่ต้องการได้โดย – ท่แี ถบ Sprites คลกิ ขวาตวั ละครทไ่ี มต่ ้องการ – แลว้ กดปมุ่ delete

ข้นั ตอนเตรียมตวั บนิ 3

ข้ันตอนการเพิม่ วัตถใุ นฉาก 4 เพ่มิ วัตถใุ นฉาก 1.ทแี่ ถบ Sprites ขา้ งขวาข้อความ New Sprite คลิกไอคอนตวั ละคร จากนน้ั เลือกตวั ละครทีต่ อ้ งการ (เช่น Building) – แลว้ กด ปุม่ OKด้านล่างขวามอื – จากนั้นจดั ตำ�แหน่งใหส้ วยงาม

ขน้ั ตอนการเพม่ิ วัตถใุ นฉาก 5 Tip: เราสามารถยอ่ ขนาดของวัตถุได้โดย – คลิกท่ีแถบ Cos- tumes (ท่ีอยู่ข้างๆ แถบ Scripts) – จากนั้นคลิกทีว่ ัตถุ แลว้ คลกิ ลากท่มี ุมวัตถุ เพ่อื ยอ่ /ขยายวตั ถไุ ด้

ขนั้ ตอนการเคล่อื นท่ี 6 การเคลอ่ื นท่ี 1.ท�ำ ให้น้องแมวของเราบนิ ได้ แตเ่ ทคนคิ ที่เราจะใชค้ ือ การเคลอื่ นทฉ่ี ากหลัง เพื่อใหด้ ูเหมือนว่านอ้ งแมวกำ�ลังบิน อย(ู่ ซ่ึงในหลายเกมสก์ ็ใช้เทคนิคการเคลือ่ นทฉี่ ากหลัง แทนการเคลื่อนทีต่ ัวละคร) เลือกวัตถุ Building แล้วเพ่มิ Script ดังน้ี

ข้ันตอนการเคลื่อนที่ 7 เลอื กวตั ถุ Building แล้วเพิม่ Script ดังนี้ 1.ทแ่ี ถบ Scripts ให้คลกิ ทีค่ �ำ ว่า Events (สนี ้�ำ ตาล) – ให้ ลากกลอ่ ง [ when Green Flag clicked ] มาทีพ่ ้นื ทีว่ า่ งด้านขวา 2.ทแ่ี ถบ Scripts ใหค้ ลกิ ทีค่ �ำ ว่า Control (สีส้ม) – ให้ ลากกล่อง [ forever ] มาตอ่ ข้างลา่ งกล่องทแ่ี ลว้ 3.ที่แถบ Scripts ให้คลกิ ท่คี ำ�วา่ Motion (สนี �ำ้ เงิน) – ให้ ลากกลอ่ ง [ set x to 0 ] มาตอ่ ในกล่อง [ forever ] แล้วเปล่ยี น 0 เป็น 250 4.ทีแ่ ถบ Scripts ใหค้ ลิกทค่ี �ำ วา่ Control (สสี ้ม) – ให้ ลากกล่อง [ repeat 10 ] มาต่อในกลอ่ ง [ forever ] ท้าย [ set x to 250 ] และเปล่ียนคา่ [ repeat 10 ] เป็น [ repeat 100 ] 5.ทแี่ ถบ Scripts ให้คลกิ ที่คำ�ว่า Motion (สีน้ำ�เงิน) – ให้ ลากกลอ่ ง [ change x by 10 ] มาตอ่ ในกลอ่ ง [ repeat 100 ] แล้วเปล่ียน 10 เป็น -5

ขั้นตอนการเคล่อื นที่ 8 เมื่อทำ�ตามขนั้ ตอนแล้วจะไดด้ งั รปู Tip: พื้นท่/ี ต�ำ แหน่งของ Stage เป็นดงั น้ี

ข้ันตอนการเปลย่ี นลคุ ในฉาก 9 เปลี่ยนลุค สามารถแสดงผลตึกหลายๆ แบบได้ ดงั นี้ ระหวา่ งกล่อง [ set x to 250 ] (สนี �ำ้ เงิน) และ [ repeat 100 ] (สสี ้ม) – ให้แทรกค�ำ ส่ัง [ next costume ] (สมี ่วง / Looks) ดังภาพ Tip: สามารถดูวา่ วัตถุท่ีเราเลือกมี Costumes แบบไหนบ้าง โดย ไปท่ีแถบ Costumes ขา้ ง Scripts

ขั้นตอนการเปลย่ี นลคุ ในฉาก 10 เพ่ิมทอ้ งฟา้ ทแี่ ถบ Sprites ข้างล่างข้อความ New Backdrop คลิก ไอคอนรูปภาพ จากน้ันเลอื กพืน้ หลังทต่ี ้องการ (เช่น blue sky, blue sky 2, blue sky 3) แล้วกดป่มุ OK – เราจะเหน็ พน้ื หลัง ท่ีเราเลอื กปรากฏที่ Stage

ขั้นตอนการเปลย่ี นลุคในฉาก 11 จะไดผ้ ลลพั ธด์ งั นี้

ข้นั ตอนการเคล่ือนไหว 12 การเคลื่อนไหว ทำ�การเคล่อื นไหว โดยถ้ากดปุ่มข้ึน/ลง จะเคลือ่ นท่ี ต�ำ แหนง่ Y +10/-10 (ตามล�ำ ดับ) โดยให้ เพม่ิ Scripts ไปที่น้องแมวดงั น้ี 1.ท่แี ถบ Scripts ใหค้ ลกิ ท่คี �ำ วา่ Events (สนี ำ�้ ตาล) – ให้ ลากกลอ่ ง [ when space key pressed ] มาทพี่ น้ื ท่ีว่างด้าน ขวา – แลว้ เปล่ยี น space เป็น up arrow 2.ทแี่ ถบ Scripts ใหค้ ลิกทีค่ �ำ ว่า Motion (สนี ้�ำ เงิน) – ให้ ลากกลอ่ ง [ change y by 10 ] มาตอ่ ท้ายกลอ่ งทแ่ี ลว้ 3.ทแ่ี ถบ Scripts ให้คลิกทค่ี �ำ วา่ Events (สนี ำ�้ ตาล) – ให้ ลากกลอ่ ง [ when space key pressed ] มาท่ีพน้ื ที่ว่างดา้ น ขวา – แลว้ เปลย่ี น space เปน็ down arrow

ข้นั ตอนการเคล่อื นไหว 13 4.ทีแ่ ถบ Scripts ใหค้ ลกิ ท่คี ำ�วา่ Motion (สนี ำ้�เงนิ ) – ให้ ลากกล่อง [ change y by 10 ] มาต่อท้ายกลอ่ งที่แล้ว – แล้วเปลี่ยนคา่ 10 เป็น -10

ขั้นตอนการเคลื่อนไหว 14 .5 ทแี่ ถบ Scripts ให้คลกิ ทคี่ ำ�ว่า Events (สนี ้�ำ ตาล) – ให้ ลากกล่อง [ when space key pressed ] มาทพี่ ื้นท่ีวา่ งดา้ น ขวา – แลว้ เปลี่ยน space เปน็ right arrow 6.ทแ่ี ถบ Scripts ใหค้ ลิกท่คี ำ�ว่า Motion (สนี ำ�้ เงิน) – ให้ ลากกล่อง [ change x by 10 ] มาตอ่ ท้ายกลอ่ งที่แล้ว 7.ทแ่ี ถบ Scripts ให้คลกิ ท่ีค�ำ ว่า Events (สนี �้ำ ตาล) – ให้ ลากกลอ่ ง [ when space key pressed ] มาที่พนื้ ท่ีว่าง ด้านขวา – แลว้ เปลี่ยน space เปน็ left arrow 8.ทแ่ี ถบ Scripts ให้คลิกทคี่ ำ�วา่ Motion (สีน�ำ้ เงนิ ) – ให้ ลากกลอ่ ง [ change x by 10 ] มาต่อท้ายกล่องท่แี ลว้ – แลว้ เปลี่ยนคา่ 10 เปน็ -10

ข้นั ตอนการเคล่อื นไหว 15

ขั้นตอนให้หัวใจลอยไปกับฟ่า้ 16 ใหด้ วงใจลอยไปกับฟา้ ท่ีแถบ Sprites ข้างขวาข้อความ New Sprite คลิก ไอคอนตวั ละคร – จากนนั้ เลือกวัตถุทต่ี ้องการ (เช่น Cat Flying) – แล้วกดป่มุ OK – เสรจ็ แลว้ ย่อรปู หัวใจใหส้ วยงาม

ขั้นตอนการ ใหด้ วงใจลอยไปกบั ฟา้ 17 เสร็จแล้ว เพ่ิม Script ดงั ต่อไปน้ี 1) เมนู Events (สีนำ�้ ตาล) – ให้ลากกลอ่ ง [ when Green Flag clicked ] มาทพี่ ้ืนทวี่ า่ งดา้ นขวา 2) เมนู Control (สสี ม้ ) – ใหล้ ากกลอ่ ง [ forever ] มา ต่อทา้ ยกล่องท่แี ลว้ 3) เมนู Motion (สนี ำ้�เงนิ ) – ให้ลากกล่อง [ go to mouse-pointer ] มาต่อในกล่อง [ forever ] จากนั้น เปลยี่ นคา่ mouse-pointer เป็น random position 4) เมนู Motion (สนี �้ำ เงิน) – ใหล้ ากกลอ่ ง [ set x to 0 ] มาตอ่ ทา้ ยกลอ่ งทีแ่ ลว้ จากนนั้ เปลยี่ นค่า 0 เปน็ 250 5) เมนู Control (สสี ม้ ) – ใหล้ ากกลอ่ ง [ repeat 10 ] มาต่อทา้ ยกลอ่ งที่แลว้ จากนั้นเปลี่ยนค่า 10 เปน็ 50 6) เมนู Motion (สีนำ�้ เงนิ ) – ให้ลากกลอ่ ง [ change x by 10 ] มาต่อในกล่อง [ repeat 50 ] จากน้นั เปลย่ี น ค่า 10 เปน็ -10

ขน้ั ตอนการ ให้ดวงใจลอยไปกบั ฟ้า 18 Tip: นอ้ งๆ สามารถ Copy Scripts ได้โดยคลิกขวาที่ Scripts ที่ ต้องการ แล้วเลอื ก duplicate

ขนั้ ตอนการ เก็บหัวใจแล้วไดค้ ะแนน 19 เก็บหวั ใจแลว้ ไดค้ ะแนน กอ่ นอ่นื ให้เราไปทแ่ี ถบ Scripts คลิกทค่ี �ำ ว่า Data (สแี สด) เพื่อสรา้ งตวั แปรไว้ส�ำ หรบั เก็บคะแนนก่อน – จากน้ันกดป่มุ Make a Variable – ตง้ั ชือ่ ตัวแปรว่า score – แลว้ กดปมุ่ OK

ข้นั ตอนการร เกบ็ หัวใจแล้วได้คะแนน 20 เพมิ่ Script ไปท่ีนอ้ งแมว ดังนี้ 1) เมนู Events (สีน�ำ้ ตาล) – ให้ลากกลอ่ ง [ when Green Flag clicked ] มาทพี่ ื้นทว่ี ่างด้านขวา 2) เมนู Data (สีแสด) – ใหล้ ากกลอ่ ง [ set score to 0 ] มาต่อทา้ ยกล่องทแ่ี ลว้

ข้ันตอนการ เก็บหวั ใจแล้วไดค้ ะแนน 21 3) เมนู Control (สสี ม้ ) – ใหล้ ากกลอ่ ง [ forever ] มาตอ่ ท้ายกลอ่ งทีแ่ ลว้ 4) เมนู Control (สสี ม้ ) – ใหล้ ากกลอ่ ง [ if … then ] มาตอ่ ในกลอ่ ง [ forever ] 5) เมนู Sensing (สฟี า้ ) – ใหล้ ากกลอ่ ง [ touching ___ ] มาตอ่ ในท่วี ่างของกล่อง [ if … then ] จากนั้น เปล่ียนคา่ ___ เป็น Heart 6) เมนู Sound (สีม่วง) – ให้ลากกลอ่ ง [ play sound pop ] มาต่อในกลอ่ ง [ if … then ] 7) เมนู Data (สีแสด) – ใหล้ ากกล่อง [ change score by 1 ] มาต่อท้ายกลอ่ งทีแ่ ล้ว 8) เมนู Control (สีส้ม) – ใหล้ ากกล่อง [ wait 1 sec ] มาตอ่ ทา้ ยกลอ่ งที่แลว้

ขน้ั ตอนการ เกบ็ หัวใจแล้วไดค้ ะแนน 22 ตวั อย่างเกมที่สมบรู ณ์ https://scratch.mit.edu/projects/19355570

ตวั อย่างผลลพั ธท์ ่ไี ด้ 23 ตวั อย่างผลลพั ธท์ ไ่ี ด้

ใบงาน เรื่อง องคป์ ระกอบหลักของ โปรแกรมScratch ค�ำ ชแี้ จง ใหนกั เรียนเขา้ล้งิ คใ์ บงานต่อไปน้แี ละท�ำ ใบงานให้ถกู ต้อง https://www.liveworksheets.com/4-nz667840ol

เอกสารอ้างองิ /บรรณานุกรม พระราชบญั ญัติการศึกษาแหง่ ชาติ./2542.//พระ ราชบญั ญตั กิ ารศึกษาแห่งชาตหิ มวดที่ 8 มาตรา24. / สืบค้น 25 ส.ค 64,//จาก http://www.ratchakitcha. soc.go.th/DATA/PDF/2542/A/074/1.PDF พัดชา อินทรรศั มี.(2555). การพัฒนาหนังสือ อเิ ลก็ ทรอนิกส์(E-book) เร่ือง การใช้หอ้ งสมดุ สำ�หรบั นกั เรยี นชัน้ มธั ยมศกึ ษาปที ่ี 1 . สารนิพนธ์ กศ.ม (เทคโนโลยีการศึกษา).กรงุ เทพฯ : บณั ฑิตวิทยาลยั มหาวทิ ยาลยั ศรนี ครนิ ทรวโิ รฒ. บษุ กร คำ�เปลว./2563.//การจัดกิจกรรมการ จัดการเรียนรดู้ ว้ ยวธิ ีการสอนแนะ(Coaching)เพ่อื พัฒนา ความสามารถด้านเทคโนโลยแี ละการส่อื สาร เร่ืองการใช้ โปรแกรม Adobe Indrsign./สืบคน้ 25 ส.ค 64,//จาก shorturl.at/emtIN THONGSON POLMEESAK./2017.// E-Book digital./ MBS Digital Book 2017,/1.สบื ค้นจาก http:// ebook.msu.ac.th/ebook/pdf/280417080341.pdf วรรณวิษา./2560.//การใช้งานโปรแกรมScratch./ สบื ค้น 25 ส.ค 64,//จาก http://wanwisa67667.blog- spot.com KarnLab/2021//สร้างเกมสด์ ว้ ย Scratch/สืบคน้ 15 ต.ค 64,//จาก https://karnlab.com/scratch-ep6- flying