CSSQuake

 (cssquake.com)
1 pontos por GN⁺ 4 시간 전 | 1 comentários | Compartilhar no WhatsApp
  • Demonstração do CSSQuake que executa Quake no navegador, com cssQuake v0.230 inicializado e o status coming soon! exibidos na página
  • A renderização fica por conta do PolyCSS renderer v0.2.6, e é possível verificar os logs de carregamento de manifest, progs, definitions, weapon model e dos recursos id1/pak0.pak
  • O jogo incluído é Quake Shareware version 1.06, com a indicação de copyright Quake (C) 1996 id Software, Inc.
  • A tela de multijogador oferece configurações de nome, cor, mapa, fraglimit, timelimit, máximo de jogadores e as ações Create, Join e Copy Link
  • Como também exibe instruções de controle e alternâncias de depuração, a página atualmente mostra ao mesmo tempo uma demonstração em execução e a interface de configurações

Demo do Quake inicializada no navegador

  • O título da página é cssQuake - Powered by PolyCSS, e o corpo mostra v0.230 e coming soon!
  • No log inferior aparece === cssQuake v0.230 initialized ===
  • O estado de carregamento é exibido na seguinte ordem
    • Host_Init
    • Loaded manifest
    • Loaded progs
    • Loaded definitions
    • Weapon model
    • Assets from id1/pak0.pak
  • A área de indicadores de desempenho mostra 0 FPS e 0 MS
  • Os links relacionados são cssQuake GitHub, id Software Quake GitHub e Layoutit

Multijogador e configurações de controle

  • No menu Multiplayer, é possível definir nome, cor, mapa, fraglimit, timelimit e número máximo de jogadores
    • O mapa padrão exibido é E1M1 the Slipgate Complex
    • Os botões de ação são Create, Join, Copy Link
  • A lista de mapas mostra os seguintes itens
    • E1M1 the Slipgate Complex
    • E1M2 Castle of the Damned
    • E1M3 the Necropolis
    • E1M4 the Grisly Grotto
    • E1M5 Gloom Keep
    • E1M6 The Door To Chthon
    • E1M7 The House of Chthon
    • E1M8 Ziggurat Vertigo
  • As instruções de controle são divididas em Gameplay e Menu
    • Gameplay: movimento com WASD, visão com o Mouse, disparo com Click, pulo com Space, corrida com Shift, agachar com Ctrl
    • Menu: navegação com as setas do teclado, seleção com Enter, voltar com Esc
  • Nas configurações de Debug e Gameplay, aparecem as seguintes alternâncias
    • Show outlines, Show stats panel, Show FPS panel
    • Ajuste de Crosshair
    • Dynamic lighting, Mute sounds, Show particles, Show enemies
    • Disable damage, Disable movement, Disable attacks, Invert mouse

Leituras relacionadas

1 comentários

 
GN⁺ 4 시간 전
Comentários do Hacker News

  • É um feito incrível, mas me incomoda achar que o Quake que eu rodava num Pentium-133 dos anos 90 parecia mais suave do que no meu Mac M1 Pro

    • Este engine não foi otimizado para desempenho. Afinal, está usando CSS
    • Só como referência, no Chrome do M2 roda liso como manteiga, mas no Safari parece engasgar e cortar bastante
    • No Firefox + Linux não há problema nenhum. Já no Gnome Web fica travando e estranho. Parece ser um problema do WebKit/Safari
    • Se fosse um Quake compilado em C, no M1 ele rodaria absurdamente rápido até em resolução total 8K
    • Espera, Quake rodava num Pentium-133? Eu usava um Pentium MMX 233MHz e achei que não rodaria bem, então nem pensei em tentar conseguir

  • Muito legal. Mais difícil de sair do que do vim

    • Se você quiser ver o menu, é só apertar Tab. Para voltar ao jogo, clique fora dos itens do menu
    • Como você saiu? Nada parece funcionar

  • Impressionante. Isso reimplementa não só o renderizador feito para usar CSS, mas também o engine e toda a lógica do jogo? Parece isso, porque há várias partes que se comportam de forma diferente do original
    Por exemplo, alguns botões funcionam quando você atira neles em vez de encostar, e algumas portas secretas abrem quando você encosta em vez de atirar

    • Olá! Obrigado pelo relato, e os botões agora devem funcionar corretamente
      Do lado da lógica do jogo, na etapa de build rodamos um pequeno extrator em JS sobre o QuakeC/progs.dat para gerar JSON com informações-fonte como estado, modelos, ataques e sons. O runtime no navegador é em TypeScript e usa essas informações para implementar uma jogabilidade parecida com Quake
    • Não, isso vale só para o renderizador. O jogo em si é TypeScript

  • Foi a primeira coisa na internet em muito tempo que me fez rir de verdade
    Também dei uma olhada em https://cssdoom.wtf/ e gostei daquilo também. Os dois são muito mais leves e agradáveis do que as notícias atuais \o/

  • Este CSS Quake parece precisar de JS para rodar

  • Apesar da proliferação de CSS como hack em cima de hack, e apesar de eu detestar apaixonadamente a stack web de CSS/JS/HTML, considero isso um caso de uso excelente e totalmente legítimo de CSS :)

  • Isso foi tirado de https://github.com/NielsLeenheer/cssDOOM?

  • Muito legal. Fico curioso sobre até onde isso pode ir. Dá para ver um cachorro que você atirou flutuando no ar; isso é por causa do CSS ou é algo corrigível?

    • .dog { display: float; }

  • É impressionante, mas parece que esse tipo de coisa não deveria ser possível numa linguagem de estilo declarativa

    • O CSS está sendo usado só na renderização, não na lógica do jogo

  • Uau, isso é muito legal. Roda muito suave. É absurdamente fascinante que, mesmo depois de uns 25 anos, a memória muscular continue intacta