A maioria dos tutoriais opengl nunca lhe diz como estruturar seu código. O código geralmente é compactado em um único arquivo, o que é bom para um tutorial, mas falha terrivelmente assim que você deseja fazer algo sério. Eu configurei um dos meus projetos em 3 arquivos javascript main.js, game.jse drawables.js. main.jsconfigura tudo. Ele vincula eventos-chave, cria os shaders, carrega as texturas e configura o objeto do jogo. game.jsé onde meu objeto de jogo reside. Ele contém uma lista de objetos atuais na tela, uma lista de objetos ociosos fora da tela e também variáveis que espaçam seu estado (pausado, jogando, menu, ..), pontuação, gameSpeed (que aumenta com o tempo) e assim por diante.
odrawables.jsé onde minha hierarquia de objetos é definida. Eu poderia usar um novo arquivo para cada objeto drawable, mas como cada arquivo .js é uma nova solicitação http (e não posso me incomodar com a redução e / ou carregamento assíncrono), parecia um bom compromisso. Na parte inferior da hierarquia, tenho um objeto Square simples.
Um Square possui uma posição, um tamanho, uma velocidade e, opcionalmente, uma textura. Outros objetos drawable usam o objeto Square para desenhar seus componentes. Como exemplo, o objeto Player pode ser feito de dois objetos Square. Um para o modelo do jogador principal e outro para a sombra.