Pong ที่รันอยู่ในแท็บเบราว์เซอร์ 240 แท็บ

 (eieio.games)
1 คะแนน โดย GN⁺ 2025-02-22 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

รัน Pong ใน 240 แท็บเบราว์เซอร์

  • ใช้ประโยชน์จากแท็บที่ไม่ได้ใช้งาน: นำแท็บเบราว์เซอร์ 240 แท็บมาเรียงเป็นกริด 8x30 เพื่อรันเกม Pong โดยลูกบอลและไม้พายสามารถเคลื่อนย้ายอย่างลื่นไหลระหว่างแคนวาสของหน้าต่างที่อยู่เบื้องหน้าและทุกแท็บได้

แรงบันดาลใจ

  • Flappy Favi: ได้แรงบันดาลใจจากที่เพื่อนชื่อ Tru สร้าง Flappy Bird เวอร์ชันที่รันอยู่ใน favicon เนื่องจาก favicon มีขนาดเล็กและมองได้ยาก จึงเกิดไอเดียที่จะวาดภาพข้ามหลายแท็บ

การทำต้นแบบ

  • สร้างกริดของแท็บ: ใช้ AppleScript เพื่อเปิด 30 แท็บในหน้าต่าง Chrome 8 หน้าต่าง และจัดวางหน้าต่างให้เหมาะสมเพื่อสร้างกริดขนาดใหญ่ สคริปต์ยังจัดการปัญหาที่ Chrome มักเปิดแท็บที่ปิดไปแล้วกลับมาใหม่ด้วยการเคลียร์ส่วนนี้ตั้งแต่เริ่มต้น

อัปเดต favicon อย่างรวดเร็ว

  • อัปเดต favicon: ระบุตำแหน่งของ favicon ในองค์ประกอบ head ของ HTML เพื่อให้เบราว์เซอร์เปลี่ยนไอคอนได้ Chrome สามารถอัปเดตไอคอนได้ประมาณ 4 ครั้งต่อวินาที ในแท็บเบื้องหลัง ลูป setInterval จะทำงานเพียงหนึ่งครั้งต่อวินาที

  • ใช้ Web Worker: ใช้ Web Worker เพื่อให้ตัวจับเวลาส่งข้อความกลับไปยังเอกสารหลัก ทำให้ทำงานได้อย่างลื่นไหลแม้อยู่ในแท็บเบื้องหลัง

การสื่อสารระหว่างแท็บ

  • รับรู้ตำแหน่งของแท็บ: ส่งค่าดัชนีของหน้าต่างและแท็บปัจจุบันจากโค้ด AppleScript ผ่าน query parameter เพื่อให้แต่ละแท็บรู้ตำแหน่งของตัวเอง

  • ใช้ Broadcast Channel: ใช้ Broadcast Channel แทน WebSocket เพื่อกระจายข้อมูลไปยังแท็บอื่นบนโดเมนเดียวกัน แท็บหลักจะรอรับอีเวนต์การลงทะเบียนจากแท็บเบื้องหลังทั้งหมดก่อนจึงเริ่มแอนิเมชัน

จากแคนวาสสู่แถบแท็บ

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

เพิ่มความเร็ว

  • ปรับการใช้ทรัพยากรให้เหมาะสม: แทนที่จะอัปเดต favicon ทุกเฟรม จะอัปเดตเฉพาะเมื่อมีการเปลี่ยนแปลงเท่านั้น จึงช่วยเพิ่มประสิทธิภาพ

จะสร้างอะไรดี?

  • ไอเดียเกม: ตอนแรกตั้งใจจะทำเกม Snake แต่เห็นว่าเกม Pong จะให้เอฟเฟกต์การเคลื่อนที่ระหว่างแคนวาสกับแถบแท็บได้ดีกว่า จึงเลือก Pong

การสร้าง Pong

  • พัฒนาเกม Pong: ผู้เล่นคอมพิวเตอร์จะจัดให้จุดกึ่งกลางของไม้พายตรงกับจุดกึ่งกลางของลูกบอล เมื่อบอลเด้งออกจากไม้พาย จะใช้ตรีโกณมิติอย่างง่ายในการคำนวณมุม และเพิ่ม trail ให้ลูกบอลเพื่อเน้นเอฟเฟกต์ที่ลูกบอลและไม้พายเคลื่อนย้ายไปยัง favicon อย่างลื่นไหล

