Dica 1
Cinco jogos, zero bibliotecas.
Física, colisão por tiles, inimigos e placar escritos à mão. Um laço com passo fixo de 1/60 s mantém o jogo igual em qualquer monitor, de 60 a 144 Hz.
Emulador retrô · SNES e Mega Drive
A locadora de 16 bits agora cabe no navegador.
RetroPlay é o conceito de um emulador que roda direto na aba: sem download, sem instalação, sem fita pra rebobinar. Cinco jogos originais já estão na prateleira — escolha o cartucho e aperte Start.
Portfólio: jogos originais em JavaScript — nenhuma emulação real, nenhuma ROM.
Como funciona
Três passos entre você e a fase 1.
-
01
Escolha o cartucho
Passeie pela prateleira: plataforma, arcade, corrida e ação, todos jogáveis.
-
02
Carrega na aba
O jogo sobe direto no navegador. Nada de plugin, instalador ou conta obrigatória.
-
03
Jogue do seu jeito
Setas, Z e X no teclado — ou o controle na própria tela do celular.
Tela do emulador
Toda sessão começava assim.
Botão de liga. Um ponto de luz no meio do vidro, depois uma linha.
Depois, o chiado.
A tela procura sinal. Aqui ela é um canvas de 256 × 224 pixels — a resolução nativa de um SNES.
A imagem desce, linha por linha.
Como o feixe de um tubo de raios catódicos, de cima pra baixo.
Os controles acordam.
Setas movem, Z pula, X age. No celular, use o controle abaixo da TV.
Sua vez.
Clique na tela ou aperte Enter para jogar. Troque de cartucho na prateleira.
Super Irmãos Tijolo · Plataforma · SNES Z pula · X corre · pise nos besouros
Corredor 16-bit
Sopre o cartucho. Encaixe na TV.
Passe o mouse para tirar a poeira; clique para encaixar e jogar. Jogos originais, inspirados nos clássicos de plataforma, arcade, corrida e ação.
Sobre o projeto
Detonado: como isso foi feito.
RetroPlay é uma peça de portfólio. O que está em jogo aqui é o design, a experiência e o código — explicados do jeito que as revistas de dicas explicavam cada fase.
Dica 2
Sprites feitos de texto.
Cada personagem é uma lista de linhas em que cada letra é uma cor da paleta. As capas dos cartuchos são a primeira tela de cada jogo, desenhada em miniatura — nenhuma imagem externa.
Dica 3
A rolagem é o botão de liga.
Um único valor de progresso, de 0 a 1, comanda o feixe de luz, o chiado, a imagem descendo e os controles. Rolou pra longe? O jogo pausa sozinho.
Dica 4
Acessível por padrão.
As setas só são capturadas durante a partida, para nunca sequestrar a rolagem. Com movimento reduzido, nada se mexe sozinho; cartuchos e controles são botões de verdade, com foco visível.
Hora de devolver
O código está no balcão.
Da TV que liga ao robô que carrega o tiro, tudo está aberto no GitHub — com as decisões explicadas no README.
Ver o código no GitHub