Sitemap

บันทึกการทำเกม Wordle ฉบับภาษาไทย

ช่วงนี้เกม Wordle กำลังมาแรงบน Twitter โดยเกมจะให้เราเดาคำภาษาอังกฤษที่จะมีวันละ 1 คำ ให้ทายได้ 6 ครั้ง แล้วแชร์ผลให้เพื่อนๆ ดูได้

Press enter or click to view image in full size
Wordle

สิ่งที่ทำให้มันไวรัล น่าจะมีผลมาจากการแชร์คะแนน หน้าตาแบบนี้

Wordle 211 5/6⬜🟨⬜⬜🟩
⬜🟩🟨⬜🟨
🟨🟩⬜⬜🟩
🟩🟩⬜🟩🟩
🟩🟩🟩🟩🟩

เมื่อใครเห็นเข้าก็จะสงสัยแล้วก็ถามว่าเล่นที่ไหน หรือไปเสิร์ชแล้วก็เจอกับตัวเว็บเลย

ผมเลยลองคิดดูว่า ถ้าเกมนี้เป็นการเดาคำภาษาไทยแทน มันจะยังสนุกอยู่ไหม…

ความแตกต่างของคำภาษาไทย

เมื่อเราสังเกตตัวเกม Wordle มันจะเป็นการแบ่งคำออกเป็นแต่ละตัวอักษร ซึ่งมีความคล้ายคลึงกับการเล่น Crossword แต่ในภาษาไทยนั้นมีตัวอักขระเยอะกว่าภาษาอังกฤษมาก แถมยังมีสระหรือวรรณยุกต์ที่อยู่ด้านบนหรือด้านล่างของคำ ในขณะที่ภาษาอังกฤษมีแค่ A-Z รวมทั้งหมด 26 ตัว

เกม Crossword ภาษาไทยเลยออกมาเป็นแบบที่ให้พวกตัวสระหรือวรรณยุกต์เป็น Wildcard ไปซะ เช่นคำว่า เรียน สามารถใช้ เรยน แทนได้เลย (ไม่แน่ใจว่าตัวเหล่านี้มีแต้มหรือเปล่า ไม่เคยเล่น…)

Press enter or click to view image in full size
เกม “คำคม”

ฉะนั้นตัวเกม Wordle แบบภาษาไทย การตรวจว่าคำนั้นถูกต้องหรือไม่ จะต้องเทียบโดยไม่นำสระด้านบนหรือล่างมาพิจารณา การตัดตัวอักษรด้วย JavaScript เลยใช้แค่ word.split("") ไม่ได้

Press enter or click to view image in full size

ต้องใช้วิธีตรวจดูว่าเป็นตัวอักษรที่ควรไปต่อ (Append) กับตัวอักษรก่อนหน้าหรือไม่

Press enter or click to view image in full size

จะได้แบบนี้

Press enter or click to view image in full size

หลังจากตัดคำได้ตามที่ต้องการแล้ว ก็เขียนตัวรับ Input แล้วผ่าน Algorithm เช็คตัวอักษรแต่ละตัว โดยจะเช็คก่อนว่าถ้าตัวนั้นตรงกับคำเฉลย ก็ให้เป็นสีเขียว และถ้าไม่ตรง ให้ตรวจสอบว่ายังอยู่ในคำนั้นหรือไม่ ให้เป็นสีเหลือง และถ้าไม่อยู่ในคำนั้นเลย ให้เป็นสีเทา

Press enter or click to view image in full size
Code (เวอร์ชั่นแรกๆ)

เมื่อเอามารวมกับหน้า Frontend ที่ใช้ Svelte และแต่ง UI ด้วย Tailwind และ Deploy ผ่าน Vercel ในที่สุดก็ออกมาเป็นตัวเกม Thwordle อย่างที่ทุกๆ คนเห็นกัน

Press enter or click to view image in full size
https://thwordle.vercel.app

ส่วนการแชร์หน้าตาจะคล้ายกัน แต่ใช้เป็นคำว่า #Thwordle แทนซึ่งเป็นแฮชแท็กเพื่อดูใน Twitter/Facebook ได้ง่าย

Press enter or click to view image in full size

เมื่อเกมนี้ได้ออกไปก็ได้รับความนิยมอย่างรวดเร็ว ถือว่าทำทันกระแส Wordle บูม แต่ก็มีคนแจ้งบั๊กมาเป็นจำนวนหนึ่ง ก็ต้องตามเก็บบั๊กกันรายวัน แต่โชคดีที่เขียน Test ตั้งแต่เนิ่นๆ เลยแก้และ Re-deploy ได้ภายในเวลาไม่กี่นาที

สำหรับตัวโค้ดจะเป็น Open-source ทั้งหมดและอยู่บน Github และผมได้ Live Stream การเขียนโค้ดของโปรเจคนี้ไว้บน Youtube ด้วย (ฝากกดซับด้วยจะเป็นพระคุณ 🙏)

ตอนนี้มี 4 ตอนแล้ว ยังมีต่อเพราะยังไม่เสร็จสมบูรณ์ดี คงทำไปเรื่อยๆ จนกว่าคนจะเบื่อละมั้ง

--

--

No responses yet