เล่นเกม Snake ในแถบที่อยู่ URL

 (demian.ferrei.ro)
7 คะแนน โดย GN⁺ 2025-09-29 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ผู้ใช้สามารถเล่นเกม snake ได้ใน แถบที่อยู่ URL
  • ควบคุมงูด้วย ปุ่มลูกศรหรือ WASD บนคีย์บอร์ด
  • บนหน้าเว็บ URL อาจแสดงผลไม่ชัดเจน หรือดูพร่ามัวจากเอฟเฟกต์ "หมอก"
  • มอบอินเทอร์เฟซที่ไม่เหมือนใครด้วยการ เล่นเกม ผ่านการจัดการ URL โดยตรง
  • แตกต่างจากรูปแบบเกมทั่วไป ด้วยการ ใช้แถบที่อยู่ เพื่อมอบประสบการณ์แปลกใหม่

รูปแบบการเล่นเกมที่แปลกใหม่ในแถบที่อยู่ URL

  • ผู้ใช้ควบคุม snake ด้วย ปุ่มลูกศรหรือปุ่ม WASD
  • แทนที่จะเล่นบนหน้าจอเกม ตัวเกมเกิดขึ้นจริงใน แถบที่อยู่ URL ของเบราว์เซอร์
  • ด้วยลักษณะของหน้าเว็บ ผู้ใช้บางรายอาจพบปัญหา URL แสดงผลไม่ถูกต้องหรือดูพร่ามัว
  • หาก URL ไม่แสดงตามปกติหรือทำให้สับสน ควรลองตรวจสอบการแสดงที่อยู่ของหน้าเว็บหรือรีเฟรชหน้า
  • ต่างจากเกม HTML5 แบบเดิม ผู้ใช้จะได้รับประสบการณ์เกมแบบโต้ตอบพร้อม การตอบสนองทันที ในพื้นที่ URL

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-09-29
ความเห็นจาก Hacker News
  • เคยทำอะไรคล้าย ๆ กันมาก่อน โดยใช้ favicon
    https://franciscouzo.github.io/favisnake/
    • เมื่อก่อนก็เคยทำเกม 2048 ด้วย favicon เหมือนกัน
      https://aquova.net/games/2048/
    • รู้สึกทึ่งมาก ยิ่งเป็นจอ Retina ก็ยิ่งเล่นยากขึ้น
  • คิดว่าเจ๋งมาก แต่ตัวอักษรที่ใช้แสดงช่องว่างบนเบราว์เซอร์ของฉันดูแปลกไปหน่อย เหมือนเป็นสี่เหลี่ยมที่มีความกว้างไม่เท่ากัน
    ใน Unicode มีแพตเทิร์นอักษรเบรลล์แบบ 4x2 ครบทุกแบบอยู่แล้ว (256 แบบ) เลยอาจลองใช้ ⣿ เป็นพื้นหลัง แล้วค่อยเจาะเงาของงูหรืออาหารทับลงไปก็ได้
    ตัวอย่าง: ⣿⣿⣛⣛⣛⣛⣛⣩⣽⣿⣯⣿⣿⣿
    แบบนี้น่าจะทำให้ระยะห่างของตัวอักษรสม่ำเสมอและอ่านง่ายกว่า
    • ฉันก็เคยคิดเรื่องนั้นเหมือนกัน ช่วงต้นเกมน่าจะช่วยได้แน่ แต่ช่วงท้ายอาจกลับทำให้แย่ลงกว่าเดิมก็ได้
      ยิ่งงูตัวใหญ่ขึ้น มันก็ยิ่งกระจายไปทั่วกริด และสุดท้ายก็ยิ่งมีอักขระแทนช่องว่างให้เห็นมากขึ้น
      เกมก็จะเร็วขึ้นเรื่อย ๆ ตามความคืบหน้า ดังนั้นหน้าจอที่ยิ่งซับซ้อนขึ้นในช่วงที่ต้องมีสมาธิจึงไม่น่าเป็นสิ่งที่ดี
      ถ้าใครมีวิธีแก้ปัญหาช่องว่างแปลก ๆ นี้แบบจริงจังได้ ฉันอยากรู้มาก แต่คงไม่อยากพึ่งการแสดงผลข้อความอย่าง <title> ของหน้า
      อนึ่ง เกมงูคล้าย ๆ กันที่เพิ่งถูกโพสต์บน Reddit ก็วาดไว้ใน title เหมือนกัน
      https://old.reddit.com/r/webdev/comments/1n9z77e/snake_in_the_tab_title/
      ถ้าจะล่าคะแนนสูงตอนนี้ วิธีที่ดูดีที่สุดน่าจะเป็นการคลิก "?" เพื่อให้ URL แสดงบนหน้าเว็บ
  • ประทับใจมากกับความลื่นไหลของการตอบสนอง และยิ่งดีใจที่พอกลับมาก็ย้อนกลับสู่ HN ได้อย่างเนียนมาก
    ประวัติก็ไม่พังด้วย รู้สึกว่าไอเดียเฉียบจริง ๆ
    • ดูเหมือนจะใช้ history.pushState กับ history.replaceState ได้เก่งมาก
    • ดูจากซอร์สโค้ดแล้ว ในบางเบราว์เซอร์ที่จำกัดการอัปเดต URL เหมือนต้องใช้วิธีอื่นเพื่อบล็อกการทำงานของปุ่มย้อนกลับด้วย
  • เป็นไอเดียที่ฉลาดมากจนต้องทึ่ง
    ประทับใจตรงที่ใช้อักษรเบรลล์ในการแปลงข้อมูลจุดมาเก็บใน URL
    https://github.com/epidemian/snake/blob/master/snake.js
  • เพราะมีอะไรแบบนี้แหละถึงทำให้ยังเข้ามา hackernews และทำให้ทั้งวันสดใสขึ้น
  • คิดว่าเป็นไอเดียที่แปลกใหม่และสร้างสรรค์มากจริง ๆ
  • สำหรับคนที่ตอนแรกยังไม่เข้าใจว่ามันทำงานยังไง มีเครื่องหมายคำถามสีฟ้าอมเขียวเล็ก ๆ อยู่มุมซ้ายบน
    ตรงนั้นมีคำอธิบายไว้

    คุณสามารถบังคับงูใน URL ได้ด้วยปุ่มลูกศรหรือ WASD ถ้า URL มองเห็นได้ไม่ชัดหรือดูแปลก ๆ ให้คลิก
    อีกอย่างคือแถบที่อยู่ต้องยาวพอถึงจะมองเห็นหน้าจอได้ ดังนั้นต้องขยายหน้าต่างให้กว้างเพื่อเล่น
    เป็นคอนเซปต์ที่สดใหม่และใช้งานได้ดี

  • ยากกว่าที่คิดไว้มาก จุดว่างรอบ ๆ ตัวงูค่อนข้างทำให้เสียสมาธิ
    อยากรู้เหมือนกันว่าถ้าแสดงบนหน้าเว็บในแบบที่ไม่มีจุดว่างจะออกมาเป็นอย่างไร
  • เป็นเกมที่ฉลาดมาก และตัวเกมเองก็สนุกพอสมควร