Sou novo em HTML5 / Canvas / Game, mas tenho trabalhado com ele depois de ler alguns livros. Eu acho que tenho uma boa ideia de como as coisas funcionam. Esta questão faz várias perguntas menores, mas em geral é basicamente uma questão de "abordagem estrutural". Eu não estou esperando respostas verbosas, mas esperançosamente pequenos ponteiros aqui e ali :) Aqui está um link para um não-rolando, e atualmente bastante entediante Super Mario World.

Super Mario World Test

NOTA: Os controles são Esquerda / Direita e a Barra de Espaço para pular. Esta é apenas a configuração para o Firefox agora, como eu estou apenas aprendendo.

Eu fiz algo errado neste ponto?

Atualmente, concentrei-me apenas em como o Mario corre e pula, e acho que o consegui bastante bem. A caixa de moedas não faz nada e o fundo é apenas uma imagem carregada de aparência. Aqui está a minha abordagem, por favor, deixe-me saber se há algo totalmente errado com isso:

Permite que Mario pule atuando em duas velocidades Y (variáveis ​​Gravity e Jump)Permite que Mario corra atuando em 1 velocidade (esquerda ou direita "atrito" + aceleração)Sprites são usados ​​e posicionados de acordo com keypress / keydownEu não tenho certeza se isso está certo, mas eu estou usando uma função construtora para construir um objeto, então dentro do loop de animação principal eu estou chamando a função prototype.draw para esse objeto para atualizar todas as variáveis ​​e redesenhar o objeto.Estou limpando a tela inteira em cada quadroDevo estar dividindo isso em mais do que apenas uma função de desenho, como Mario.move ()?Eu configurei um GroundLevel e uma variável JumpLevel para criar dois planos de jogo. O JumpLevel está configurado para permitir o controle de quão alto Mario pode pular em tempo real. Os dois lugares permitiriam que o solo se elevasse como uma colina - mantendo o ponto em que a gravidade se sobrepõe à força de salto de Mário à mesma distância do chão.Por uma questão de clareza, tudo é separado em diferentes arquivos JS, mas obviamente se consolidaria.Seguindo em frente:

Agora que terminei de configurar o modo como o Mario se movimenta (acho que há outras coisas menores que eu poderia fazer como acertar o cogumelo para cima / baixo e atirar bolas de fogo). Eu acho que posso descobrir isso, mas estou realmente perdido quando se trata de visualizar o seguinte e como o HTML5 / Canvas pode lidar com isso facilmente:

Fundo de rolagem (tentei configurar o Ground Tiles e usar o Screen Wrapping, mas isso parece causar muitos problemas desiguais, já que eu estava movendo as peças na direção oposta. Infelizmente, como estou tentando dar conta da aceleração, joguei fora a contagem e estava causando lacunas no chão.Eu descartei essa idéia.Uma DIV sob a tela com uma grande imagem de fundo seria a melhor solução?

Inimigos: Eu criaria inimigos da mesma maneira e executaria um loop para detecção de colisão em cada inimigo durante cada quadro?

Caixas de fundo: Estou tentando permitir que Mario fique nas caixas no fundo, mas não tenho certeza de como abordar isso. Atualmente tenho configuração de limites para Mario ficar na tela, continuo a expandir essas condições para configurar limites diferentes com base nas caixas? Eu posso ver que ter várias caixas na tela e fazê-lo dessa maneira ficaria meio doido, especialmente se eu estivesse fazendo o mesmo teste de sucesso para os inimigos? Eu sei que estou perdendo alguma coisa aqui ....

Movimento de Nível: Isso é um pouco relacionado. Quando a tecla direita é pressionada, basicamente tudo no nível precisa se mover para a esquerda. Será que eu precisaria rastrear todas as posições de tudo que poderia tocar Mario (caixas para ele ficar em pé e inimigos para ele colidir) durante cada quadro de animação? Isso parece que seria meio ineficiente?

Obrigado a todos! Vou manter isso atualizado com resultados / soluções :)