ลองเขียนเกมส์งูด้วย Canvas

ตั้งแต่เป็น Frontend Developer ยังไม่เคยลองใช้ canvas เลยสักครั้ง พอจะลองก็ไม่รู้จะทำอะไรดี พอดีไปอ่านใน Doc Canvas API เขียนว่า canvas เอาไปทำอะไรได้บ้างอ่านเจอตรง game graphics ก็เลยคิดว่าทำเกมส์ละกัน เกมส์ไรดีละ เกมส์งูน่าจะพอทำได้

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing

เริ่มยังไงดี?

ออกแบบก่อนว่าเกมส์งูหน้าตาประมาณไหนมีองค์ประกอบอะไรบ้าง

หลังจากออกแบบคร่าวๆน่าจะมีประมาณนี้แหละ Game Space, Snake, Apple และ Score

จะเริ่ม Code ยังไงดี?

ไม่รู้อะไรเปิด doc(Basic usage) อ่านไว้ก่อน ซึ่งข้อมูลที่เราอยากรู้ก็คือ วิธีวาดสี่เหลี่ยมทำยังไง(เอาไว้ใช้วาด game space, snake, apple) และวิธีวาด Text ทำยังไง
มาดู code กันเลยดีกว่า

ถ้าเอา code ข้างบนไปรันเราจะได้ canvas ที่มีหน้าตาแบบนี้

ปล. canvas context ที่เราใช้นั้นเป็น global context สมมุติว่าเราทำการ fill style ให้เป็นสีเขียว (boardCtx.fillStyle = “green") เวลาเราวาดอะไรลงไปหลังจากนั้นมันจะเป็นสีเขียวทั้งหมด (ถ้าไม่เชื่อลอง comment code ตอน fill color ใน renderApple ดูสิ)

วาดภาพนิ่งได้แล้ว จะทำยังไงให้มันขยับได้ละ?

เหมือนเดิมครับ ไม่รู้จะเริ่มไงดี เปิด doc(Basic Animation) ก่อนเลย
หลักการของการทำ animation ก็คือการวาดภาพเป็นแผ่นๆ(frame) แล้วทำการเปลี่ยน frame ไปเรื่อยๆ

https://www.bbc.com/bitesize/articles/zskthyc

ซึ่งวิธีการวาด frame เพื่อทำ animation ใน doc ได้สรุปไว้ดังนี้

1. Clear the canvas
   ล้างของที่อยู่ใน canvas ก่อนหน้านั้นทิ้ง สามารถทำได้โดยเรียกใช้ method clearRect()
2. Save the canvas state
   ทำการ save state ของ canvas ไว้ก่อนที่เราจะทำเปลี่ยนค่าใดๆ ดูเพิ่มเติม
3. Draw animated shapes
4. Restore the canvas state
   ทำการ restore ให้กลับมาเป็นค่าที่ save ไว้ ดูเพิ่มเติม

It’s moving!!!

วิธีการคือเราใช้ method setInterval (สามารถใช้วิธีอื่นได้เช่น setTimeout(function, delay), requestAnimationFrame(callback))ในการ repaint canvas ไปเรื่อยๆ โดยในแต่ละรอบของการ paint จะทำการบวกตำแหน่งของงูเพิ่ม ซึ่ง code ด้านบนจะเป็นการกำหนดให้งูนั้นเลื่อนไปด้านหน้า (+1) พองูไปชนขอบของ game space ก็ทำการ reset position ให้กลับไปเป็นตำแหน่งตรงข้าม

เขียน Logic เพิ่ม

logic ที่ต้องเขียนเพิ่มคือ

1. งูต้องสามารถบังคับได้
2. เมื่อเก็บ apple ได้แล้วหางจะยาวขึ้น และต้องสุ่มตำแหน่งว่าง apple
3. เก็บ apple ได้แล้วให้ขึ้นคะแนนด้วยว่าได้เท่าไร
4. ถ้างูชนตัวเองแล้วต้องจบเกมส์

Code นี้ยังไม่ได้เขียน logic เมื่อชนแล้วจะตาย และดักตอนบังคับงูย้อนกลับ

snake_game version 0.1

ผมคิดว่าสิ่งที่ผมทำไปน่าจะทำให้รู้แค่ basic ของ canvas แต่อย่างน้อยก็พอได้ไอเดียละ หากใครมีข้อเสนอแนะหรือไอเดียใดๆช่วยแนะนำด้วยนะครับ หากบทความนี้ข้อผิดพลาดประการใดต้องขออภัยด้วยครับ

References:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API