Pong chạy trên 240 tab trình duyệt

Chạy Pong trên 240 tab trình duyệt

• Tận dụng các tab không dùng đến: Sắp xếp 240 tab trình duyệt thành lưới 8x30 để chạy trò chơi Pong. Quả bóng và các thanh đỡ có thể di chuyển mượt mà giữa canvas của cửa sổ foreground và tất cả các tab.

Cảm hứng

• Flappy Favi: Lấy cảm hứng từ việc người bạn Tru tạo ra một phiên bản Flappy Bird chạy trong favicon. Vì favicon quá nhỏ và khó nhìn, tác giả nảy ra ý tưởng vẽ hình ảnh trên nhiều tab.

Tạo nguyên mẫu

• Tạo lưới tab: Dùng AppleScript để mở 30 tab trong mỗi một trong 8 cửa sổ Chrome, rồi sắp xếp các cửa sổ phù hợp để tạo thành một lưới lớn. Script cũng dọn dẹp phần này khi khởi động để xử lý đặc tính của Chrome là tự mở lại các tab đã đóng.

Cập nhật favicon nhanh

• Cập nhật favicon: Chỉ định vị trí favicon trong phần tử head của HTML để trình duyệt thay đổi biểu tượng. Chrome có thể cập nhật biểu tượng khoảng 4 lần mỗi giây. Trong các tab background, vòng lặp setInterval chỉ chạy một lần mỗi giây.

• Dùng Web Worker: Sử dụng Web Worker để bộ hẹn giờ gửi thông điệp tới tài liệu chính, giúp mọi thứ vẫn hoạt động mượt mà ngay cả trong các tab background.

Giao tiếp giữa các tab

• Nhận biết vị trí tab: Truyền cửa sổ hiện tại và chỉ mục tab từ mã AppleScript dưới dạng tham số truy vấn để mỗi tab biết vị trí của chính mình.

• Dùng Broadcast Channel: Thay vì WebSocket, sử dụng Broadcast Channel để phát thông tin tới các tab khác trên cùng domain. Tab chính nhận sự kiện đăng ký từ tất cả các tab background rồi mới chạy hoạt ảnh.

Từ canvas lên thanh tab

• Kết nối canvas với thanh tab: Triển khai để các hình vẽ trong cửa sổ foreground có thể di chuyển lên thanh tab. Bằng cách đo đạc chính xác, canvas và favicon được căn chỉnh thẳng hàng, rồi tùy theo vị trí của hình mà vẽ lên favicon hoặc canvas chính.

Tăng tốc

• Tối ưu việc dùng tài nguyên: Thay vì cập nhật favicon ở mọi khung hình, chỉ cập nhật khi có thay đổi để cải thiện hiệu năng.

Sẽ làm gì?

• Ý tưởng trò chơi: Ban đầu định làm Snake, nhưng tác giả cho rằng Pong sẽ tạo hiệu ứng di chuyển giữa canvas và thanh tab tốt hơn nên đã chọn Pong.

Triển khai Pong

• Triển khai trò Pong: Người chơi máy điều chỉnh để tâm của thanh đỡ trùng với tâm của quả bóng. Khi bóng nảy khỏi thanh đỡ, góc phản xạ được tính bằng lượng giác đơn giản. Để nhấn mạnh hiệu ứng quả bóng và thanh đỡ di chuyển mượt sang favicon, tác giả thêm vệt đuôi cho quả bóng.

Kết

• Trải nghiệm dự án: Tác giả thực hiện dự án này tại Recurse Center và nhận được rất nhiều cảm hứng. Recurse Center giống như một khu nghỉ dưỡng dành cho lập trình viên, và trải nghiệm ở đây đã trở thành động lực cho dự án.

[GN⁺]

Ý kiến Hacker News

• Xin chào! Tôi là người làm ra cái này. Tôi đã tự hỏi liệu nó có hợp gu cộng đồng HN không

  • Tôi thực sự thấy thú vị khi nghĩ xem nó sẽ trông thế nào nếu dùng animation (Firefox hỗ trợ favicon động) — ví dụ, có thể dự đoán vị trí tương lai của quả bóng và tạo SVG động để đạt tốc độ khung hình tốt hơn nhiều
  • Một người bạn chỉ ra rằng việc raster hóa canvas ngoài màn hình (nói chung) được thực hiện trên GPU, nên có thể trực giác về hiệu năng của tôi đối với việc animation bị giật là sai
  • Tôi khá chắc ở mức vừa phải rằng Chrome giới hạn cập nhật favicon ở 4 lần mỗi giây; có nhiều cách khác nhau để cập nhật favicon nên có thể tôi đã bỏ sót điều gì đó

• Tôi đã tham dự buổi nói chuyện gần đây của Nolen tại Recurse, và những trò chơi hoàn toàn điên rồ nhưng về cốt lõi lại vui và ngầu này thực sự rất cuốn hút

  • Nó làm tôi nhớ đến Internet ngày xưa, khi mọi người tạo ra thứ gì đó đơn giản chỉ vì vui
  • Lấy cảm hứng từ những thứ Nolen đăng tối qua, tôi đã làm một kiểu quine rất vui, in ra mã nguồn của trang, dùng BEAM decompilation và vài mẹo khác
  • Tôi ước mình có thời gian để làm ra những thứ như thế này, và chỉ riêng việc biết rằng vẫn có những người tạo ra thứ gì đó theo cách này cũng đủ khiến tôi mỉm cười
  • Nếu muốn cười một chút, tác phẩm tạo ra quine này ở đây: link

• Tôi thích mọi thứ Nolen làm. Với tôi, có vẻ như anh ấy đã tìm ra điểm ngọt để phát triển các app/site đơn mục đích gợi nhớ về thời Internet còn như xưa

• Một thử nghiệm tương tự của Matthew Rayfield dùng thanh URL thay vì favicon của tab: link

• Nó làm tôi nhớ đến:

  • "Show HN: Tôi đã xem thử nghiệm tuyệt vời này và làm một phiên bản đơn giản" (2023.11.25) link
  • "Đồng bộ cảnh 3D trên nhiều cửa sổ bằng Three.js và localStorage" (2023.11.27) link

• Tôi gọi Doom là người tiếp theo

• Vô lý một cách đầy thích thú, nỗ lực hạng A+

• Đã từng có một MV mà ban nhạc "Ok Go" hợp tác với Google Chrome, với sự đồng bộ đáng kinh ngạc giữa các cửa sổ trình duyệt và các vũ công cùng những hiệu ứng kiểu kính vạn hoa... cái này làm tôi nhớ đến nó

• Có vẻ như một bản port Doom sẽ xuất hiện trong vài ngày tới

• Thật sự rất ngầu, tôi thích việc Chrome có thể được tinh chỉnh đến mức nào, cái này có vẻ dùng WebSocket, nhưng cũng có thể dùng extension để giao tiếp giữa các tab