Pong rodando em 240 abas do navegador

Rodando Pong em 240 abas do navegador

• Aproveitando abas não utilizadas: O jogo Pong é executado organizando 240 abas do navegador em uma grade 8x30. A bola e as raquetes podem se mover suavemente entre o canvas da janela em primeiro plano e todas as abas.

Inspiração

• Flappy Favi: A inspiração veio do fato de o amigo Tru ter criado uma versão de Flappy Bird rodando em favicons. Como os favicons são pequenos e difíceis de ver, surgiu a ideia de desenhar a imagem em várias abas.

Prototipagem

• Criação da grade de abas: Usando AppleScript, foram abertas 30 abas em cada uma de 8 janelas do Chrome, e as janelas foram posicionadas adequadamente para formar uma grande grade. No início, o script também limpa o comportamento do Chrome de reabrir abas fechadas.

Atualização rápida de favicon

• Atualização de favicon: Ao especificar a localização do favicon no elemento head do HTML, o navegador é levado a alterar o ícone. O Chrome consegue atualizar o ícone cerca de 4 vezes por segundo. Em abas em segundo plano, o loop de setInterval roda apenas uma vez por segundo.

• Uso de Web Workers: Para que funcione suavemente mesmo em abas em segundo plano, Web Workers são usados para fazer o temporizador enviar mensagens ao documento principal.

Comunicação entre abas

• Reconhecimento da posição da aba: O código AppleScript passa a janela atual e o índice da aba como parâmetros de consulta, para que cada aba saiba sua própria posição.

• Uso de Broadcast Channel: Em vez de WebSockets, é usado Broadcast Channel para distribuir informações a outras abas no mesmo domínio. A aba principal executa a animação depois de receber eventos de registro de todas as abas em segundo plano.

Do canvas para a barra de abas

• Conexão entre canvas e barra de abas: Foi implementado um modo de fazer com que formas desenhadas na janela em primeiro plano se movam para a barra de abas. Com medições precisas, o canvas e os favicons são alinhados, e o desenho é feito no favicon e no canvas principal de acordo com a posição da forma.

Ganho de velocidade

• Otimização do uso de recursos: O desempenho foi melhorado ao atualizar o favicon não a cada frame, mas apenas quando há mudanças.

O que fazer?

• Ideia de jogo: A intenção inicial era implementar Snake, mas concluiu-se que Pong produziria um efeito melhor ao se mover entre o canvas e a barra de abas, então a escolha foi Pong.

Implementação do Pong

• Implementação do jogo Pong: O jogador controlado pelo computador ajusta o centro da raquete ao centro da bola. Quando a bola rebate na raquete, o ângulo é calculado com trigonometria simples. Para destacar o efeito de a bola e as raquetes se moverem suavemente como favicons, foi adicionado um rastro à bola.

Encerramento

• Experiência com o projeto: Este projeto foi desenvolvido no Recurse Center e trouxe muita inspiração. O Recurse Center é como um retiro de escritores para programação, e a experiência ali serviu de motivação para o projeto.

[GN⁺]

Comentários do Hacker News

• Olá! Fui eu que fiz isso. Fiquei curioso para saber se isso agradaria à comunidade do HN

  • Seria muito interessante ver como isso ficaria com animação (o Firefox suporta favicons animados) — por exemplo, daria para prever a posição futura da bola e criar um SVG animado para obter uma taxa de quadros muito melhor
  • Um amigo apontou que a rasterização offline do canvas é (geralmente) feita na GPU, então é possível que minha intuição sobre desempenho em relação à animação travando estivesse errada
  • Tenho uma confiança moderada de que o Chrome limita as atualizações de favicon a 4 por segundo; há várias formas diferentes de atualizar um favicon, então talvez eu tenha deixado passar alguma coisa

• Assisti recentemente à palestra do Nolen na Recurse, e esses jogos absolutamente malucos, mas fundamentalmente divertidos e legais, são muito cativantes

  • Isso me lembra a internet antiga, quando as pessoas faziam coisas simplesmente por diversão
  • Inspirado pelas coisas que o Nolen postou ontem à noite, fiz uma espécie de quine bem divertida que imprime o código-fonte da página, usando descompilação de BEAM e outros truques
  • Queria ter tempo para criar coisas assim, e só de saber que existem pessoas fazendo algo desse jeito já me faz sorrir
  • Se você quiser dar risada, a obra que produz esse quine está aqui: link

• Adoro tudo o que o Nolen faz. Para mim, parece que ele encontrou um ponto ideal ao desenvolver apps/sites de propósito único que me fazem lembrar de como a internet costumava ser

• Uma exploração semelhante de Matthew Rayfield usando a barra de URL em vez do favicon da aba: link

• Isso me lembra:

  • "Show HN: Vi este experimento incrível e fiz uma versão simples" (2023.11.25) link
  • "Sincronizando cenas 3D entre várias janelas com Three.js e localStorage" (2023.11.27) link

• Estou chamando que Doom é o próximo

• Deliciosamente absurdo, esforço nota A+

• A banda "Ok Go" tinha um videoclipe em colaboração com o Google Chrome, com uma sincronização impressionante entre janelas do navegador e dançarinos, além de efeitos caleidoscópicos... isso me fez lembrar daquilo

• Acho que um port de Doom deve aparecer em alguns dias

• Muito legal, gosto de como o Chrome pode ser tão modificável; isto parece usar WebSockets, mas também dá para usar extensões para comunicação entre abas