Pong yang Berjalan di 240 Tab Browser

Menjalankan Pong di 240 Tab Browser

• Memanfaatkan tab yang tidak digunakan: Menjalankan game Pong dengan menyusun 240 tab browser dalam grid 8x30. Bola dan paddle dapat berpindah dengan mulus antara kanvas di jendela foreground dan semua tab.

Inspirasi

• Flappy Favi: Terinspirasi dari teman bernama Tru yang membuat versi Flappy Bird yang berjalan di favicon. Karena favicon kecil dan sulit dilihat, muncul ide untuk menggambar gambar di banyak tab.

Pembuatan prototipe

• Membuat grid tab: Menggunakan AppleScript untuk membuka 30 tab di masing-masing dari 8 jendela Chrome, lalu menata jendelanya dengan tepat untuk membentuk grid besar. Skrip ini juga membersihkan tab yang dipulihkan saat mulai, untuk mengatasi perilaku Chrome yang membuka kembali tab yang sebelumnya ditutup.

Pembaruan favicon yang cepat

• Memperbarui favicon: Menentukan lokasi favicon di elemen head HTML agar browser mengubah ikonnya. Chrome dapat memperbarui ikon sekitar 4 kali per detik. Di tab background, loop setInterval hanya berjalan sekali per detik.

• Menggunakan Web Worker: Menggunakan Web Worker agar timer mengirim pesan ke dokumen utama, sehingga dapat berjalan mulus bahkan di tab background.

Komunikasi antar-tab

• Mengenali posisi tab: Kode AppleScript meneruskan indeks jendela dan tab saat ini melalui parameter kueri agar setiap tab mengetahui posisinya sendiri.

• Menggunakan Broadcast Channel: Menggunakan Broadcast Channel alih-alih WebSocket untuk mendistribusikan informasi ke tab lain di domain yang sama. Tab utama menjalankan animasi setelah menerima event pendaftaran dari semua tab background.

Dari kanvas ke tab bar

• Menghubungkan kanvas dan tab bar: Mengimplementasikan agar bentuk yang digambar di jendela foreground dapat berpindah ke tab bar. Dengan pengukuran yang akurat, kanvas dan favicon disejajarkan, lalu bentuk digambar di favicon dan kanvas utama sesuai posisinya.

Meningkatkan kecepatan

• Mengoptimalkan penggunaan resource: Meningkatkan performa dengan tidak memperbarui favicon di setiap frame, melainkan hanya saat ada perubahan.

Apa yang akan dibuat?

• Ide game: Awalnya ingin membuat game Snake, tetapi memilih Pong karena dinilai memberi efek yang lebih baik saat berpindah antara kanvas dan tab bar.

Implementasi Pong

• Mengimplementasikan game Pong: Pemain komputer mengarahkan pusat paddle ke pusat bola. Saat bola memantul dari paddle, sudutnya dihitung menggunakan trigonometri sederhana. Untuk menonjolkan efek perpindahan bola dan paddle yang mulus ke favicon, sebuah trail ditambahkan pada bola.

Penutup

• Pengalaman proyek: Proyek ini dikerjakan di Recurse Center dan memberikan banyak inspirasi. Recurse Center adalah tempat yang mirip retret bagi penulis, tetapi untuk pemrograman, dan pengalaman di sana menjadi motivasi bagi proyek ini.

[GN⁺]

Komentar Hacker News

• Halo! Saya yang membuatnya. Saya penasaran apakah ini akan menarik bagi komunitas HN

  • Akan sangat menarik melihat seperti apa hasilnya jika memakai animasi (Firefox mendukung favicon animasi) - misalnya, kita bisa memprediksi posisi bola di masa depan dan membuat SVG animasi untuk mendapatkan frame rate yang jauh lebih baik
  • Seorang teman menunjukkan bahwa rasterisasi canvas secara offline (umumnya) dilakukan di GPU, jadi intuisi performa saya soal animasi yang tersendat mungkin salah
  • Saya cukup yakin Chrome membatasi pembaruan favicon menjadi 4 kali per detik; ada banyak cara berbeda untuk memperbarui favicon jadi mungkin ada sesuatu yang saya lewatkan

• Saya menghadiri ceramah Recurse terbaru dari Nolen, dan game-game yang benar-benar gila tapi pada dasarnya lucu dan keren ini sangat memikat

  • Ini mengingatkan saya pada internet zaman dulu, ketika orang membuat sesuatu hanya karena itu menyenangkan
  • Terinspirasi oleh hal-hal yang Nolen unggah tadi malam, saya membuat semacam quine yang sangat lucu yang mencetak source code halamannya, menggunakan dekompilasi BEAM dan trik lainnya
  • Saya berharap punya waktu untuk membuat hal-hal seperti ini, dan mengetahui bahwa ada orang yang membuat sesuatu dengan cara seperti ini membuat saya tersenyum
  • Kalau ingin tertawa, karya yang menghasilkan quine ini ada di sini: tautan

• Saya suka semua yang dibuat Nolen. Bagi saya, dia seperti menemukan titik manis dalam mengembangkan aplikasi/situs tujuan tunggal yang mengingatkan pada masa ketika internet terasa seperti dulu

• Eksplorasi serupa oleh Matthew Rayfield yang menggunakan bilah URL alih-alih favicon tab: tautan

• Ini mengingatkan pada:

  • "Show HN: Saya melihat eksperimen luar biasa ini dan membuat versi sederhananya" (2023.11.25) tautan
  • "Menyinkronkan adegan 3D di beberapa jendela menggunakan Three.js dan localStorage" (2023.11.27) tautan

• Saya sebut Doom sebagai berikutnya

• Menyenangkan karena sangat absurd, usaha level A+

• Ada video musik dari band "Ok Go" yang berkolaborasi dengan Google Chrome, dengan sinkronisasi luar biasa antara jendela browser dan para penari serta efek seperti kaleidoskop... ini mengingatkan saya pada itu

• Sepertinya port Doom akan muncul dalam beberapa hari lagi

• Sangat keren, saya suka betapa bisa dimodifikasinya Chrome, sepertinya ini memakai WebSocket, tapi Anda juga bisa menggunakan ekstensi untuk komunikasi antar tab