การสร้างมินิเกมบนเบราว์เซอร์แนวระบายสีเพื่อพรางตัว
ผมได้สร้างเกมบนเบราว์เซอร์ที่ได้รับแรงบันดาลใจมาจาก Meccha Chameleon ในเกมนั้น ผู้ซ่อนจะต้องระบายสีร่างกายของตนเองให้กลมกลืนกับผนังหรือลังไม้ ส่วนผู้หาจะต้องพยายามค้นหาพวกเขาให้เจอ
ผมได้สร้างเครื่องมือสองอย่างขึ้นมาโดยใช้แนวคิดนี้
- The Camo Lab เครื่องมือนี้จะให้ค่าสี ลวดลาย และท่าทางที่แม่นยำสำหรับพื้นผิวใดก็ได้ ผมใช้ inline SVG เพียงตัวเดียวสำหรับตัวกิ้งก่า โดยสีจะเปลี่ยนไปตามพาเลตต์ (palette) ของพื้นผิวนั้นๆ
ผมพบว่าการเปลี่ยนสี SVG ด้วยตัวแปร (variables) นั้นง่ายกว่าการสร้างรูปภาพขึ้นมาใหม่ พื้นผิวแต่ละแบบจะเป็นออบเจกต์ข้อมูล (data object) ขนาดเล็ก ซึ่งประกอบด้วยรหัสสี hex สามสี, ลวดลาย และคะแนนการผสมสี (blend score) การเพิ่มพื้นผิวใหม่ใช้โค้ดเพียงบรรทัดเดียว
- The Minigame นี่คือตารางไทล์ (tiles) ที่สามารถเล่นได้ โดยจะมีบางไทล์ที่ซ่อนกิ้งก่าเอาไว้ คุณต้องแตะที่ไทล์เพื่อหาพวกมันให้พบก่อนที่เวลาจะหมด ผมสร้างสิ่งนี้โดยใช้ React state โดยไม่ได้ใช้ canvas หรือ game engine เลย วิธีนี้ช่วยให้ขนาดไฟล์เล็กและโหลดได้รวดเร็ว
เทคโนโลยีที่ใช้ (Tech stack):
- Next.js
- Cloudflare Workers ผ่าน OpenNext
เว็บไซต์นี้ใช้ static pages ที่ edge ส่วนส่วนที่โต้ตอบได้จะทำการ hydrate ที่ฝั่ง client
ลองเล่นเครื่องมือได้ที่นี่: Camo Lab: [Link] Browser Game: [Link]
หากมีคำถามเกี่ยวกับการลงสี SVG หรือการตั้งค่า OpenNext สามารถถามผมได้เลย
ที่มา: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn