มาเรียน Canvas ผ่าน Pong game กัน
/ 4 min read
html , canvas , animation , javascript , pong game , drawing , game development , requestanimationframe
สามารถดู video ของหัวข้อนี้ก่อนได้ ดู video
มาเรียนรู้ canvas ผ่านการสร้าง Pong game กัน ว่า
- animation ที่เคลื่อนได้บน canvas ทำได้ยังไง
- ตำแหน่งบน canvas ดูยังไง
- เราทำอะไรบน canvas ได้บ้าง
Canvas คืออะไร ?
Ref: https://www.w3schools.com/html/html5_canvas.asp
Canvas เป็น feature ด้านกราฟฟิคที่เตรียมมาไว้ใน HTML5 ที่สามารถทำให้เรา “วาดภาพ” บน html ได้ (ตามชื่อของมันเลยคือ ผ้าใบที่วาดภาพได้)
วาดของบน Canvas ได้ยังไง ?
คำสั่ง Javascript นั้นสามารถ access เข้าถึง Canvas และสามารถวาดลงไปบน Canvas ได้ มันก็จะมีตั้งแต่
- วาดเส้น
- วาดวงกลม
- วาดสี่เหลี่ยม
- วาดเส้นโค้ง
- ลงตัวอักษร
- ลงสี
- ลงรูป
Animation ใน canvas เกิดขึ้นได้ยังไง ?
คำสั่งที่ทำให้เราสามารถวาดได้คือ requestAnimationFrame()
- canvas ฮิตมากสำหรับใช้คู่กับการทำ Animation (มันให้อารมณ์วาดการตูนบนแผ่นกระดาษแล้วซ้อน frame กัน)
- คำสั่ง
requestAnimationFrame()
คือคำสั่งสำหรับการทำ loop คำสั่งแบบ 60 fps (60 execute ใน 1 วินาที) - ดีกว่า setInterval ตรงที่มันจะ “ไม่” ทำงานเมื่อไม่อยู่ใน tab อื่น = ประหยัดการทำงานมากกว่า
มาลองทำ Pong game กัน
สิ่งที่เราจะทำ
- ปู canvas ออกมา
- สร้าง paddle (แผ่นตี pong game) และ ลูกปิงปองขึ้นมา
- สร้างให้ปิงปองและ cpu paddle เคลื่อนไหวได้ด้วย
requestAnimationFrame()
- สร้าง การชนของ paddle ออกมา เพื่อให้เกิดการเด้งกลับ
- ทำให้ paddle ตัวเองให้เคลื่อนไหวด้วย เมาส์
= เราก็จะได้ pong game หน้าตาแบบนี้ออกมา
เรามาเริ่มทำกันในแต่ละ step
สร้าง canvas และ selector ออกมาก่อน
สร้าง paddle (แผ่นตี pong game) และ ลูกปิงปองขึ้นมา
สร้างให้ปิงปองและ cpu paddle เคลื่อนไหวได้ด้วย requestAnimationFrame()
ทำให้ paddle ตัวเองให้เคลื่อนไหวด้วย เมาส์
ปกติ canvas ใช้ทำอะไรบ้าง
- Drawing Applications ใช้ทำพวก image editor, stecth pad (คล้ายๆกับพวก Microsoft Paint) ** พวก web app อะไรก็ตามที่ต้องอาศัยการจัดการ UI แบบ Custom = จะใช้พวก canvas นี่แหละ ช่วยได้
- Games อย่างที่เห็น เมื่อใช้ Canvas ผสมกับการ render animation = สามารถที่จะ render graphic ที่มี animation ได้ มันเลยกลายเป็น base ของการทำ game ได้
- Animations ใช้ทำพวก animation ร่วมกับ user input ได้ (เช่นเคสการเล่นกับเมาส์, การคลิก)
- Photo Manipulation ใช้ร่วมกับการจัดการภาพ ภาพมันสามารถนำมาแสดงผลบน canvas และ สามารถแทรก filter, ปรับสีและสามารถใช้ effect ร่วมกับภาพบน canvas ได้
อะไรก็ตามที่อาศัยการวาด, การทำ animation และการจัดการกับ Event ของ User = Canvas สามารถช่วยคุณได้
Related Post
- รู้จักรูปแบบ Authentication ระหว่าง Frontend และ Backendมี Video มี Github
เราจะพามาทำ Authentication กับการ Login กัน ว่ามีกี่วิธีที่สามารถทำได้ และสามารถทำได้ยังไงกันบ้าง ซึ่งจะพาทำกันตั้งแต่ฝั่งของ API Backend
- Rabbit MQ และการใช้ Message Queueมี Video
มาทำความรู้จักกับ Message Queue ว่ามันคืออะไร มีหลักการยังไงบ้าง และมาลองเล่นกันผ่าน software อย่าง RabbitMQ กัน
- มาลองทำ Upload file แต่ละเคสกันมี Video มี Github
มาลองทำ upload ไฟล์ โดยจะลองมาทำ upload แบบทั่วไป, ทำ progress upload, validate file และ ยกเลิกการ upload
- รู้จักกับ Auth0มี Video
มารู้จักกับ Auth0 Authentication platform ที่ช่วยทำให้พัฒนา application พร้อมระบบยืนยันตัวตนได้ง่ายขึ้น