ลองเขียนเกมส์งูด้วย Canvas ตอนที่ 2 — Multilayer Canvas

2 min readDec 5, 2018

ยังไม่ได้อ่านตอนแรก? กดเลย

หลังจากไปลองนั่งคิดๆดูว่าสามารถทำอะไรต่อกับเกมส์งูนี้ได้บ้าง เพื่อนคนนึงได้ comment ว่า “งูกินแอปเปิ้ลหรอ~” เออ…งั้นเป็นเปลี่ยนเป็นงูชนแอปเปิ้ลละกัน แล้วเวลาชนก็มี effect เหมือนระเบิดหน่อย

ออกแบบ

สิ่งที่ต้องทำคือทำ animation ของ effect ระเบิด ผมเลยทำง่ายๆคือ วาดวงกลมให้ในแต่ละ Frame ห่างจากจุดศูนย์กลางเรื่อยๆ(คล้ายๆกับ ripple effect) +ให้ opacity ลดลงเรื่อยๆเมื่อไกลจากจุดศูนย์กลาง

หลังจากลองคิดดูว่า ถ้าให้ effect ของระเบิดอยู่ใน frame เดียวกับงูน่าจะเกิดปัญหาหลายอย่างเช่น

เวลาจะแสดง animation ของระเบิดจะต้องรอรอบการ render ของเกมส์ ทำให้ effect ระเบิดอาจจะไม่ smooth
สังเกตุว่าในแต่ละ frame ของระเบิดจะมีการลบวงกลมใน frame ก่อนหน้านั้น ซึ่งถ้างูอยู่ในวงระเบิด งูจะโดนลบไปด้วย

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

ผมจึงแบ่งเป็นสองอันคือ Board canvas และ Burst effect canvas

เริ่ม Coding

เขียน animation ของระเบิดก่อน โดย algorithm เป็นดังนี้ วาดวงกลมโดยจุดศูนย์กลางอยู่ที่ตำแหน่งแอปเปิ้ลที่งูกิน โดยมีรัศมีเป็นค่าเริ่มต้นที่เรากำหนดไว้ และทำการกำหนดค่าความโปรงใส่ให้เส้นของวงกลม หลังจากนั้นทำซ้ำตามขั้นตอนที่บอกมาอีกครั้งแต่ก่อนจะวาดใหม่ให้ลบของเก่าออกก่อน เพิ่มรัศมีและลดค่าความโปรงใส่ ทำซ้ำไปเรื่อยๆจนกว่าจะครบรอบที่เรากำหนดไว้

ได้ effect ระเบิดแล้ว หลังจากนั้นเอามาประกอบกับ code เก่าที่เราเคยเขียนไว้ โดย logic คือเมื่อแอปเปิ้ลโดนงูชน ให้ทำการ render ระเบิดที่ตำแหน่งแอปเปิ้ลนั้น

สร้าง canvas สองอัน board และ apple-burst-effect โดยให้ apple-burst-effect อยู่เหนือ board canvas

<html>
   <head>
      <style>
         #board {
            position: absolute;
            z-index: 0;
         }
         #apple-burst-effect {
            position: absolute;
            z-index: 1;
         }
      </style>
   </head>
   <body>
      <canvas id="board"></canvas>
      <canvas id="apple-burst-effect"></canvas>
   </body>
</html>

หน้าตาของ code ที่รวม logic กันแล้วจะประมาณนี้ครับ

หลักการคร่าวๆทั้งหมดของ multilayer canvas น่าจะประมาณนี้แหละครับ ซึ่งผมคิดว่าด้วยหลักการทั้งหมดตั้งแต่บทความแรกน่าจะทำให้เราสามารถทำเกมส์ที่เราคุ้นเคยได้แบบเบื้องต้นเช่น