ใช้ Claude Code เขียนเกมงู แบบ Vibe Coding เล่นๆ

สวัสดีครับ บทความนี้ต่อยอดมาจากบทความสร้างเกมงูด้วย HTML นะครับ โดยใช้ Claude Code มาช่วยเขียน เพื่อเพิ่ม feature ให้มัน เช่น เพิ่มปุ่ม Settings, ปรับระดับความยาก, scorebaord และแข่งกับ AI เป็นต้น

มาลองสร้างเกมงู​ด้วย HTML กันดีกว่า (Snake Game)

ใน Tutorial นี้เราจะมาเรียนรู้วิธีสร้างเกม Snake แบบง่ายๆ ด้วย HTML, CSS และ JavaScript กันครับ โดยจะแบ่งเป็นขั้นตอนต่างๆ เพื่อให้เข้าใจง่าย Youtube videoสำหรับสาย Video ผมได้ทำ Tutorial แบบ video ไว้devahoy.com

โดย feature ที่เพิ่มผมให้ Claude Code ทำทั้งหมด ผมมีหน้าที่สั่งการอย่างเดียวเลย แนวๆ vibe coding นั่นแหละ

ติดตั้ง Claude Code

Claude Code: Deep Coding at Terminal Velocity \ Anthropic

Transform hours of debugging into seconds with a single command. Experience coding at thought-speed with Claude's AI that understands your entire codebase—no more context switching, just breakthrough results.anthropic.com

ต้องมี Node.js และติดตั้งผ่าน npm

npm install -g @anthropic-ai/claude-code

ที่เหลือก็ทำผ่าน claude ได้เลย

1
claude

เราสามารถใช้งาน Claude ผ่าน VS Code หรือ IDE อื่นๆ ได้ เช่น JetBrain หรือ Cursor ที่เป็น forked ของ VS Code ได้เช่นกัน โดยเปิด terminal ของ VS Code แล้วพิมพ์ Claude มันจะติดตั้ง Claude Code for VSCode extension ให้เอง ถ้าไม่ได้ลองพิมพ์นี้

/ide

Vibe coding ผมในการทำเกมงูจะเป็นไงนั้น ลองไปดูตามใน Youtube ได้เลยนะครับ เนื้อหา 1ชม กว่าๆ

สุดท้าย Source Code และ Demo ของเกม สามารถไปกดดูได้ หากมีตรงไหนสงสัย หรืออยากเห็นการเขียนโค๊ดด้วย Claude Code อีก สามารถคอมเม้นมาได้นะครับ

Happy Coding ❤️