สร้าง Online Game ด้วย Scratch และ NETPIE ตอนที่ 1

บทความนี้นับเป็นตอนที่หกแล้วสำหรับการใช้ Scratch (ย้อนไปศึกษาการใช้งาน Scratch ได้จาก [1],[2],[3],[4],[5]) เพื่อเรียนรู้การสร้างคอมพิวเตอร์โปรแกรม ในตอนนี้จะเพิ่มความซับซ้อนเข้าไปโดยการสร้างเกมส์เพื่อเล่นกับเพื่อนผ่านข่ายงานอินเตอร์เน็ต นอกจากนี้ยังได้เพิ่มตัวละครอีกตัวหนึ่งเข้ามาคือ NETPIE (https://netpie.io/) ท่านที่ยังไม่รู้จักกับ NETPIE ท่านสามารถดูภาพรวมได้จากวิดีโอข้างล่างนี้ครับ

ในตอนนี้ บทที่ให้กับ NETPIE คือเป็นตัวกลางคอยรับ-ส่งข้อมูลระหว่างผู้เล่นเกมส์ผ่านข่ายงานอินเตอร์เน็ต ดังภาพข้างล่าง

สร้างเกมส์

เราจะเลียนแบบ Acade Video Games เก่าแก่ของ Atari ซึ่งเป็นที่รู้จักกันทั่วไปคือ Pong (https://en.wikipedia.org/wiki/Pong)

กติกา

วิธีการเล่นเหมือนกับการเล่นปิงปองบนโต๊ะ ผู้เล่นสองฝ่ายจะใช้ Paddle หรือ ไม้ตี ตีลูกบอลล์ให้เด้งกลับไปยังแดนของฝ่ายตรงข้าม ฝ่ายใดที่ไม่สามารถตีถูกลูกบอลล์หรือปล่อยให้ลูกบอลล์ไปแตะถูกแถบสีแดงก็จะเป็นฝ่ายแพ้

ตัวละครในเกมส์

1. Paddle หรือ ไม้ตี โดยใช้ Paint Editor ของ Scratch สร้างรูปสี่เหลี่ยมผืนผ้าขึ้นมาดังรูป

2. Pong ball หรือ บอลล์

เราจะใช้ Sprite สอง Sprite ที่แตกต่างกัน โดย Sprite แรกนำเข้าจากรูปภาพที่ Scratch มีมาให้แล้ว ผมเลือกใช้ beach ball ดังภาพข้างล่าง

สำหรับ Sprite ที่สองจะใช้แสดงสถานะเมื่อผู้เล่นเป็น ผู้แพ้ เราสามารถใช้รูปภาพใด ๆ ก็ได้เพื่อสื่อในทำนองนี้ ผมเลือกใช้รูประเบิดซึ่ง download ได้จาก Internet และก็ตั้งชื่อให้เป็น "youlose"

3 Red Bar หรือ แถบสีแดง ผู้เล่นต้องคอยป้องกันไม่ให้ลูกปิงปองมาโดน สร้างด้วยวิธีการเดียวกับการสร้าง Paddle แต่ต้องกำหนดให้มีขนาดความยาวมากสักหน่อย

สร้างฉาก

หลังจากได้องค์ประกอบครบแล้ว ก็นำมาสร้างเป็นฉากสำหรับเกมส์บนเวทีของ Scratch ดังภาพข้างล่าง ในภาพมองไม่เห็น Pong Ball เพราะเอาวางไว้นอกเวที

การเคลื่อนไหว

ในเกมส์นี้มีสิ่งที่เคลื่อนไหวมีสองสิ่งคือ Paddle กับ Pong Ball โส่วน Pong Ball มีการเคลื่อนไหวซับซ้อนกว่าทั้งแนวตั้งและแนวดิ่ง และมีการกระเด้งเมื่อมีการกระทบกับกรอบของเวทีอีกด้วย

Paddle มีรูปแบบดังนี้

1. เลื่อนขึ้น 10 หน่วย ขึ้นเมื่อผู้เล่นกดแป้น Up Arrow

2. เลื่อนลง 10 หน่วยเมื่อผู้เล่นกดแป้น Down Arrow

3. ตำแหน่งของ Paddle ไว้ติดด้านขวาขอเวทีเสมอ

Pong Ball มีรูปแบบดังนี้

1. มีการเคลื่อนที่ครั้งละ 5 หน่วย

2. เด้งกลับเมื่อกระทบกับขอบของเวที สิ่งแรกที่ต้องกำหนดคือ "อะไรคือขอบเวที" ขอบเวทีในที่นี้คือตำแหน่งของ Pong Ball เมื่อ

ตำแหน่งในแนวนอน (x position) มากกว่า 200 หน่วย หรือ
ตำแหน่งในแนวตั้ง (y position) มีค่ามากกว่า 140 หน่วย หรือ น้อยกว่า -140 หน่วย

เมื่อ x position อยู่ในเงื่อนไขแล้วกิจกรรมที่ต้องทำ คือ

broadcast position และ direction
กำหนดสถานะของเกมส์เป็น "pause"
ซ่อนตัว
กำหนดตำแหน่งในนอนให้ไปอยู่ที่ 190 เพื่อเตรียมสำหรับการเคลื่อนทีต่อไป

เมื่อ y position อยู่ในเงื่อนไข กิจกรรมที่ต้องทำคือ กำหนดค่าตัวแปร direction ใหม่เพืีอให้การกระเด้ง

3. เมื่อกระทบกับ Paddle จะกำหนดค่าตัวแปร direction ใหม่เพื่อให้การเด้งของ Pong

4. เมื่อกระทบ Red Bar จะถือว่าผู้เล่นแพ้ และการกำหนดค่าสถานะของเกมส์เป็น "stop"

Direction คือทิศทางที่ตัวละครบนเวทีจะมุ่งหน้าไป มีหน่วยเป็น degree ดังภาพ

การกระเด้ง Bouncing อาจดูเหมือนยากแต่เราสามารถทำการคำนวณได้ง่ายมาก
ในกรณีที่ Pong Ball กระทบขอบเวทีด้านบนหรือด้านล่าง direction ใหม่หลังการกระทบจะคำนวณจากสูตร