1 แบบทดสอบก่อนเรียน คำชี้แจง ให้นักเรียนเลือกคำตอบที่ถูกต้องที่สุดเพียงคำตอบเดียว แล้วทำเครื่องหมายกากบาท (x) ลงในกระดาษคำตอบ จำนวน 10 ข้อ (คะแนนเต็ม 10 คะแนน) 1.ผลการรันโปรแกรมต่อไปนี้ คืออะไร ก. ตัวละครเคลื่อนที่ไป 10 หน่วย ข. ตัวละครเคลื่อนที่ไป 1 หน่วย และเปลี่ยนเป็นชุดตัวละครต่อไป ค. ตัวละครเปลี่ยนเป็นชุดตัวละครในลำดับถัดไป ง. ตัวละครเคลื่อนที่ไป 10 หน่วย และเปลี่ยนเป็นชุดตัวละครในลำดับถัดไป 2.เมื่อคลิกปุ่มธงเขียวแล้ว ผลลัพธ์ของโปรแกรมนี้คืออะไร ก. ตัวละครเดินไปข้างหน้า ข. ตัวละครเดินชนขอบเวทีซ้ำอย่างไม่สิ้นสุด ค. ตัวละครเดินซ้ำ 10 ครั้ง ง. ตัวละครเคลื่อนที่ไปข้างหน้า 10 ก้าว
2 3.ส่วนประกอบหลักของหน้าต่างการทำงานของโปรแกรม Scratch มีอะไรบ้าง ก. Stage, Sheet, File ข. Stage, Sheet, File ค. stage, sprite, script ง. Database, Sheet 4.ข้อใด คือ บล็อกที่จะถูกนำมาใช้เป็นอันดับแรกเสมอในการเขียนสคริปต์ ก. ทำซ้ำตลอด ข. เมื่อธงเขียวถูกคลิก ค. เคลื่อน...ก้าว ง. พูด...เป็นเวลา...วินาที 5. เมื่อเปิดโปรแกรม Scratch ขึ้นมาจะพบว่าแมวอยู่ตำแหน่งใด ก. X : 0 , Y: 0 ข. X : 1 , Y: 1 ค. X : -1 , Y: 1 ง. X : 1 , Y: -1 6. การเขียนสคริปต์ให้ตัวละคร ต้องวางบล็อกไว้ที่ใด ก. Stage ข. Sprite ค. Script ง. Scratch 7. บล็อกคำสั่ง repeat หมายถึงคำสั่งอะไร ก. คำสั่งที่กำหนดการทำงานแบบวนซ้ำไม่รู้จบ ข. คำสั่งที่กำหนดการทำงานแบบวนซ้ำ ค. คำสั่งกำหนดค่าเริ่มต้นให้กับตัวแปร ง. คำสั่งที่กำหนดการทำงานแบบวนซ้ำตามจำนวนรอบที่กำหนด
3 8. การสร้างตัวแปรในโปรแกรม Scratch ทำได้โดยการคลิกที่บล็อกคำสั่งใด ก. บล็อกคำสั่ง Make a Varible ข. บล็อกคำสั่ง Motion ค. บล็อกคำสั่ง Looks ง. บล็อกคำสั่ง Pen 9. ข้อใดอธิบายการทํางานของบล็อกคําสั่งต่อไปนี้ ได้ถูกต้อง ก. เป็นการกําหนดจุดเริ่มต้นของตัวละคร ข. เมื่อกดปุ่มธงเขียวจะเริ่มต้นการทํางานที่ตําแหน่งนี้เท่านั้น ค. เมื่อตัวละครมีการเคลื่อนที่ตัวเลข x : ……. และ y : ……… จะวิ่งไปตามตําแหน่งของตัวละคร ง. ข้อ.ก และข้อ.ข ถูก 10.ข้อใดไม่ใช่ คำสั่งควบคุมการทำงานแบบวนซ้ำ? ก. Repeat ข. Wait until ค. Forever ง. Repeat until เกณฑ์การให้คะแนน ตอบถูกข้อละ 1 คะแนน ตอบผิด 0 คะแนน คะแนนเต็ม 10 คะแนน ได้คะแนน คะแนน ทำได้ 8 คะแนน ผ่านเกณฑ์การประเมิน
4 ใบความรู้ที่ 1 การวางบล็อกโค้ด (Scratch Block) ใน Scratch การสร้างเรื่องราว ภาพเคลื่อนไหว อนิเมชั่น นิทาน หรือบทเรียนที่มีการตอบโต้จะต้อง อาศัยการเขียนโค้ด หรือใน Scratch เวอร์ชันก่อนหน้านี้จะเรียกว่า Script ที่เป็นชุดคำสั่ง Scratch เป็น ภาษาคอมพิวเตอร์ภาษาหนึ่ง ซึ่งมีรากฐานการเขียนโปรแกรมเหมือนภาษาอื่นๆที่มีโครงสร้างภาษาคล้ายๆกันจึง เหมาะสำหรับเด็กๆหรือผู้ที่ต้องการศึกษาการเขียนโค้ดภาษาคอมพิวเตอร์ ภาษา Scratch ทำงานอย่างไร ภาษาคอมพิวเตอร์ (Programming Language) ที่ใช้สำหรับเขียนโปรแกรม ( Computer Programming) หรือการเขียน Coding นั้นจะมีมากมายหลายภาษา ภาษาที่ผู้คนใช้งานก็มีหลักการและแนวคิด คล้ายกัน เช่น เริ่มจากภาษา C, Visual Basic, VBA, ASP รวมถึงภาษาประเภท Script อย่าง Java Script เป็น ต้น แต่ละภาษาอาจจะมีความยากง่ายหรือมีอัลกอริทึมที่แตกต่างกันบ้าง สำหรับภาษา Scratchก็จะมีโครงสร้างภาษามาตรฐานที่ใช้งานไม่ยาก เพราะเน้นการใช้งานสำหรับเด็ก (อายุ8-16 ปี) เพื่อปูพื้นฐานให้เด็กๆ เริ่มต้นหัดเขียนโปรแกรมเพื่อให้คุ้นเคยและนำไปต่อยอดความคิด สร้างสรรค์ประยุกต์ใช้งาน และศึกษาต่อในการเรียนภาษาคอมพิวเตอร์ภาษาอื่นๆ ต่อไป แต่ใน Scratch จะเน้น คำสั่งที่ใช้งานง่าย ไม่ซับซ้อนตัดเอาคำสั่งหรือการทำงานยากๆ ออกไป เพราะอาจจะยากเกินไปสำหรับเด็ก เพียงแค่นำโค้ดมาวางเหมือนการต่อจิ๊กซอว์ และกำหนดการทำงานโดยไม่ต้องมานั่งคีย์โค้ดยาวๆ ง่ายต่อการ เรียนรู้การฝึกกลยุทธ์สำคัญในการแก้ปัญหา การออกแบบโครงงาน และการสื่อสารแนวคิด แต่เพียงพอต่อการ ทำโปรเจ็กได้ตั้งแต่ง่ายๆ จนถึงระดับซับซ้นเกินไปเพื่อจุดประกายความคิดให้เด็กๆ รักการเขียนโปรแกรม การ ทำงานของ Scratch จะมีหลักการดังนี้
5 หลักการเขียนโค้ด การเขียนโปรแกรมของ Scratch จะทำแบบ OOP (Object Oriented Programmimg) โค้ดชุดหนึ่งๆ ประกอบไปด้วยการนำบล็อกมาเรียงต่อกันเหมือนการต่อจิ๊กซอว์ โดยบางบล็อกสามารถซ้อนอยู่บนบล็อกอื่นได้ เพื่อสร้างการทำงานต่อเนื่อง ตัวอย่างการเขียนโค้ดคำสั่งให้เจ้าสไปรต์หรือตัวละครแมวเดินเคลื่อนที่ไปข้างหน้า แล้วส่งเสียงร้อง เมื่อหยุดให้แสดงข้อความทักทาย เราก็ต้องกำหนดโค้ดให้กับสไปรต์แมว 3 บล็อก สำหรับเด็กๆ แรกๆ อาจจะกำหนดสตอรีบอร์ดให้กับตัวละครก่อน เพื่อเป็นการเรียบเรียงแนวคิดก่อนวางบล็อก เพิ่มสไปรต์ เดินไป10 หน่วย ส่งเสียงร้อง ส่ง ข้อความ ทักทาย ส่งข้อความ ทักทาย เพิ่มสไปรต์ เดินไป10 หน่วย ส่งเสียงร้อง - การวางบล็อกอาจจะลากมาวางต่อกันได้เลย หรือนำมา วางแยกเป็นกลุ่มงานแล้วค่อยคลิกลากมาต่อกันภายหลัง ได้ - บางบล็อกคลิกทดสอบจากกรอบทางซ้ายก่อนคลิกลาก มาวาง บางบล็อกคลิกทดสอบ ก่อนลากไปวางใช้งาน 1 สร้างสตอรีบอร์ดภาพรวม 2.ลองเปรียบกับการใช้โค้ด 3.เลือกประเภทโค้ด และลากไปวางทางขวา 4.ลากบล็อกไปวางต่อกัน
6 แท็บ Code : แท็บโค้ดในการเขียนโปรแกรม ก่อนที่จะไปลงมือเขียนโปรแกรม เรามาทำความรู้จักกับแท็บ Code (โค้ด) และโค้ดแต่ละประเภทว่าจะ ใช้ทำอะไรได้บ้าง โดยจะอธิบายหลักการทำงานของโค้ดคร่าวๆ เพื่อจะได้นำไปใช้งานได้อย่างถูกต้องไม่เสียเวลา สำหรับการนำไปใช้งานจริงๆ จะอธิบายแยกในหัวข้อย่อยต่อไป นอกจากนี้จะวางภาพเปรียบเทียบให้ดูว่า Code ในเมนูภาษาอังกฤษ และโค้ดในมนูภาษาไทยคืออะไร จะได้เทียบการใช้งานได้ง่ายสำหรับประเภทผู้ใช้เมนูต่าง ภาษากัน และนักเรียนสามารถใช้ได้ทั่ง2 เมนู แต่ถ้าเป็นไปได้แนะนำให้ใช้ภาษาอังกฤษ เพื่อการประยุกาเขียน โค้ดในภาษาอื่นต่อไปในอนาคตได้ง่ายขึ้น - ทดสอบการทำงานของโค้ด หรือเราจะเรียกว่า การ "รันโค้ด" จะคลิกที่บล็อกบนสุดเพื่อทดสอบ ทั้งหมดในกลุ่ม หรือจะทดสอบทีละบล็อกก็คลิกที่ บล็อกนั้น แต่ถ้าคลิกปุ่มGo (Flag ธงสีเขียว) จะ รันโค้ดทั้งหมดของทุกกลุ่มทุกโค้ดที่วางใน สไปรต์ทุกตัว 5.คลิกปุ่ม Go ทดสอบ หรือคลิกที่บล็อกโค้ด บล็อกโค้ดภาษาอังกฤษ
7 Motion : เคลื่อนไหว โค้ดในกลุ่ม Motion ใช้กำหนดการเคลื่อนไหวของตัวละคร โดยจะเคลื่อนไหวเดินหน้าไปทางขวา ถอย หลังมาทางซ้าย หรือให้ไปทางตำแหน่งตัวชี้ของ Direction (ทิศทาง) เริ่มตันจะกำหนดไว้ที่ 10 Steps (10 ก้าว) แต่เราสามารถกำหนดจำนวนก้าวได้ตามต้องการ บล็อกโค้ดภาษาไทย ให้เคลื่อนที่ 10 ก้าว ให้หมุน หรือหันวนไปทางขวาตามจำนวนองศา ให้หมุน หรือหันวนไปทางซ้ายตามจำนวนองศา กำหนดให้ไปยังตำแหน่งแบบชุ่ม หรือตัวชี้เมาส์ ให้ไปยังตำแหน่ง x และ Y ที่ระบุ ให้เหินหรือเลื่อนไปยังตำแหน่งสุ่ม ให้เหินหรือเลื่อนไปยังตำแหน่ง x และ Y ที่ระบุ ให้หันไปตามทิศทางที่ระบุ ให้หันตามตัวชี้เมาส์ ให้เปลี่ยนตำแหน่งค่า x ที่เท่าไร
8 Looks : รูปอักษณ์ Looks กลุ่มโค้ดที่ใช้สำหรับเปลี่ยนตัวละคร หรือคอสตูมของตัวละคร, แสดงข้อความ, สลับฉากหลัง, สลับตัวละคร,เพิ่ม/ลดขนาดตัวละคร และการตั้งค่าการกำหนดเอฟเฟ็กต์ให้ตัวละคร เป็นต้น Sound : เสียง โค้ดในกลุ่ม Sound (เสียง) กำหนดการเล่นเสียงให้กับตัวละครและเหตุการณ์ต่างๆ ที่เกิดขึ้นกับตัว ละครโดยกำหนด ให้เล่นเสียง, หยุดเล่นเสียง และกำหนดเอฟเฟ็กต์เสียงสูงต่ำได้ แต่เสียงที่มีให้เลือกจะต้อง สัมพันธ์กับตัวละคร(Sprite) ด้วย เช่น เลือกตัวละครแมว ก็จะเป็นเสียงแมวร้อง เป็นต้น หรือจะเลือก บันทึกเสียง (Record) ลงไปก็ได้ ต ให้หมุน หรือหันวนไปทางขวาตาม ให้หมุน หรือหันวนไปทางซ้ายตาม จำนวนองศา จำนวนองศา กำหนดให้ไปยังตำแหน่งแบบซุ่ม หรือตัวชี้เมาส์ ให้ไปยังตำแหน่ง x และ Y ที่ระบุ ให้เหินหรือเลื่อนไปยังตำแหน่งสุ่ม หรือตัวชี้เมาส์ ให้เหินหรือเลื่อนไปยังตำแหน่ง x และ Y ให้หันไปตามทิศทางที่ระบุ ที่ระบุ ให้หันตามตัวชี้เมาส์ (เมาส์พอยน์เตอร์) ให้เปลี่ยนตำแหน่งค่า x ที่เท่าไร ให้เคลื่อนที่ 10 ก้าว เล่นต่อเนื่องจนจบเสียง เริ่มให้เล่นเสียง ให้หยุดเสียงทั้งหมด เลือกเอฟเฟ็กต์เสียงสูงต่ำทีละกี่บีตส์ ตั้งค่าเอฟเฟ็กต์เสียง ยกเลิกเอฟเฟ็กต์เสียง เพิ่ม/ลดระดับเสียงตามค่าที่ระบุ ตั้งค่าระดับความดังของเสียง เลือกเปิดแสดงแถบปรับระดับเสียง เลือกบันทึกเสียง
9 Events : เหตุการณ์ หรือเหตุการณ์ เมื่อมีการทำงานของโปรแกรม จะมีเหตุการณ์ที่เราสามารถกำหนดให้กับตัวละคร จาก การคลิกเมาส์ การกดปุ่มบนแป้นพิมพ์ เป็นการติดต่อการโต้ตอบระหว่างผู้ใช้กับโปรแกรม และระหว่างตัวละคร หลายๆ ตัว หรือระหว่างตัวละครกับเวที เช่น ผู้ใช้คลิกที่ตัวละครแล้วให้ส่งเสียงร้อง หรือเมื่อฉากหลังเปลี่ยนก็ให้ เปลี่ยนตัวละคร เป็นต้น ด้วยการเลือกเหตุการณ์ และเลือกการกระทำให้ตอบสนองเหตุการณ์นั้นขึ้นมา จะมีให้ กำหนดได้หลายแบบ ดังนี้ ฃ เมื่อคลิกบล็อกเหคุการณ์ (event) กลุ่มโค้ดด้านล่างทั้งหมดจะทำงานลงมา ตามลำดับ เมื่อมีการกดปุ่มที่กำหนดจากบนแป้นพิมพ์ เมื่อมีการคลิกที่ตัวละคร เมื่อได้รับข้อความ เมื่อมีการเปลี่ยนฉากหลัง (Backdrop) เมื่อระดับความดังของเสียง หรือตัวจับเวลา กระจากหรือส่งข้อความและรอ กระจายหรือส่งข้อความ
10 Control : ควบคุม โค้ดในกลุ่ม Control (ความคุม) จะใช้ในการควบคุมลำดับการทำงาน (Control Flow) งานบางอย่าง ง่ายพอที่จะทำแบบเรียงลำดับ ลำดับการทำงานของสคริปต์จึงตรงไปตรงมา ทำงานจากบล็อกบนสุดลงไปจนถึง บล็อกล่างสุด แต่งานบางอย่างมีความซับซ้อนมากกขึ้น การทำงานแบบเรียงลำดับอาจไม่เพียงพอ หรือไม่มี ประสิทธิภาพ ดังนั้น จึงมีการควบคุมลำดับการทำงานอีกสองลักษณะ เพื่อเพิ่มขีดความสามารถในการเขียน โปรแกรม นั้นก็คือ การความคุมลำดับการทำงานแบบวนซ้ำ (Loop) และควบคุมลำดับการทำงานแบบมีเงือนไข (Condition) โดยบล็อกทำซ้ำและบล็อกเงือนไข (if) ที่มีอยู่หลายแบบให้เลือกใช้ในบล็อกหมวดควบคุม ให้หยุดรอตามจำนวนวินาทีที่ระบุ ให้วนรอบทำซ้ำโค้ดภายในบล็อกตามจำนวนรอบที่ระบุ ให้วนรอบทำซ้ำไม่มีกำหนดหยุกคือ ทำตลอด ให้ทำตามเงื่อนไข “ถ้า” เงื่อนไขเป็นจริง ถ้าเงื่อนไข เป็นเท็จ ก็จะหยุดทำงานของโค้ดภายในบล็อก ตรวจสอบเงื่อนไข ถ้าเงื่อนไขเป็นจริงให้ทำงานใต้ โค้ด if ถ้าเงื่อนไขเป็นเท็จให้ทำงานใต้โค้ด else ให้รอจนกระทั่งเจอตามเงื่อนไขที่กำหนดไว้ ให้วนรอบทำซ้ำจนกระทั่งตรงตามเงื่อนไขที่ระบุ ให้หยุดโค้ดทั้งหมด เมื่อเริ่มโคลนหรือก็อปปี้ตัวละครเพิ่ม สร้างโคลนตัวละครจาก sprite ตัวไหน ลบตัวละครที่โคลน
11 ตัวอย่างการใช้บล็อก Control
12 Sensing : ตรวจจับ โค้ดในกลุ่ม Sensing คือ การตรวจจับ การสัมผัส เช่น ตัวละครมีแตะตัวชี้เมาส์ (Mouse pointer), ซน ขอบ (edge) แตะสี และการกดปุ่มบนแป้นพิมพ์ นอกจากนี้ยังมีการถาม (ask) และแสดงกรอบรอรับคำตอบ จากผู้ใช้เพื่อนำมาประมวลผลต่อได้ด้วบ เมื่อแตะโดนเมาส์พอยน์เตอร์ เมื่อแตะสีที่กำหนด เมื่อสีแรกแตะสีที่สอง ระยะห่างจากตัวชี้เมาส์ ตั้งคำถามและแสดงกรอบรอรับข้อความ แสดงข้อความคำถามที่ได้รับมาบนเวที เมื่อมีการกดปุ่มจากแป้นพิมพ์ เมื่อเมาส์ถูกกด ตำแหน่งเมาส์แนวแกน x ตำแหน่งเมาส์แนวแกน y ตั้งค่าโหมดการลากเมาส์ ระดับความดังของเสียง ตั้งจับเวลา จับเวลาใหม่ แสดงค่าของตัวละครและเวที แสดงวันที่, เดือน, ปีและเวลา จำนวนวันตั้งแต่ปี 2000 แสดงชื่อผู้ใช้
13 ตัวอย่างการใช้Sensing
14 Operators : ตัวดำเนินการ โอเปอร์เรเตอร์Operators การเขียนโปรแกรมต้องอาศัยการคำนวณไม่มากก็น้อย โอเปอร์เรเตอร์เป็น เครื่องมือที่ใช้ในการคำนวณ หรือการจัดการกับข้อความตัวอักษรที่ใช้ในการโปรแกรม ในScratch เป็น โอเปอร์เรเตอร์พื้นฐาน แต่ก็เพียงพอต่อการทำโปรเจ็กต์ หากมีงานที่ซับซ้อนสามารถนำมาใช้รวมกันได้ ส่วน ใหญ่ที่ใช้งานบ่อยๆ คือ การนำไปใช้งานกับบล็อกกลุ่ม Control และ Variables ในการเปรียบเทียบค่าและ ตัดสินใจ บวกค่าตัวเลขทั้ง 2 ค่า ลบค่าตัวเลขทั้ง 2 ค่า นำค่าตัวเลขทั้ง 2 ค่ามาคูณกัน นำค่าตัวเลขทั้ง 2 ค่ามาหารกัน สุ่มค่าตัวเลขจากตัวเลขทั้ง 2 ค่า เปรียบเทียบค่าตัวเลขมากกว่า เปรียบเทียบค่าตัวเลขน้อยกว่า เปรียบเทียบค่าตัวเลขเท่ากับ เปรียบเทียบเงื่อนไขที่ 1 และ 2 ที่จริงทั้งคู่ เปรียบเทียบเงื่อนไขที่ 1 หรือ 2 ไม่ใช่ค่าหรือเงื่อนไขที่ระบุ นำค่าหรือข้อความมาต่อกัน แสดงค่าตัวอักษรตามตำแหน่งที่ระบุ นับความยาวของตัวอักษร ค้นหาตัวอักษรในข้อความ มี หรือ ไม่มี หารตัวเลขทั้งสองค่าเพื่อเอาเศษ ปัดเศษตัวเลขทิ้ง หาค่าสัมบูรณ์ของตัวเลข
15 ตัวอย่างการใช้ Operating
16 Varibles : ตัวแปร Varibles หรือตัวแปรคือ ชื่อที่กำหนดเพื่อเก็บข้อมูลเอาไว้ และเรียกใช้จากบล็อกอื่น เพื่อนำข้อมูลมา อ้างอิง นำมาคำนวณ แล้วนำมาแสดงผล หรือตัดสินใจ เช่น คะแนนการเล่นเกม หรือผลลัพธ์การบวกเลข เป็น ต้น จะมีตัวแปร กลุ่ม Data ที่มีมาให้แล้ว เช่น ใช้เก็บค่าคำตบจากผ็ใช้ แต่เราสามารถสร้างตัวแปรเพิ่มเข้ามาได้ ด้วยการคลิกปุ่ม Make a Variable เพื่อสร้างตัวแปรขึ้นมาให้ได้ My Blocks : บล็อกของฉัน My Blocks คือ การสร้างบล็อกการทำงานขึ้นมาใหม่ด้วยตัวเอง เป็นบล็ฮกอีกประเภทหนึ่งของ Scratch จะเป็ฯบล็อกสีชมพู เมื่อสร้างขึ้นมาครั้งแรกจะเป็นบล็อกว่าง เราต้องกำหนดชื่อบล็อก และกำหนดการ ทำงานของบล็อก โดยปกติมักจะนำบล็อกของโปรแกรมที่สร้างเอาไว้มาวางต่อ เหมือนสร้างตัวรวบรวมบล็อก การทำงานหนึ่งๆ เอาไว้ แล้วนำ มาใช้งานซ้ำได้ สร้างตัวแปรใหม่ ตัวแปรของโปรเจกต์ ตั้งค่าเริ่มต้นให้กับตัวแปร เปลี่ยนค่าตัวแปร หรือเพิ่มค่าตัวแปร แสดงกล่องค่าตัวแปรบนหน้าต่างเวที ซ่อนกล่องตัวแปรบนเวที สร้างตัวแปรแบบรายการ
17 Extension : ส่วนขยายของโปรแกรม เริ่มต้นการใช้งาน Scratch จะมีบล็อกการทำงานหลักของโปรแกรม และยังมีส่วนขยาย (Extension) เพื่อเสริมการทำงายของโปรแกรม เช่น Music เพิ่มบล็อกการเล่นเสียงดนตรี ตามตัวโน้ตของเครื่องดนตรี ประเภทต่างๆ รวมถึงการใช้งาน Video Sensing การตรวจจับภาพจากวีดีโอมาควบคุมการทำงานของตัวละคร ได้ 1 คลิกปุ่ม Add Extension (เพิ่มส่วนขยาย) 2 เลือกส่วนขยายที่ต้องการใช้งาน ส่วนขยายเมนูภาษาไทย
18 Go/Stop : รันโค้ดและหยุดการรัน การสั่งให้โปรเจ็กต์เริ่มทำงานและหยุดทำงาน เพื่อทดสอบโค้ดและดูผลลัพธ์การทำงาน ทำได้โดยคลิก ปุ่ม Go รูปธงสีเขียว (Green Flag) ซึ่งอยู่ด้านบนของเวที โดยโค้ดของทุกตัวละครและเวทีที่มีบล็อกโค้ด จะเริ่ม ทำงานพร้อมกัน หมด และถ้าต้องการหยุดการทำงานของโปรเจ็กต์ก็คลิกปุ่ม Stop หยุด หรือจะเลือกรันโค้ดแยกเฉพาะบล็อก หรือสไปรต์ที่ต้องการทดสอบการทำงาน เราจำเป็นต้องทำอยู่ เรื่อยๆเพื่อดูว่าโค้ดแต่ละบล็อกทำงานอย่างไร การทดสอบเฉพาะจุดก็คลิกที่บล็อกนั้นได้เลย สังเกตได้จากบล็อก ที่คลิกเลือกจะมี เส้นขอบสีเหลืองครอบอยู่ โค้ดที่อยู่ในบล็อกนี้จะถูกรัน 1 คลิกปุ่ม Go รันโค้ดทุกบล็อกทุกตัวละคร 2 หรือคลิกที่บล็อกรันเฉาพาะบล็อกชุดนี้
19 วิธีการใส่โค้ด การเขียนโค้ดให้ตัวละครด้วยขั้นตอนง่ายๆ เช่น ให้แมวเดินไป 10 ก้าว ส่งเสียงร้อง และให้หันไปทาง ตัวชี้เมาส์ ก็เริ่มเลือกโค้ดจากบล็อกประเภท Motion (เคลื่อนไหว) แล้วลากบล็อก หรือ ไป วางบนพื้นที่เขียนโค้ดพร้อมกับโค้ดอื่นๆ ที่ต้องการ 1 คลิกประเภทโค้ด Motion (เคลื่อนไหว) 2 คลิกลากบล็อกไปวาง 4 คลิกลากบล็อก เล่นเสียง ไปวาง คลิกประเภทโค้ด Sound (เสียง) 3 คลิกรันทดสอบโค้ด 5 คลิกลากโค้ด หันไปทางตัวชี้เมาส์ ไปวางต่อ
20 Block : บล็อกโค้ดกับการเขียนโปรแกรม Blocks (บล็อก) ใน Scratch คือ โค้ดคำสั่งของ Scratch ที่เรานำมาเขียนโปรแกรมนั่นเอง จะมี ลักษณะเป็นบล็อก เชื่อมต่อซึ่งกันและกันเหมือนจิ๊กซอว์ที่นำมาต่อกัน ซึ่งบล็อกแต่ละประเภทข้อมูล (Hat, Stack, Reporter, Boolean หรือ Cap) จะมีรูปร่างเป็นของตนเอง การทํางานกับบล็อกก็คือ การเขียนโค้ดโปรแกรมที่ทำงานได้ง่ายกว่าการเขียนโปรแกรมแบบข้อความ เหมือน โปรแกรมอื่นๆ ที่เราต้องจดจำคำสั่งที่พิมพ์ลงไป อาจจะเกิดข้อผิดพลาดทางไวยากรณ์เมื่อพิมพ์คำสั่งผิด จะรันโค้ดไม่ผ่าน แต่การเขียนโปรแกรมก็จะยืดหยุ่นมากกว่า เพราะแก้ไขโค้ดได้ แต่การใช้ Blocks ใน Scratch จะใช้ตามบล็อกที่มีให้และ แก้ไขไม่ได้ ประเภทของ Blocks ใน Scratch แบ่งออกเป็นได้ 6 ประเภท ดังนี้ Hat Blocks อยู่ในกลุ่มเหตุการณ์ (Event) จะมีอยู่ 6 บล็อก จะใช้เริ่มต้นโค้ด โดย แสดงบนสุด ด้านบนจะเป็นรูปโค้งมนคล้ายหมวก ด้านล่างจะมีส่วนนูนสำหรับนำ บล็อกอื่นมาเชื่อมต่อได้ Stack Blocks ส่วนใหญ่จะเป็นบล็อกการทำงานหลักๆ คำสั่งในการทำงานทั่วไป สามารถนำไป ต่อกับบล็อกอื่น หรือนำบล็อกอื่นมาต่อได้เป็นการทำงานที่ต่อเนื่อง Boolean Blocks อยู่ในกลุ่มบล็อก Operators ตัวดำเนินการจะวางซ้อนไปใน บล็อกอื่น มักใช้ ในการกำหนดเงื่อนไข โดยสังเกตได้จากสัญลักษณ์รูป 6 เหลี่ยม Cap Blocks ใช้สำหรับหยุดบล็อก หรือหยุดการทำงานของโค้ด เพื่อไม่ให้นำ บล็อกอื่นมาวางต่อ ได้ พื้นล่างบล็อกจะเรียบ จะมีอยู่ 2 บล็อกในกลุ่ม C Blocks Reporter Blocks ใช้คืนค่าตัวเลขและข้อความ จะมีรูปร่างโค้งมน การนำมาใช้ งานจะใช้เดี่ยว บางคำสั่ง แต่ส่วนใหญ่จะใช้ช้อนลงไปในบล็อกประเภท Stack Blocks ซึ่งจะมีอยู่หลายกลุ่ม บล็อกที่ใช้งาน Reporter Blocks C Blocks อยู่ในกลุ่ม Control Blocks หรือกลุ่มควบคุม ใน Scratch 3.0 จะมี ทั้งหมด 5 บล็อก จะมีรูปร่างคล้ายตัว C ภายในบล็อกจะมีรูปร่างเว้าและนูนเพื่อ นำเอาบล็อกอื่นๆ มาเชื่อมต่อใส่ไว้ ภายใน
21 o ตัวอย่างการเขียนโค้ดด้วยการนำบล็อกประเภทต่างๆ มาวางใน ตำแหน่งตามประเภทของบล็อก
22 แบบฝึกทักษะที่ 1 บล็อกโค้ดดนตรีจินตนาการ คำชี้แจง ให้นักเรียนปฏิบัติ ดังนี้ (คะแนนเต็ม 10 คะแนน) 1. สร้างโปรเจกต์ใหม่ เขียนสคริปต์ให้ตัวละครแมวทั้ง 3 แบบ สังเกตผลลัพธ์แต่ละสคริปต์ 1.1 1.2 1.3 ผลลัพธ์ของ 3 สคริปต์ต่างกันอย่างไร ............................................................................................ ............................................................................................ .......................................................................................... ............................................................................................
23 2. สร้างตัวละครม้าและใส่เสียงม้า ดังนี้ 2.1 เพิ่มตัวละครม้า เลือกประเภท Animals แล้วเลือก Horse-a 2.2 เลือกแท็บ Sound แล้วลบไฟล์เสียง meow ออก
24 2.3 เพิ่มเสียง horse 2.4 เขียนสคริปต์ เมื่อนำเมาส์ไปคลิกที่ตัวม้า ให้ส่งเสียงม้าร้อง 2.5 เพิ่มตัวละครใหม่ และใส่เสียงให้กับตัวละคร พร้อมกับเขียนสคริปต์ ให้มีเสียงเมื่อคลิกที่ตัวละคร 2.6 เพิ่มฉากใหม่ และใส่เสียงให้ฉาก พร้อมกับเขียนสคริปต์ ให้มีเสียงเมื่อคลิกที่ฉากหลัง (หมายเหตุ : ใช้บล็อก เพื่อกำหนดเหตุการณ์) 3. เพิ่มเสียงให้ตัวละครโดยใช้เครื่องมือบันทึกเสียง 3.1 คลิกแท็บ Sound 3.2 คลิกปุ่ม Record 3.3 คลิกปุ่ม Record เพื่อเริ่มบันทึกเสียง 3.4 คลิกปุ่ม Stop Record เพื่อสิ้นสุดการบันทึกเสียง 3.5 คลิกปุ่ม Play เพื่อฟังเสียงที่บันทึกไว้ 3.6 คลิกปุ่ม Save เพื่อบันทึกไฟล์เสียงที่อัดไว้ 2 3 4 5 6 1
25 4. สร้างโปรเจกต์ใหม่ ชื่อ Activity Sound และเขียนสคริปต์ แล้วตอบคำตอบต่อไปนี้ 5. เขียนสคริปต์แล้วบันทึกผลลัพธ์ สคริปต์ ผลลัพธ์ ผลลัพธ์ที่ได้ คือ เพลง .................................................................................. ..................................................................................................................... ..................................................................................................................... เขียนโน้ตดนตรีของท่อนเพลงดังกล่าว ........................................................ ..................................................................................................................... ..................................................................................................................... ..................................................................................................................... ..................................................................................................................... ..................................................................................................................... ..................................................................................................................... ปรับปรุงสคริปต์ เพื่อให้จังหวะดนตรีสมบูรณ์ขึ้น เกณฑ์การให้คะแนน คะแนนเต็ม 10 คะแนน ได้คะแนน คะแนน ทำได้ 8 คะแนน ผ่านเกณฑ์การประเมิน
26 ใบความรู้ที่ 3.2 การเขียนโค้ด Coding การเขียนโค้ด หรือ Coding ใน scratch จะเป็นการเขียนโปรแกรมแบบ OOP (Object oriented Programming) Aannsinuan (Block) โค้ดคำสั่งที่เป็นเหมือน Object (วัตถุ) มาวางตาม คำสั่งที่ต้องการใช้ งาน โดยที่เราไม่ต้องเขียนโค้ด ด้วยข้อความ การทำงานของโค้ด จะทำจากบล็อกบนสุดที่ เป็นบล็อกเปิดเริ่มต้น ที่เรียกว่า Hat Block จากนั้น ก็จะทำงานบล็อกอื่นๆ ที่วางต่อกันลงไปตามลำดับ จนจบการทำงานที่บล็อก ล่างสุด หลักการทำภาพเคลื่อนไหว ภาพเคลื่อนไหว หมายถึง ภาพกราฟิกที่มีการเคลื่อนไหวเพื่อแสดงขั้นตอนหรือปรากฏการณ์ต่างๆ ที่ เกิดขึ้นอย่าง ต่อเนื่อง โดยการนำภาพนิ่งมาเรียงกันเป็นชุดๆ เพื่อแสดงบนจอทีละภาพด้วยความเร็วสูง ในการ ฉายภาพแต่ละภาพจะ ต่อเนื่องกันทำให้ดูเหมือนว่าเคลื่อนไหวจริง หรือ ภาพเคลื่อนไหว หมายถึง ภาพเคลื่อนไหว ที่สร้างขึ้นโดยการนำภาพนิ่งหลายๆ ภาพมาฉายต่อเนื่องกันด้วยความเร็วสูง ทำให้เกิดภาพลวง ตาของการเคลื่อนไหว โดย ปกติความเร็วของภาพเคลื่อนไหวจะฉายด้วยความเร็วที่ต่างกัน ขึ้นอยู่กับชนิดของ การแสดงผล (Output) โดยถ้าฉายเป็น ภาพยนตร์จะฉายด้วยความเร็ว 24 เฟรมต่อวินาที ถ้าถ่ายทอดในระบบ PAL จะฉายด้วยความเร็ว 25 เฟรมต่อวินาที แต่ ในระบบ NTSC จะฉายด้วยความเร็ว 29.97 หรือ 30 เฟรมต่อ วินาที ประเภทของภาพเคลื่อนไหว ภาพเคลื่อนไหวแบ่งได้เป็น 2 ประเภทคือ ❖ 2D Animation ภาพเคลื่อนไหวแบบ 2 มิติ มองเห็นได้ทั้งความสูงและความกว้าง การสร้างจะไม่ สลับซับซ้อน มากนัก โดยนำตัวละครหลักที่มีกิริยาท่าทางแตกต่างกัน นำภาพมาแสดงเรียงต่อกันแบบ เฟรมต่อเฟรม ทำให้ มองเป็นภาพเคลื่อนไหว ซึ่งเราจะเห็นจากการ์ตูนหรือภาพเคลื่อนไหวแบบ GIF Animation ในโลกอินเทอร์เน็ต หรือภาพสติกเกอร์ที่ใช้กันใน LINE, Facebook หรือโปรแกรมแชท ทั่วไป ❖ 3D Animation คือ ภาพเคลื่อนไหวแบบ 3 มิติ ตัวละครจะมีมิติที่เห็นได้แบบ 360 องศา มีความลึก ความกว้าง และความสูง ภาพที่เห็นจะมีความสมจริงของตัวละครมากที่สุด เหมือนเราดูภาพยนตร์หรือ การ์ตูนทั่วไป เป็นต้น
27 ตัวอย่างภาพเคลื่อนไหว ภาพเคลื่อนไหวใน Scratch เราจะใช้ Sprite (ตัวละคร) กำหนด Costumes (คอ สตูม) ที่แสดงกิริยาท่าทาง แตกต่างกันมาแสดงสลับกัน โดยการกำหนด Code (โค้ด) ให้สลับตัวละครในแต่ละช่วง ตัวอย่างการทำให้ เจ้าแมว อาจจะใช้คอสตูม 4 ตัวให้แสดงสลับกัน เป็นต้น
28 สร้างภาพเคลื่อนไหว ในตัวอย่างนี้เรามาลองสร้างภาพเคลื่อนไหวอย่างง่ายๆ โดยแทรกตัวละครแมวแล้วให้เดินตรงไปทาง ข้างหน้า และส่งเสียงร้อง “เหมียว” ก็จะใส่โค้ดลงไปตามลำดับดังนี้ ตัวละคร : Sprite บล็อก : Block เหตุการณ์ : Event Cat (แมว) เมื่อคลิกปุ่ม Go หรือคลิกที่บล็อก ให้เคลื่อนที่ (Move) ไป 10 ก้าว ให้ส่งเสียง (Play Sound) แมวร้องจน จบ เลือกตัว ละครที่จะใส่ โค้ด 1 3 วางบล็อก เคลื่อนที่ 2 วางโค้ด เมื่อคลิก 4 วางบล็อก เล่นเสียง 5 คลิกปุ่ม Go ทดสอบผลลัพธ์
29 เพิ่มโค้ดให้เดินหลายๆ รอบ จากตัวอย่างหัวข้อที่ผ่านมา แมวจะเดิน 10 ก้าว ส่งเสียงร้อง 1 ครั้งแล้วหยุด ถ้าเราคลิกที่กลุ่มโค้ด หรือคลิกปุ่ม Go เจ้าแมวก็จะเดินต่ออีกครั้ง แต่ถ้าคุณต้องการให้แมวเดินต่อเนื่องไป 5 รอบ เพื่อให้ดูเหมือนแมว เดินไปจริงๆ ก็ต้อง เพิ่มโค้ดในกลุ่ม Control (ควบคุม) โดยใช้บล็อก repeat (ทำ) ซึ่งจะเพิ่มบล็อกทำซ้ำแล้ว ย้ายกลุ่มเดินของแมวมาไว้ ในบล็อกทําซ้ำได้ดังนี้ การสลับคอสตูมของตัวละคร (sprite) หลังจากที่ทำให้เจ้าแมวเดินได้แล้ว ต่อไปก็จะทำให้เจ้าแมวสลับกิริยาการวิ่ง ด้วยการสลับไปยังคอสตูม ตัวอื่น นั่น หมายถึงว่าตัวละครของเราต้องมีคอสตูมมากกว่า 1 ตัว เพื่อสลับกันแสดงบนเวทีได้ ดังตัวอย่างตัว ละคร Cat เริ่มต้นมี คอสตูม 2 ตัว แต่เราได้สร้างเพิ่มอีก 2 ตัว เพื่อให้การวิ่งมีท่าทางแตกต่างกัน ซึ่งจะทำได้ ดังนี้
30 o จากตัวละครแมวจะมีคอสตูมอยู่ 2 ตัว เราจะใส่โค้ดให้สลับแสดงตัวละครให้เหมือนกับการวิ่ง บล็อก : โค้ด การทำงาน ให้แสดงคอสตูมตัวถัดไป ถ้าสคริปต์มีหลายคอสตูม ให้สลับไปยังคอสตูมตัวที่เลือก แต่เราต้องเตรียมคอสตูมไว้หลายๆ ตัว อาจจะเป็นตัวละครเดียวกันหลายท่าทาง หรือสลับไปยังคอสตูมของ ตัวละครอื่นก็ได้เช่นเดียวกัน o ในตัวอย่างนี้เราจะเพิ่มได้ 2 บล็อก คือ Wait 1 Seconds (รอ 1 วินาที) ก่อนเดิน 10 ก้าว และส่งเสียง ร้อง จากนั้นก็จะทำโค้ด Next Costume เพื่อแสดงคอสตูมตัวที่ 2 2 คลิกแท็บ Costumes เพื่อตรวจสอบหรือสร้างคอสตูม 1 เลือกตัวละคร คอสตูมตัวที่ 1 คอสตูมตัวที่ 2
31 การเคลื่อนที่ตามทิศทาง (Direction) การเคลื่อนที่ไปได้ในทิศทางต่างๆ ของตัวละคร เมื่อเราสั่งให้เคลื่อนไหว (Motion) เช่น ให้เดินไป 10 ก้าว จะเดิน ไปทางไหน ซึ่งจะอยู่ที่ตำแหน่งของ Direction (ทิศทาง) โดยปกติจะเป็นที่ตำแหน่ง 90 องศาคือ เดินไปทางขวาของเวที ถ้าจะให้เดินไปทางซ้ายก็ต้องตั้งค่าไว้ที่ ต้องตั้งค่าไว้ที่ 90 องศา แต่การเคลื่อนที่นี้จะไม่ เกี่ยวข้องกับลักษณะการหันหน้าของตัวละคร ตัว ละครบางตัวหันหน้าไปทางขวา ถ้ากำหนดทิศทาง 90 องศา ตัวละครก็จะเดินถอยหลัง เป็นต้น o การหมุนของตัวละคร ถ้าค่าเป็นบวกจะเป็นการหมุนตามเข็มนาฬิกา ถ้าค่าเป็นค่าลบจะหมุนทวนเข็ม นาฬิกา เช่น 180 มีทิศทางการเคลื่อนที่ไปด้านล่างเหมือนกับทิศ 180 องศา แต่เป็นการหมุนทวนเข็ม โดยสังเกตได้ จากลูกศรบนวงกลมองศาของ Direction o ค่าบวก เช่น 90 องศา จะมีทิศทางการเคลื่อนที่ไปทางขวา o ค่า 90 องศา จะมีทิศทางการเคลื่อนที่ไปทางซ้าย o 180 องศา จะมีทิศทางการเคลื่อนที่ไปด้านล่าง ส่วน 0 องศาคือ ทิศทางด้านบน 195 การหัน (Turn) ไปตามองศาที่กำหนด นอกจากการกำหนดทิศทางด้วยบล็อก point in direction แล้ว เรายังกำหนดให้ตัวละครหมุนไปตาม องศาเป็น วงกลมได้ โดยกำหนดให้หมุนทีละกี่องศา และเลือกให้หมุนวนซ้ายหรือวนขวาได้ ดังตัวอย่างนี้เราจะ กำหนดโค้ดให้กับตัว ละคร นักที่เบสบอลตีไปที่ลูกเบสบอลที่กำลังหมุน โดยใช้บล็อก turn 15 degrees บล็อก : โค้ด การทำงาน หมุนไปทางขวาครั้งละ 15 องศา หรือใส่ค่าองศาลงไป หมุนไปทางซ้ายครั้งละ 15 องศา หรือใส่ค่าองศาลงไป 1. เพิ่มตัวละคร Baseball 2. เพิ่มตัวละคร Batter เข้ามาในโปรเจ็กต์ 3. คลิกเลือกตัวละครลูกเบสบอล 3.1 วางบล็อก When Click (เมื่อคลิก) 3.2 วางบล็อก Forever (วนซ้ำตลอด) 3.3 วางบล็อก Turn (หัน 15 องศา) 1 3 4
32 4. แล้วคลิกรันโค้ด จะเห็นลูกเบสบอลหมุนวน ขวาโดยไม่หยุด จนกว่าจะคลิกปุ่ม Stop 5. คลิกเลือกตัวละคร Batter เพื่อนำ มาแสดงร่วมกับลูกเบสบอล 6. แล้ววางบล็อกโค้ด 6.1 วางบล็อกโค้ด when click 6.2 วางบล็อก think… แล้วพิมพ์ข้อความ แบบคิดลงไป 6.3 วางบล็อก Wait 1 seconds ให้หยุดรอ 1 วินาทีก่อนรันบล็อกถัดไป 6.4 วางบล็อก switch costume to <คอสตูม> ของตัวละคร Batter ในท่าตีลูกเบสบอล 7. คลิกปุ่ม Go รันโค้ดทั้งหมด (ของทั้ง 2 ตัวละคร) การเคลื่อนที่แบบสุ่ม (Random Position) การสร้างการเคลื่อนที่แบบสุ่มคือ การให้ตัวละครเคลื่อนที่ ไปยังตำแหน่งต่างๆ ในพื้นที่เวที เช่น วิ่งขึ้น วิ่งลง วิ่งไปซ้าย ไปขวา ไปมา แต่เคลื่อนที่ไปได้ในพื้นที่ 480 x 360 ของเวที (Stage) บน ตำแหน่ง X และ y วิธีตรวจสอบการเคลื่อนไหวในตำแหน่ง x, y บนเวที ให้คุณ เลือกฉากหลัง (Backdrop) เป็นรูปตาราง x, y เพื่อทำความเข้าใจ กับตำแหน่ง จากนั้นจึงเลือกวางตัวละคร หรือสั่งให้ตัวละคร เคลื่อนที่ ไปยังตำแหน่งที่ต้องการได้ง่ายขึ้น จะมีให้เลือก 3 ภาพ o Xy-grid ช่องตาราง x, y ช่องละ 100 พิกเซล o Xy-grid-20px ช่องตาราง x, y ช่องละ 20 พิกเซล o Xy-grid-30px ช่องตาราง x, y ช่องละ 30 พิกเซล 2 5 6 7 คลิกเลือกฉากหลัง 1
33 ตาราง X, Y 20px ตาราง X, Y 30px 2 เลือกฉากหลังชื่อ Xy-grid
34 การเคลื่อนที่แบบเหิน (glide) เป็นการเคลื่อนไหวของตัวละครที่ดูสวยงาม นุ่มนวลกว่าการสั่งให้กระโดดไปยังตำแหน่ง X และ Y ด้วย คำสั่ง go to x, y เราจะนำบล็อก มาสร้างการเคลื่อนไหวร่วมกับคำสั่ง point to direction ให้ ไปในทิศทางที่ต้องการ ดังตัวอย่างเราจะให้ตัวละคร “ค้างคาว” บินไปทางที่ตำแหน่ง 90 องศาช้าๆ ก็ทำได้ดังนี้ บล็อก : โค้ด การทำงาน ให้ตัวละครหันไปทางขวา 90 องศา ให้ตัวละครเหินกี่วินาที ไปยังตำแหน่ง x และ y ที่ระบุ o ในตัวอย่างจะเริ่มต้นด้วยบล็อก When click และใช้บล็อก repeat ในกลุ่ม Control เพื่อให้ทำซ้ำ 4 รอบ การกำหนดให้ตัวละครเคลื่อนที่ไปรอบเวที นอกจากการเคลื่อนที่ของตัวละครที่กระโดดไปยังตำแหน่ง x, y และการเหินไปยังตำแหน่ง x, y แล้ว การเคลื่อนที่ของตัวละครอีกแบบหนึ่งคือ การเคลื่อนที่ไปทั่วบริเวณเวที เรียกว่า วนไปรอบๆ เวที o จะใช้บล็อก ให้เคลื่อนที่ตัวละคร แบบสุ่ม ดังตัวอย่างเราจะให้ “ปลา” ว่ายไป มารอบๆ เวที o เมื่อตัวละครไปถึงขอบเวทีก็จะหลุดขอบเวที ไปบ้าง ให้ใช้บล็อก (ถ้าชนขอบให้ สะท้อนกลับ) เพื่อให้ตัวละครอยู่ในเวทีได้ ให้วนซ้ำ 4 รอบ
35 การเคลื่อนไหวไปตามตัวชี้เมาส์ การเคลื่อนไหวของตัวละครอีกแบบหนึ่งคือ การเคลื่อนไหวตามตัวชี้เมาส์ (Mouse pointer) หรือตาม ลูกศรตัวชี้เมาส์ เมื่อเราเลื่อนเมาส์ไปชี้ที่ไหน ตัวละครที่เรากำหนดไว้ก็เลื่อนตามไปยังตำแหน่งต่างๆ บนเวที จะ มีอยู่ 3บล็อก ที่ใช้กำหนดการเคลื่อนไหวของตัวละครกับเมาส์พอยน์เตอร์ บล็อก : โค้ด การทำงาน ให้ตัวละครเคลื่อนที่ไปยังตำแหน่งเมาส์พอยน์เตอร์ ให้ตัวละครหันไปตามเมาส์พอยน์เตอร์ ให้ตัวละครเหินเคลื่อนที่ไปตามเมาส์พอยน์เตอร์ If on edge, bounce : เมื่อชนขอบเวทีให้เด้งกลับ การสร้างการเคลื่อนที่แบบกลุ่ม random position (ดังตัวอย่างที่ผ่านมา) เมื่อตัวละครเคลื่อนที่ไปถึง ขอบเวทีก็จะเลื่อนไปจนเกือบตกขอบ เราจำเป็นต้องเพิ่มโค้ด เพื่อให้ตัวละครสะท้อนกลับเมื่อแตะกับ ขอบเวที ดังตัวอย่างสร้างการเคลื่อนไหวให้แมลงเต่าทองวิ่งไปมารอบๆ เวที เมื่อวิ่งไปขอบเวทีก็จะสะท้อนกลับ เข้ามาในพื้นที่เวที บล็อก : โค้ด การทำงาน ให้วนรอบซ้ำตลอด เคลื่อนที่ไปยังตำแหน่งสุ่มรอบๆ เวที ถ้าตัวละครชนขอบให้สะท้อนกลับ ให้หยุดรอก่อนการเคลื่อนที่แต่ละรอบ เมื่อรันโค้ดตัวละครจะวิ่งรอบเวที ถ้าชนขอบก็จะเด้งกลับมาอีกด้าน การเคลื่อนที่แบบสุ่ม และถ้าชนขอบ จะสัมพันธ์ การหมุนทิศทางของตัวละครด้วย ฉะนั้นตัว ละครบางตัวจะดูเหมือนกลับด้านกลับหัวด้วย
36 การเคลื่อนที่ด้วยการกดปุ่มบนแป้นพิมพ์ การเคลื่อนที่หรือเคลื่อนไหวตัวละคร นอกจากการเคลื่อนที่ด้วยบล็อกคำสั่งต่างๆ ที่ผ่านมา เรายัง กำหนดให้ เคลื่อนไหวด้วยการกดปุ่มต่างๆ บนแป้นพิมพ์ได้ เช่น เราอาจจะสร้างเกมขึ้นมา แล้วให้ผู้เล่นกดปุ่ม ต่าง เพื่อให้ตัวละครเคลื่อนไหวเดินไปมาบนเวที ซึ่งเราจะใช้บล็อก เลือกปุ่มบนแป้นพิมพ์ที่จะ นำมาใช้ควบคุมการเคลื่อนที่ของตัวละคร การเคลื่อนที่และปรับขนาด (Size) การสร้างภาพเคลื่อนไหวแบบปรับขนาดตัวละคร เช่น เมื่อตัวละครอยู่ไกลๆ มีขนาดเล็ก เมื่อเคลื่อน ที่มาใกล้ให้ตัว ละครมีขนาดใหญ่ขึ้น เหมือนการมองด้วยสายตาปกติ ดังตัวอย่างเราจะใช้บล็อกโค้ด 3 บล็อก ดังนี้ บล็อก : โค้ด การทำงาน กำหนดขนาดตัวละครตามค่า % จากขนาดปกติ 100% ให้ตัวละครเคลื่อนที่ไปยังตำแหน่ง x, y ให้ตัวละครเหินเคลื่อนที่ไปตามตำแหน่ง x, y
37 o ในตัวอย่างเราจะให้ตัวละครหุ่นยนต์เดินมาจากด้านใน โดยกำหนดขนาดเริ่มต้นที่ 50% แล้วให้เดินมา ใน ตำแหน่งที่กำหนดในบล็อก go to x y ที่กำหนด แต่การเดินไปตำแหน่ง x, y จะเดินเร็วและไม่ นุ่มนวล ก็จะ ใช้บล็อก glide to X คือ ให้เห็นหรือเคลื่อนที่ช้าๆ ไปยังตำแหน่ง x, y ที่ระบุ การกำหนด ตำแหน่งง่ายๆ คือ ให้เลื่อนตัวละครไปวางในจุดที่ต้องการ แล้วจึงลากบล็อก การเปลี่ยนฉากหลัง (Backdrop) เริ่มต้นการแสดงเราอาจจะเลือกฉากหลังแบบใดแบบหนึ่ง แต่พอเคลื่อนที่ไป หรือเดินไปให้เปลี่ยนฉาก หลังเป็น อีกแบบหนึ่ง ซึ่งจะทำได้ด้วยการเลือกบล็อก Switch backdrop to เปลี่ยนฉากหลังได้ แต่อาจจะใช้ หลังที่มีเหตุการณ์ อะไรเกิดขึ้น ซึ่งเราก็จะนำไปใส่ต่อจากบล็อกที่ต้องการได้ บล็อก : โค้ด การทำงาน เปลี่ยนฉากหลังเป็น แล้วเลือกชื่อฉากหลัง หรือเลือก switch backdrop to <ชื่อฉากหลัง> คุณต้อง เพิ่มฉากหลังเข้ามาตามจำนวนที่ต้องการใช้งาน เพื่อสลับการ แสดง ฉากหลังได้จะเลือกการเปลี่ยนได้ 2 แบบคือ เปลี่ยนแล้วทำงานอื่นต่อ หรือ เปลี่ยนแล้วหยุดรอสักครู่
38 แบบฝึกทักษะที่ 2 เดินเล่นชมวิวสวย คำชี้แจง ให้นักเรียนปฏิบัติ ดังนี้ (คะแนนเต็ม 10 คะแนน) 1. สร้างโปรเจกต์ใหม่ 2. เพิ่มฉากของเวที ดังนี้ 1 คลิกที่เวที (Stage) 2 คลิกแท็บฉาก (Backdrops) 3. คลิกไอคอน จะปรากฏหน้าต่าง Choose a Backdrop ซึ่งมีTheme ภาพกลุ่มต่างๆ ในที่นี้ ให้เลือกภาพ Party ดังนี้ 1 2
39 4. ลบฉาก Backdrop1 โดยคลิกที่ปุ่มดังภาพ สิ่งที่ปรากฏคือ ................................................ 5. เพิ่มฉาก night city ด้วยวิธีการเช่นเดียวกับข้อ 2 และ 3 ที่ผ่านมา 6. เขียนสคริปต์ให้กับเวที ดังนี้ เพิ่มสคริปต์ให้กับเวที ดังนี้ ผลลัพธ์ได้ คือ ........................................................................................................ ........................................................................................................ ........................................................................................................ ........................................................................................................ ................................. ผลลัพธ์ได้ คือ ........................................................................................................ ........................................................................................................ ........................................................................................................ ........................................................................................................ .................................
40 7. เพิ่มฉากให้กับเวทีอีก 2 ฉาก ตามจินตนาการของนักเรียน 8. เขียนสคริปต์ให้ตัวละครแมว โดยคลิกปุ่มบล็อก Motion เพิ่มบล็อก คลิก สังเกตและบันทึกผลลัพธ์ 9. ทดลองเปลี่ยนทิศทางการหมุนของตัวละคร ดังนี้ 9.1 คลิกที่ Sprite 1 จะปรากฏหน้าต่างรายละเอียดของตัวละคร 9.2 หัวข้อ Direction เป็นรูปแบบการหมุนที่มี 3 ลักษณะ จากสคริปต์ในข้อ ที่ 8 ให้ทดลองเปลี่ยนรูปแบบการหมุน จากนั้นคลิกปุ่ม สังเกตผลลัพธ์ แล้ววงกลมล้อมรูปตัว ละครที่เป็นผลลัพธ์หลังชนขอบเวที รูปแบบการหมุน หลังจากชนขอบด้านขวา หลังจากชนขอบด้านซ้าย ปุ่ม ผลลัพธ์ได้ คือ ........................................................................................................ ........................................................................................................ ........................................................................................................ ........................................................................................................ .................................
41 ปุ่ม ปุ่ม 10. คลิกที่ เพื่อหยุดการทำงาน เลือกการหมุนแบบ แล้วหมุนเส้นสีน้ำเงิน 1 ที่ปรากฏ ข้อมูลของตัวละคร (Sprite1) ให้ direction เท่ากับ 45 จากนั้นคลิก สังเกตผลลัพธ์ 11. หมุนเส้นสีน้ำเงินปรากฏที่ข้อมูลของตัวละครที่ถูกเลือก Sprite1 เพื่อกำหนดทิศทางการเคลื่อนที่ ของตัวละคร direction ดังทิศทางที่ระบุในข้อ 11.1 และ 11.2 จากนั้นให้วาดเส้นทิศทางของตัว ละครตามที่ปรากฏผลลัพธ์ ทิศทาง ผลลัพธ์ 11.1 -45 องศา 11.2 75 องศา 1 -90 90 0 การกำหนดทิศทาง 0 องศา จะมีทิศทางการเคลื่อนที่ไปด้านบน 90 องศา จะมีทิศทางการเคลื่อนที่ไปทางขวา -90 องศา จะมีทิศทางการเคลื่อนที่ไปทางซ้าย
42 12. เขียนสคริปต์ให้แมวเคลื่อนที่ไปยังตำแหน่งต่างๆ ให้มีความน่าสนใจ โดยมีข้อกำหนดดังนี้ - ใช้คำสั่งในกลุ่มบล็อก Motion และกลุ่มบล็อก Control - เปลี่ยนภาพพื้นหลัง - กำหนดเวลาเสร็จภายใน 10 นาที 13. บันทึกโปรเจกต์ใหม่ ชื่อ MyMotion เกณฑ์การให้คะแนน คะแนนเต็ม 10 คะแนน ได้คะแนน คะแนน ทำได้ 8 คะแนน ผ่านเกณฑ์การประเมิน
43 ใบความรู้ที่ 3 การควบคุมการทำงาน Events & Control การรับโค้ดของ scratch โดยปกติจะรับจาก บล็อกบนสุดก่อนแล้วไล่ลงมาบล็อกด้านล่างสุดต่อเนื่องจน จบหรือหมดบล็อกที่ใส่ไว้ แต่เราสามารถ สร้าง Event (เหตุการณ์) ให้เลือกเริ่มทำงานในจุด ที่ต้องการได้ เช่น เมื่อเปลี่ยนตัวละคร ให้เปลี่ยน เสียงร้อง หรือเปลี่ยนฉากหลัง และการควบคุม (Control) ใช้คำสั่งต่างๆ ภายใต้ เงื่อนไขที่กำหนด เช่น เดินไป 10 ก้าว ถ้าแตะโดนลูกบอลให้หยุดหรือบินไปถึงตำแหน่ง x, y ที่กำหนดให้หายตัว ไป เป็นต้น
44 Events : เหตุการณ์ การเขียนโปรแกรมเพื่อสนองต่อเหตุการณ์ ที่เกิดขึ้นดังที่ผ่านมา เราได้ใช้บล็อก มาหลายครั้ง แล้วแทบจะเป็นบล็อกเริ่มต้นของโค้ดทั้งหมด ส่วนบล็อกอื่นๆ ในกลุ่ม Events ก็จะมีการใช้งานดังนี้ (จะอธิบาย รายละเอียดการใช้งาน ส่วนการประยุกต์ใช้งาน เราจะนำไปใช้งานร่วมกับ บล็อกกลุ่มอื่นๆ ทั้งหมด) บล็อกควบคุมการทำงานของโปรแกรม การใช้งาน Scratch พื้นฐาน เป็นการเขียนโปรแกรมตัวเล็กๆ สร้างภาพเคลื่อนไหวกับตัวละครที่ไม่ ซับซ้อนมาก เรา สามารถวางบล็อกการทำงานต่างๆ ให้แสดงต่อเนื่องแล้วทำงานจากบนลงล่างไปตามลำดับได้ แต่ถ้าต้องการให้ทำงานตาม เงื่อนไข ให้หยุดรอ ให้ทำซ้ำ เราต้องใช้คำสั่งในกลุ่ม Control มาควบคุมการทำงาน เพิ่ม ซึ่งจะเป็นการทำงานเชิงตรรกะ ต้องนำข้อมูลมาเปรียบเทียบและตัดสินใจในการทำงาน เช่น ถ้าเงื่อนไข เป็นจริงให้ทำอะไร เงื่อนไขเป็นเท็จให้ทำอะไร การทำงานต่างๆ ของบล็อกกลุ่ม Control บางตัว จะต้องใช้บล็อกในกลุ่ม Operators และกลุ่ม Sensing มาใช้งาน ร่วมด้วย เพื่อช่วยในการสร้างเงื่อนไขเปรียบเทียบข้อมูลว่าจริงหรือเท็จ สังเกตจากบล็อกจะ มีเครื่องหมายหกเหลี่ยม
45
46 Wait : หน่วงเวลา หรือให้รอก่อนทำงานอื่นต่อ โดยปกติการรันบล็อกโค้ดจะรันต่อเนื่องจากบนลงล่างตามลำดับ แต่ถ้าเรารันถึงบล็อกไหนแล้วหยุดรอ ก่อน ก็ให้เพิ่มบล็อก Wait ได้แล้วกำหนดจำนวนวินาทีลงไป ยิ่งใส่ค่าจำนวนวินาทีมากก็จะหยุดรอมานานมาก ขึ้น เพื่อให้การแสดงของตัวละครจะหยุดหรือทำอย่างอื่นช้าลง o ดังตัวอย่างนี้เรากำหนดโค้ดให้ตัวละคร Cat Flying-a บินไป 20 steps และแสดงข้อความ “I can fly” แล้วหยุดรอ 1 วินาทีจากนั้นค่อยรันบล็อกเปลี่ยนคอสตูมตัวละครแมวเป็น Cat Flying-b ตัวอย่างการเขียนโปรแกรม และควบคุมด้วยบล็อกกลุ่ม Control
47 Wait Until : ให้หยุดรอจนกระทั่งตรงกับเงื่อนไข นอกเหนือจากการหยุดรอตามวินาทีที่กำหนดแล้ว เราสามารถให้หยุดรอตามเงื่อนไขที่กำหนดได้ ถ้า เงื่อนไขเป็นจริงให้ทำต่อไป แต่ถ้าเงื่อนไขเป็นเท็จก็จะหยุดรออยู่ก่อน จนกว่าจะพบเงื่อนไขเป็นจริงจึงจะทำ คำสั่งภายใต้บล็อก ซึ่งการกำหนดเงื่อนไขก็จะใช้บล็อกในกลุ่ม Operators มาใส่เงื่อนไข o ดังตัวอย่างนี้เราจะสร้างการเคลื่อนไหวให้กับตัวละครลิงน้อย ซึ่งมีคอสตูมอยู่ทั้งหมด 3 ตัว จะแสดง กราฟิกและท่าทางต่างกัน จะให้แสดงคอสตูมต่อเนื่อง แต่ใช้ wait until มาช่วยหยุดรอถ้าแสดงมาถึง คอสตูม ตัวที่ 3 แล้วให้เปลี่ยนฉากหลังรูปหัวใจสีม่วง (backdrop) แล้วจบโปรแกรมด้วยคำสั่ง stop all repeat : การทำงานแบบวน (Loop) การควบคุมลำดับการทำงานแบบวนซ้ำ เป็นการทำงานภายใต้บล็อกที่อยู่ภายในบล็อกทำซ้ำ นัก โปรแกรมเมอร์ มักจะเรียกว่า “การวนลูป (Loop)” โดยทำหลายๆ ครั้ง เช่น ให้ตัวละครแมวเดินไปทีละ 10 ก้าว จำนวน 5 ครั้ง เมื่อครบ รอบการทำซ้ำก็จะทำคำสั่งอื่นต่อจากบล็อก repeat หรือออกจากลูปการทำซ้ำ และส่งเสียงร้อง จากนั้นก็พูดว่า * เดินมา ครบ 5 รอบแล้วนะ”
48 กำหนดจำนวนรอบที่จะทำซ้ำ วางบล็อกต่อหลังจบรอบทำซ้ำแล้ว วางบล็อกโค้ดที่จะทำซ้ำ บล็อกโค้ดที่จะทำต่อหลังทำซ้ำ จนครบจำนวนรอบที่ระบุ
49 Forever : วนซ้ำตลอด Forever คือ การควบคุมให้โปรแกรมมีการทำงานวนซ้ำบล็อกภายใต้ forever ไม่หยุดจนกว่าจะเจอคำสั่งหยุด หรือคลิกปุ่ม stop o ดังตัวอย่าง เราจะกำหนดโค้ดให้นกบินโดยใช้บล็อก glide (เงิน) เคลื่อนที่ไปรอบๆ เวที โดยระบุ ตำแหน่งแบบ random position (ตำแหน่งสุ่ม) และส่งเสียงร้อง เมื่อคลิกปุ่ม Go (ไป) นกก็จะเคลื่อนที่ ไปรอบๆ ไม่มีหยุด จนกว่าเราจะคลิกปุ่ม Stop (หยุด) repeat until : ทําซ้ำจนเจอเงื่อนไขที่เป็นจริง repeat until (ทำซ้ำจน) คือ ให้วนทำคำสั่งภายในบล็อก จนกว่าเงื่อนไขที่กำหนดจะเป็นจริง จะหยุด ทำงานที่อยู่ภายในบล็อก แล้วไปทำคำสั่งใต้บล็อกต่อ โดยที่เราต้องกำหนดเงื่อนไขจากบล็อกกลุ่ม Operators ดังตัวอย่างนี้ เราจะให้เจ้าแมววิ่งทีละ 10 ก้าวจนกระทั่งไปแตะ (ชน) ตัวละครรถอาหาร (Food Truck) ด้วย การใช้บล็อก ในกลุ่ม Sensing มาช่วยตรวจจับการชน
50 if : ให้ทำงานตามเงื่อนไขที่กำหนด การควบคุมลำดับการทำงาน (Control Flow) จากการทำงานของโค้ดจะเรียงลำดับจากบล็อกบนสุด ลงไปจนถึง บล็อกล่างสุด แต่การทำงานบางอย่างที่มีความซับซ้อน อาจจะมีการเพิ่มการควบคุมลำดับการ ทำงานให้ตรงกับความ ต้องการได้ ด้วยการเพิ่ม Condition (เงื่อนไข) เชิงตรรกะให้โปรแกรมตัดสินใจตาม เงื่อนไขในการดำเนินการกับเหตุการณ์ นั้นๆ เพื่อให้มีการตรวจสอบ if (ถ้า) เงื่อนไขเป็นจริงให้ทำอะไร หรือถ้า เงื่อนไขเป็นเท็จให้ทำอะไร เป็นต้น if-then : ถ้าเงื่อนไขเป็นจริงแล้วทำอะไร if-then (ถ้า-แล้ว) จะใช้ในการควบคุมการทำงานแบบ 2 ทางเลือกคือ ถ้าเงื่อนไขเป็นจริง (True) ให้ทำ คำสั่งภายในบล็อก if-then แต่ถ้าเงื่อนไขเป็นเท็จ (False) จะข้ามไปทำคำสั่งที่อยู่ ด้านล่างบล็อก if-then โดยดู จาก Flow Chart แผนผังลำดับการทำงานที่เป็นมาตรฐานของการ เขียนโปรแกรม ไม่ว่าเราจะใช้ภาษาใดเขียน การทำงานของ IF ก็จะเป็นลักษณะนี้ o ใน if-then ตัวอย่างนี้เราจะใช้บล็อกการแตะโดน ตัวเมาส์พอยน์เตอร์เป็นเงื่อนไขจริงของ if ให้ตัว ละคร หยุดเคลื่อนไหวจากคำสั่ง next costume เมื่อโดนเมาส์ พอยน์เตอร์ จากนั้นให้หยุดรอด้วยโค้ด wait until ใส่เงื่อนไข ให้ทำงานต่อเมื่อมีการกดปุ่มสเปซบาร์ (เคาะวรรค) เป็นบล็อกจากกลุ่ม Sensing (การตรวจจับ) Start Condition (เงื่อนไข) Statement ชุดคำสั่ง Stop เมื่อกดปุ่มสเปซบาร์ ตัวละครจะเคลื่อนไหวต่อ Fale เท็จ True จริง