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

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는 프로그래밍을 위한 작가의 휴양지와 같은 곳으로, 이곳에서의 경험이 프로젝트의 동기부여가 됨.