▲

GN⁺: 240개의 브라우저 탭에서 실행되는 Pong

 (eieio.games)
1P by neo 7일전 | ★ favorite | 댓글 1개

240개의 브라우저 탭에서 Pong 실행하기

  • 미사용 탭 활용: 240개의 브라우저 탭을 8x30 그리드로 배열하여 Pong 게임을 실행함. 공과 패들이 포그라운드 창의 캔버스와 모든 탭 사이를 원활하게 이동할 수 있음.

영감

  • Flappy Favi: 친구 Tru가 파비콘에서 실행되는 Flappy Bird 버전을 만든 것에서 영감을 받음. 파비콘은 작아서 보기 어려운 점을 개선하고자 여러 탭에 이미지를 그리는 아이디어를 떠올림.

프로토타이핑

  • 탭 그리드 생성: AppleScript를 사용하여 8개의 크롬 창에 각각 30개의 탭을 열고, 창을 적절히 배치하여 큰 그리드를 만듦. 스크립트는 닫힌 탭을 다시 여는 크롬의 특성을 해결하기 위해 시작 시 이를 정리함.

빠른 파비콘 업데이트

  • 파비콘 업데이트: HTML의 head 요소에 파비콘 위치를 지정하여 브라우저가 아이콘을 변경하도록 함. 크롬은 초당 약 4번 아이콘을 업데이트할 수 있음. 백그라운드 탭에서는 setInterval 루프가 초당 한 번만 실행됨.

  • 웹 워커 사용: 웹 워커를 사용하여 타이머를 메인 문서로 메시지를 보내도록 하여 백그라운드 탭에서도 원활하게 작동하도록 함.

탭 간 통신

  • 탭 위치 인식: AppleScript 코드에서 현재 창과 탭 인덱스를 쿼리 매개변수로 전달하여 각 탭이 자신의 위치를 알 수 있도록 함.

  • 브로드캐스트 채널 사용: 웹소켓 대신 브로드캐스트 채널을 사용하여 같은 도메인의 다른 탭에 정보를 배포함. 메인 탭이 모든 백그라운드 탭의 등록 이벤트를 수신한 후 애니메이션을 실행함.

캔버스에서 탭 바로

  • 캔버스와 탭 바 연결: 포그라운드 창에서 그린 도형이 탭 바로 이동하도록 구현함. 정확한 측정을 통해 캔버스와 파비콘을 정렬하고, 도형의 위치에 따라 파비콘과 메인 캔버스에 그리도록 함.

속도 향상

  • 리소스 사용 최적화: 각 프레임에서 파비콘을 업데이트하는 대신 변경이 있을 때만 업데이트하도록 하여 성능을 개선함.

무엇을 만들 것인가?

  • 게임 아이디어: Snake 게임을 먼저 구현하려 했으나, Pong 게임이 캔버스와 탭 바 사이를 이동하는 효과가 더 좋을 것이라 판단하여 Pong을 선택함.

Pong 구현

  • Pong 게임 구현: 컴퓨터 플레이어는 패들의 중심을 공의 중심에 맞추도록 함. 공이 패들에서 튕길 때 간단한 삼각법을 사용하여 각도를 계산함. 공과 패들이 파비콘으로 부드럽게 이동하는 효과를 강조하기 위해 공에 트레일을 추가함.

마무리

  • 프로젝트 경험: Recurse Center에서 이 프로젝트를 진행하며 많은 영감을 받음. Recurse Center는 프로그래밍을 위한 작가의 휴양지와 같은 곳으로, 이곳에서의 경험이 프로젝트의 동기부여가 됨.
▲
neo 7일전  [-]
Hacker News 의견

  • 안녕하세요! 제가 만들었음. 이게 HN 커뮤니티에 어필할지 궁금했음

    • 애니메이션을 사용하면 어떻게 보일지 정말 흥미로움 (Firefox는 애니메이션 파비콘을 지원함) - 예를 들어, 미래의 공 위치를 예측하고 애니메이션 SVG를 만들어 훨씬 나은 프레임 속도를 얻을 수 있음
    • 친구가 오프라인에서 캔버스 래스터화가 (일반적으로) GPU에서 이루어진다고 지적했음, 그래서 내 애니메이션이 끊기는 것에 대한 성능 직관이 잘못되었을 가능성이 있음
    • Chrome이 파비콘 업데이트를 초당 4회로 제한한다고 중간 정도로 확신함; 파비콘을 업데이트하는 다양한 방법이 많아서 내가 놓친 것이 있을 수 있음

  • Nolen의 최근 Recurse 강연에 참석했음, 이 절대적으로 미친 듯하지만 근본적으로 재미있고 멋진 게임들이 정말 매력적임

    • 예전 인터넷이 떠오름, 사람들이 단순히 재미를 위해 무언가를 만들던 시절이었음
    • 어젯밤 Nolen이 올린 것들에 영감을 받아 페이지의 소스 코드를 출력하는 매우 재미있는 일종의 퀸을 만들었음, BEAM 디컴파일과 다른 트릭들을 사용했음
    • 이런 것들을 만들어낼 시간이 있었으면 좋겠고, 이런 방식으로 무언가를 만들어내는 사람들이 있다는 것을 알게 되어 미소가 지어짐
    • 웃음을 원한다면 이 퀸을 얻는 작품은 여기 있음: 링크

  • Nolen이 만든 모든 것을 사랑함. 나에게는 그가 인터넷이 예전 같았던 시절을 떠올리게 하는 단일 목적 앱/사이트를 개발하는 달콤한 지점을 찾은 것처럼 보임

  • Matthew Rayfield가 탭 파비콘 대신 URL 바를 사용한 유사한 탐험: 링크

  • 다음을 떠올리게 함:

    • "Show HN: 이 놀라운 실험을 보고 간단한 버전을 만들었음" (2023.11.25) 링크
    • "Three.js와 localStorage를 사용하여 여러 창에서 3D 장면 동기화" (2023.11.27) 링크

  • Doom이 다음이라고 부름

  • 기분 좋게 터무니없고, A+ 노력임

  • 밴드 "Ok Go"가 구글 크롬과 협업한 뮤직 비디오가 있었음, 브라우저 창과 댄서들의 놀라운 동기화와 만화경 같은 효과가 있었음... 이것이 그것을 떠올리게 했음

  • Doom 포트가 며칠 내로 나올 것 같음

  • 정말 멋짐, Chrome이 얼마나 수정 가능할 수 있는지 좋아함, 이건 웹소켓을 사용하는 것 같지만 탭 통신을 위한 확장 기능도 사용할 수 있음

답변달기