สรุป

  • ประสบการณ์จากโปรเจกต์: ผู้เขียนทำโปรเจกต์นี้ที่ Recurse Center และได้รับแรงบันดาลใจอย่างมาก Recurse Center เปรียบเสมือนสถานพักผ่อนสำหรับนักเขียนที่มีไว้เพื่อการเขียนโปรแกรม และประสบการณ์ที่นั่นก็เป็นแรงผลักดันให้กับโปรเจกต์นี้

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

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

 
GN⁺ 2025-02-22
ความคิดเห็นบน Hacker News

  • สวัสดี! ผมเป็นคนทำเอง สงสัยอยู่ว่าสิ่งนี้จะโดนใจชุมชน HN ไหม

    • น่าสนใจมากว่าถ้าใช้แอนิเมชันแล้วมันจะออกมาหน้าตาเป็นอย่างไร (Firefox รองรับ favicon แบบแอนิเมชัน) — เช่น สามารถคาดการณ์ตำแหน่งลูกบอลในอนาคตแล้วสร้าง SVG แบบแอนิเมชันเพื่อให้ได้เฟรมเรตที่ดีกว่ามาก
    • เพื่อนคนหนึ่งชี้ให้เห็นว่าการแรสเตอร์ไรซ์แคนวาสแบบออฟไลน์นั้น (โดยทั่วไป) ทำบน GPU ดังนั้นสัญชาตญาณด้านประสิทธิภาพของผมเกี่ยวกับอาการกระตุกของแอนิเมชันอาจผิดไป
    • ค่อนข้างมั่นใจระดับหนึ่งว่า Chrome จำกัดการอัปเดต favicon ไว้ที่ 4 ครั้งต่อวินาที; มีหลายวิธีในการอัปเดต favicon ดังนั้นอาจมีบางอย่างที่ผมพลาดไป

  • ผมไปฟังบรรยาย Recurse ล่าสุดของ Nolen มา เกมที่บ้าสุด ๆ แต่สนุกและเท่มากแบบถึงรากถึงแก่นพวกนี้มีเสน่ห์จริง ๆ

    • มันทำให้นึกถึงอินเทอร์เน็ตยุคก่อน สมัยที่ผู้คนสร้างอะไรบางอย่างขึ้นมาเพียงเพราะมันสนุก
    • เมื่อคืนได้รับแรงบันดาลใจจากสิ่งที่ Nolen โพสต์ไว้ เลยทำอะไรที่สนุกมาก ๆ คล้าย ๆ quine ที่พิมพ์ซอร์สโค้ดของหน้าออกมา โดยใช้การ decompile ของ BEAM และลูกเล่นอื่น ๆ
    • อยากมีเวลาทำอะไรแบบนี้บ้าง และแค่ได้รู้ว่ายังมีคนที่สร้างสิ่งต่าง ๆ ด้วยวิธีแบบนี้อยู่ก็ทำให้ยิ้มได้
    • ถ้าอยากขำ ผลงานที่ได้ quine นี้อยู่ที่นี่: ลิงก์

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

  • งานสำรวจที่คล้ายกันของ Matthew Rayfield ซึ่งใช้แถบ URL แทน favicon ของแท็บ: ลิงก์

  • ทำให้นึกถึง:

    • "Show HN: ดูการทดลองสุดเจ๋งนี้แล้วเลยทำเวอร์ชันง่าย ๆ ขึ้นมา" (2023.11.25) ลิงก์
    • "ซิงก์ฉาก 3D ข้ามหลายหน้าต่างด้วย Three.js และ localStorage" (2023.11.27) ลิงก์

  • ขอเรียกว่าต่อไป Doom มาแน่

  • ไร้สาระแบบชวนอารมณ์ดี และความพยายามระดับ A+

  • มีมิวสิกวิดีโอที่วง "Ok Go" ทำร่วมกับ Google Chrome อยู่ชิ้นหนึ่ง ที่มีการซิงก์หน้าต่างเบราว์เซอร์กับนักเต้นอย่างน่าทึ่ง พร้อมเอฟเฟกต์คล้ายภาพคาไลโดสโคป... อันนี้ทำให้นึกถึงสิ่งนั้น

  • ดูเหมือนว่าอีกไม่กี่วันก็น่าจะมี Doom port ออกมา

  • เจ๋งมาก ชอบที่ Chrome ปรับแต่งได้มากขนาดนี้ อันนี้ดูเหมือนจะใช้ WebSocket แต่ก็สามารถใช้ส่วนขยายสำหรับการสื่อสารระหว่างแท็บได้เหมือนกัน